Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kir-antipov/simpleajax
Vanilla JavaScript library, which designed to make simple ajax-requests
https://github.com/kir-antipov/simpleajax
ajax ajax-library vanilla-javascript vanilla-js
Last synced: 2 days ago
JSON representation
Vanilla JavaScript library, which designed to make simple ajax-requests
- Host: GitHub
- URL: https://github.com/kir-antipov/simpleajax
- Owner: Kir-Antipov
- License: mit
- Created: 2019-08-17T10:04:52.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-04-02T08:21:18.000Z (over 4 years ago)
- Last Synced: 2024-04-25T06:21:45.055Z (7 months ago)
- Topics: ajax, ajax-library, vanilla-javascript, vanilla-js
- Language: JavaScript
- Size: 20.5 KB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# SimpleAjax.js
-------------
`SimpleAjax.js` - vanilla JavaScript library, which designed to make simple ajax-requests
## Usage
```js
// GET request to specified URL without parameters
ajax(url);
// or
ajax(url, options);
// HTMLFormElement () could be a single argument
// if it has an `action` attribute, which will be used as `url`.
// Its `method` attribute will be used as `method`.
ajax(form);
// or
ajax(form, options);
// or just
ajax(options);
```
## Options
- `url` (string) - requested resource's url
- `method` (or `type`) (string) - request method (`GET`, `POST`, `HEAD` etc)
- `data` (or `content`) (object | HTMLFormElement | string) - object, form (or its selector)
- `success` (function(AjaxResult)) - callback on successful request completion
- `error` (function(AjaxResult)) - callback on request failure
- `statusCode` (object) - an object of numeric HTTP codes and functions to be called when the response has the corresponding code
- `headers` (object) - dictionary of request headers
- `beforeSend` (function(XMLHttpRequest)) - function for modifying a request before sending it
- `beforeReturn` (function(AjaxResult, XMLHttpRequest)) - function for modifying a response before returning it
- `modifier` (object) - object with properties `beforeSend` or/and `beforeReturn` (works the same as the functions above)
## AjaxResult
- `response`
- `value` (object) - `Object` containing the response to the request, or null if the request was unsuccessful or it can't be parsed as JSON
- `document` (document) - `Document` containing the response to the request, or null if the request was unsuccessful or it can't be parsed as XML or HTML
- `text` (string) - `DOMString` that contains the response to the request as text
- `url` (string) - serialized `URL` of the response or the empty string if the URL is null
- `type` (string) - value that defines the response type
- `status` (number) - unsigned short with the status of the response of the request
- `statusText` (string) - `DOMString` containing the response string returned by the HTTP server
- `hasError` (boolean) - `true` if server returned an error code
- `headers` (object) - dictionary of response headers
## Examples
```js
ajax("https://api.nuget.org/v3/index.json", {
statusCode: {
200: function(response) {
console.log("HTTP 200");
}
},
success: function(response) {
console.log("Success :)");
},
error: function(response) {
console.log("Error :(");
}
});
```
```js
ajax({ url: "https://api.nuget.org/v3/index.json" })
.then(response => console.log(response.hasError ? "Error :(" : "Success :)"));
```
```js
let response = await ajax("https://api.nuget.org/v3/index.json");
console.log(response.value);
```
```html
document.querySelector("form").addAjax(function ({ response }) {
this["version"].value = response.value.version;
},
{
// Pre-submit handler
// If this function will return false,
// request processing will be canceled
confirmation: () => confirm("Are you shure?"),
// The time (in ms) at which repeated requests are blocked
interval: 500
});
```
## Install
Via [npm](https://www.npmjs.com/package/simple-ajax-vanilla):
```cmd
npm i simple-ajax-vanilla
```
Via [JSDelivr](https://www.jsdelivr.com/package/npm/simple-ajax-vanilla):
```html
```
Manually:
Simply download `simpleAjax.min.js` from the [latest release](https://github.com/Kir-Antipov/SimpleAjax/releases/latest) and add it to your project