AJAX/HTTP Library Comparison


February 04, 2016

Networking in JavaScript falls into 2 categories: AJAX (browser) and HTTP clients (server).

Sometimes you'll only need one of these, sometimes you'll want both (in an isomorphic/universal app for instance).

Either way, you'll probably want a nice concise syntax. Most developers find the XMLHttpRequest API a little too verbose for their taste.

Many developers use jQuery, but if you only need the AJAX features, loading the whole library may seem like a waste.

I've put together a list to help you pick the perfect JavaScript networking library for your project. Afterwards I'll suggest a library for a few specific scenarios.

Support Features
Chrome & Firefox1 All Browsers Node Concise Syntax Promises Native2 Single Purpose3 Formal Specification
XMLHttpRequest
Node HTTP
fetch()
Fetch polyfill
node-fetch
isomorphic-fetch
superagent
axios
request
jQuery
reqwest

Support
Chrome & Firefox1 All Browsers Node
XMLHttpRequest
Node HTTP
fetch()
Fetch polyfill
node-fetch
isomorphic-fetch
superagent
axios
request
jQuery
reqwest
Features
Concise Syntax Promises Native2 Single Purpose3 Formal Specification
XMLHttpRequest
Node HTTP
fetch()
Fetch polyfill
node-fetch
isomorphic-fetch
superagent
axios
request
jQuery
reqwest
1 Chrome & Firefox are listed separately because they support fetch(): caniuse.com/fetch
2 Native: Meaning you can just use it - no need to include a library.
3 Single Purpose: Meaning this library or technology is ONLY used for AJAX / HTTP communication, nothing else.

Great Chart, But Which Do I Choose?

fetch() is the new standard. It's already supported in Chrome and Firefox - so if don't need IE or Safari support you can use it today without any library at all. I suggest you start here.

If you need support for more browsers I suggest GitHub's Fetch polyfill. You get to use the new standard now, and eventually you can delete the polyfill library when more browsers support Fetch.

If you're using node.js you can still use Fetch, but you need the node-fetch library.

If your code is universal there's a Fetch library for that too: isomorphic-fetch. It wraps both node-fetch and the Fetch polyfill.

If you are already using jQuery, just use $.get or $.ajax. No additional libraries needed, and you'll have good support in most browsers. Using the Fetch polyfill would add unnecessary k-weight to your code.

Conclusion

This is typical for JavaScript - I've listed 11 ways to accomplish the same task, and my chart only covers the most popular options.

Researching JavaScript libraries takes time - a lot of time. Let me do the heavy lifting for you. I'll keep you posted on the newest and best JavaScript libraries that fit your project needs. Sign up for my mailing list right here:

ABOUT THE AUTHOR

Andrew H Farmer
Hey, I'm Andrew. Welcome to my blog on Modern JavaScript with React. I'm constantly searching the web to stay up-to-date on the latest frontend web tools so you don't have to. Got a question? Tweet me @ahfarmer!