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
Want to learn how to write your own vanilla JS plugins? Check out "The Vanilla JS Guidebook" and level-up as a web developer. 🚀
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.
- NPM:
npm install cferdinandi/atomic - Bower:
bower install https://github.com/cferdinandi/atomic.git - Component:
component install cferdinandi/atomic
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.
- In bash/terminal/command line,
cdinto your project directory. - Run
npm installto install required files. - When it's done installing, run one of the task runners to get going:
gulpmanually compiles files.gulp watchautomatically compiles files when changes are made and applies changes using LiveReload.gulp testruns 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', // the request type
url: null, // the endpoint for your request
data: {}, // data to be sent to the server
callback: null, // A callback function (for use with JSONP)
contentType: 'application/x-www-form-urlencoded', // The content type
responseType: 'text' // the response type
});Atomic works in all modern browsers, and IE8 and above.
Please review the contributing guidelines.
The code is available under the MIT License.