Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

atomic

A tiny vanilla JS Ajax/HTTP plugin with great browser support.

Subscribe to updates I use atomic


Statistics on atomic

Number of watchers on Github 381
Number of open issues 1
Average time to close an issue 6 months
Main language JavaScript
Average time to merge a PR 12 days
Open pull requests 7+
Closed pull requests 4+
Last commit almost 2 years ago
Repo Created over 5 years ago
Repo Last Updated over 1 year ago
Size 62 KB
Organization / Authorcferdinandi
Contributors4
Page Updated
Do you use atomic? Leave a review!
View atomic activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating atomic for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Atomic Build Status

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 Vanilla JS Pocket Guide series and level-up as a web developer.


Getting Started

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

1. Include Atomic on your site.

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

2. Make your Ajax request.

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'
})
    .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'
});

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',
    callback: 'myCallback'
});

Cancelling requests

To cancel an Ajax request, you can call the abort() method. In order for this to work, you need to assign your Atomic call to a variable.

// Make your call
var xhr = atomic.ajax({
    url: '/endpoint'
}).success(function (data) {
    // ...
});

// Abort your call
xhr.abort();

Accessing the XHR request directly

You can add event listeners to your request or access other root properties by accessing your XHR request directly with the request property.

// Make your call
var xhr = atomic.ajax({
    url: '/endpoint'
}).success(function (data) {
    // ...
});

// Access the request
xhr.request.addEventListener('load', function () {
    console.log('Loaded!');
}, false);

Installing with Package Managers

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

npm install atomicjs

Working with the Source Files

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.

Dependencies

Make sure these are installed first.

Quick Start

  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.

Options and Settings

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)
});

Browser Compatibility

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

Support

Please review the support guidelines.

License

The code is available under the MIT License.

atomic open issues Ask a question     (View All Issues)
  • almost 3 years Add ability to set headers array
  • over 3 years How to use Atomic properly (Browserify & Babel)
  • over 3 years ActiveXObject is not defined
  • over 3 years Add a way to abort requests
  • about 5 years Publish to NPM
  • about 5 years Use Promise-like syntax
  • over 5 years IE8 .delete() method quirk
atomic open pull requests (View All Pulls)
  • Adding a way to abort requests
  • JSON stringify for passed-in objects & a content-type param
  • GET & POST support object to sent as query string
  • Allow for multiple .success() and .error() callbacks
  • Added support for options hash
  • Add support to set header values
  • Added X-Requested-With header to request object
atomic questions on Stackoverflow (View All Questions)
  • What's the difference between the atomic and nonatomic attributes?
  • setnames() in data.table overrides atomic vector of original names
  • DynamoDB: Update atomic counter and add other info if new item
  • Is the following Assembly Atomic, If not, Why?
  • Are append operations on an AppendBlob atomic?
  • Google Datastore - Atomic read and create
  • Undefined reference in static library to c++11 atomic
  • Error in tag$name : $ operator is invalid for atomic vectors , when reading text files in Shiny
  • Atomic operation on read/write variable in java
  • What is the definition of recursive objects and of atomic objects?
  • Error in l$data : $ operator is invalid for atomic vectors shiny app
  • How to solve "BUG: scheduling while atomic: swapper /0x00000103/0, CPU#0"? in TSC2007 Driver?
  • Is file append atomic in UNIX?
  • Are POSIX' read() and write() system calls atomic?
  • Can std::atomic memory barriers be used to transfer non-atomic data between threads?
  • Are C/C++ fundamental types atomic?
  • Implementing atomic<T>::store
  • Is the write operation of socketpair atomic?
  • What is the difference between atomic / volatile / synchronized?
  • C++ std::atomic vs. Boost atomic
  • Is Redis ZADD or ZSCORE atomic?
  • Updating array of doubles with atomic operations
  • How to dynamically initialize array of atomic?
  • Java atomic feature vs Effective Java excerpt
  • SVN Commit Error (couldn't perform atomic operation)
  • Atomic operations - semaphores, test&set
  • How to perform an atomic update on relationship properties with Py2neo
  • In C11/C++11, possible to mix atomic/non-atomic ops on the same memory?
  • What does "atomic" mean in programming?
  • Atomic Load Operation in NDK
atomic list of languages used
Other projects in JavaScript