Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a jQuery stand-alone Ajax module?

People also ask

Does jQuery come with AJAX?

jQuery provides several methods for AJAX functionality. With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!

Can I use AJAX without jQuery?

Using Ajax requires jQuery, whilst it is a convenience, including the whole jQuery library for just Ajax is overboard. Here is a function that replaces Ajax (plus jQuery) and allows you to do GET, PUT, POST and DELETE HTTP calls. This is all done with XMLHttpRequest (XHR).

Is AJAX JavaScript or jQuery?

AJAX and jQuery uses Javascript.

What is the difference between jQuery get () and jQuery AJAX ()?

get() executes an Ajax GET request. The returned data (which can be any data) will be passed to your callback handler. $(selector). load() will execute an Ajax GET request and will set the content of the selected returned data (which should be either text or HTML).


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


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.


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).


As of jQuery 1.8 you can do it: LINK


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