@fdaciuk/ajax

Ajax

Ajax module in Vanilla JS

You can use this module with AMD, CommonJS or just like a method of window object!

Installation

Bower

You can install via bower:

bower install ajax

Manual installation

Just download dist/ajax.min.js file, and add dist/ajax.min.js on your HTML file:

<script src="js/ajax.min.js"></script>

CommonJS (via NPM)

npm i --save @fdaciuk/ajax

CDN

You may use a CDN to get the latest version.

CDNJS:

https://cdnjs.com/libraries/fdaciuk-ajax

GitHub:

Or you may just add the following line to your HTML file:

<script src="//cdn.rawgit.com/fdaciuk/ajax/v1.0.1/dist/ajax.min.js"></script>

Usage

AMD

define([ 'ajax' ], function( ajax ) {
  ajax().get(...)
  ...
});

CommonJS

var ajax = require( '@fdaciuk/ajax' );
ajax().post(...);
...

Method of window object

window.ajax().get(...);

or just

ajax().get(...);

Signature

ajax([options])

Options

Optional object with request options. See all options below.

HTTP Methods

You may pass any HTTP method as you want, using method property:

var request = ajax({
  method: 'options',
  url: '/api/users',
  data: {
    user: 'john'
  }
});

request.then(function(response) {...});

For using this kind of request, you must pass url property.

The property data is optional, but may used to pass any data via body on request.

headers

An object when key is a header name, and value is a header value.

ajax({
  headers: {
    'content-type': 'application/json',
    'x-access-token': '123@abc'
  }
})

If content-type is not passed, application/x-www-form-urlencoded will be used.

Methods

You may use any of this methods, instead the above approach:

get(url)

Get data as a JSON object.

ajax().get('/api/users');

post(url, [data])

Save a new register or update part of this one.

// Without headers
ajax().post('/api/users', { slug: 'john' });

// With headers
var request = ajax({
  headers: {
    'x-access-token': '123@abc'
  }
});
request.post('/login', { username: 'user', password: 'b4d45$' });

put(url, [data])

Update an entire register.

ajax().put('/api/users', { slug: 'john', age: 37 });

delete(url, [data])

Delete a register.

ajax().delete('/api/users', { id: 1 });

Return methods

then(response, xhrObject)

Promise that returns if the request was successful.

ajax().get('/api/users').then(function(response, xhr) {
  // Do something
});

catch(responseError, xhrObject)

Promise that returns if the request has an error.

ajax().post('/api/users', { slug: 'john' }).catch(function(response, xhr) {
  // Do something
});

always(response, xhrObject)

That promise always returns, independent if the status is done or error.

ajax().post('/api/users', { slug: 'john' }).always(function(response, xhr) {
  // Do something
});

Deprecated methods

You may see the deprecated methods here

Contributing

Check CONTRIBUTING.md

Code coverage and Statistics

https://github.com/reportz/ajax

License

MIT © Fernando Daciuk