Vanilla JavaScript Ajax requests with chained success/error callbacks and JSON parsing. Supports GET, POST, PUT, DELETE, and JSONP.

Originally created and maintained by Todd Motto.

Download Atomic / View the demo

Compiled and production-ready code can be found in the dist directory. The src directory contains development code.

<script src="dist/atomic.js"></script>

Pass in the requested URL, and optionally, the request type. Defaults to GET.

The success, error, and always callbacks run when the request is successful, when it fails, and either way, respectively. They accept the responseText (data) and full response (xhr) as arguments. All three callbacks are optional.

// A GET request
atomic.ajax({
	url: '/endpoint.com'
})
	.success(function (data, xhr) {
		console.log(data); // xhr.responseText
		console.log(xhr); // full response
	})
	.error(function (data, xhr) {
		console.log(data); // xhr.responseText
		console.log(xhr); // full response
	})
	.always(function (data, xhr) {
		console.log(data); // xhr.responseText
		console.log(xhr); // full response
	});

// A POST request
atomic.ajax({
	type: 'POST',
	url: '/endpoint.com'
});

JSONP requests do not accept the callback functions. You must instead setup a global callback function and pass in the function name a string to the callback option. Atomic will pass the returned data into your callback as an argument (in the example below, data).

var myCallback(data) {
	console.log(data); // full response
};

// A JSONP request
atomic.ajax({
	type: 'JSONP',
	url: '/endpoint.com',
	callback: 'myCallback'
});

You can install Atomic with your favorite package manager or module loader directly from NPM.

npm install atomicjs

If you would prefer, you can work with the development code in the src directory using the included Gulp build system. This compiles, lints, and minifies code.

Make sure these are installed first.

• Node.js
• Gulp sudo npm install -g gulp

1. In bash/terminal/command line, cd into your project directory.
2. Run npm install to install required files.
3. When it's done installing, run one of the task runners to get going:
   • gulp manually compiles files.
   • gulp watch automatically compiles files when changes are made and applies changes using LiveReload.
   • gulp test runs unit tests.

Atomic includes smart defaults and works right out of the box. You can pass options into Atomic through the ajax() function:

atomic.ajax({
	type: 'GET', // {String} the request type
	url: null, // {String} the endpoint for your request
	data: {}, // {Object|Array|String} data to be sent to the server
	callback: null, // {String} The name of a global callback function (for use with JSONP)
	headers: { // {Object} Adds headers to your request: request.setRequestHeader(key, value)
		'Content-type': 'application/x-www-form-urlencoded'
	},
	responseType: 'text', // {String} the response type (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType)
	withCredentials: false // {Boolean} If true, send credentials with request (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials)
});

Atomic works in all modern browsers, and IE8 and above.

Please review the support guidelines.

The code is available under the MIT License.