# @stegopop/ajax-tap

> Listen in on any trusted XHR's made on your webpage. Run functions when your conditions are met.

Latest version **1.0.7** (published 2024-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @stegopop/ajax-tap
pnpm add @stegopop/ajax-tap
yarn add @stegopop/ajax-tap
bun add @stegopop/ajax-tap
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2024-06-05 |
| First published | 2023-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 50.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Nick Adams |
| Maintainers | stegopop |
| Keywords | ajax, listener, vanilla, browser |

## Links

- npm: https://www.npmjs.com/package/@stegopop/ajax-tap
- Repository: https://github.com/nickolasjadams/ajax-tap
- Homepage: https://github.com/nickolasjadams/ajax-tap#readme
- Issues: https://github.com/nickolasjadams/ajax-tap/issues
- npm.io page: https://npm.io/package/@stegopop/ajax-tap

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2024-06-05
- 1.0.6 — 2023-07-12
- 1.0.5 — 2023-07-06
- 1.0.4 — 2023-06-26
- 1.0.3 — 2023-04-27
- 1.0.2 — 2023-04-21
- 1.0.1 — 2023-04-21
- 1.0.0 — 2023-04-20

## README

# AjaxTap

[![npm version](https://badge.fury.io/js/@stegopop%2Fajax-tap.svg)](https://badge.fury.io/js/@stegopop%2Fajax-tap)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Listen in on any trusted XHR's made on your webpage. Run functions when your conditions are met.

## Why?

Say we are performing CRUD operation with AJAX through our (or someone else's) API. 

And the API always returns this structure

```
{
    type: String (success|failure),
    message: String (A user-friendly message)
}
```

It's not mandatory that you return JSON. It could be JSON, HTML, XML, or plain Text.

In your main template you could listen to all Ajax requests, and if they have this structure and come from a URL origin you trust, you can display the message at the top of the page.

```js
<script src="/dist/ajax-tap.min.js"></script>
<script>
    (function() {
        new AjaxTap()
            .addResponseEvent({
                trustedMessengers: [ "a-different-domain-you-trust.com" ],
                conditions: function(data) {
                    // The response contains keys for 'type' and 'message'.
                    return (data.type && data.message)
                },
                fire: function(data) {
                    // Display the message at the top of the page.
                    var messages = document.querySelector("#messages");
                    var message = document.createElement("div");
                        message.classList.add(data.type);
                        message.innerText = data.message;
                    messages.appendChild(message);
                }
            })
            .listen();
    })();
</script>
```

## Install

With NPM

```markdown
npm install @stegopop/ajax-tap
```

With a CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@stegopop/ajax-tap"></script>
```

## Browser Support

This project is transpiled to support back to IE11.

## Methods

`addResponseEvent(options)`

Adds a Request Event to the Tap. You can add multiple Request Events to a Tap.
This method returns the Tap so you can chain off of it.
 
Request Event Object Options
 - trustedMessengers (optional): Array
     -  The origin of the calling website is included in trustedMessengers by default.
 - conditions        (required): Function
     - You must provide data as an argument to this function.
     - This function must return true or false.
 - fire              (required): Function
     - You must provide data as an argument to this function.
     - This function must return true or false.

`listen()`

Begin listening to ajax requests for each RequestEvent on the Tap.

`url(str)`

A static helper method to get url properties from a String.

Returns 
 - hostname
 - protocol
 - search
 - port
 - origin
 - string
 - host
 - hash
 - pathname

---
_Source: https://npm.io/package/@stegopop/ajax-tap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._