Is there a jQuery stand-alone Ajax module?

Solution 1:

Update 2016

You can use this tool to build your own custom jQuery version.

jQuery Builder

As of jQuery 2.1.1

Full file sized unminified is: 241.55 Kb

Ajax Only minified is: 49.60 Kb

That is a 5x reduction in size.

enter image description here

Solution 2:

As Darin already says, it's all or nothing. JQuery's Ajax functions are closely intertwined with the rest of the functionality.

There are a few other, stand-alone Ajax libraries around like Matt Kruse's Ajax toolbox - maybe that helps.

I would consider loading the full jQuery library. If you link to jQuery on a CDN, loading times will be minuscule.

Solution 3:

Another option would be to use the built-in fetch API provided by the browser.

Here is an example snippet:

fetch('http://localhost:3000/users.json', {
  method: 'POST', 
  mode: 'cors', 
  redirect: 'follow',
  body: JSON.stringify({
     user: {
       firstName: 'john',
       lastName: 'doe'
     }
  }),
  headers: new Headers({ 'Content-Type': 'application/json' })
}).then(function() {
  /* handle response */
});

This blog post is a great introduction to the API and shows more use cases.

fetch doesn't have full cross-browser support yet (I think mainly IE and Safari are lacking), but there is polyfill that you can use until that day comes.

fetch polyfill: https://github.com/github/fetch

Older browsers will also need a Promise polyfill (one option, another option).

Solution 4:

As of jQuery 1.8 you can do it: LINK

Solution 5:

You can view standard javascript alternatives to jQuery at youmightnotneedjquery.com

For example the alternative to $.ajax post is:

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

And the alternative to $.ajax get is:

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var resp = request.responseText;
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();