Questions tagged [ajax]

AJAX (Asynchronous JavaScript and XML) is a technique for creating interactive website user interfaces without the traditional web page refresh or reload. It uses asynchronous data exchange between client and server to update displayed information and respond to user interactions seamlessly. Include additional tags for programming languages, libraries, frameworks, web browsers, protocols and other environmental information.

stands for Asynchronous and .

While not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that described an approach to using a number of existing technologies together, including: / , , , the , , , and most importantly the XMLHttpRequest object. uses the XMLHttpRequest (abbreviated ) API to manage requests from inside the code.

What makes so valuable is the asynchronous nature of the data exchange. Before its advent, data was only sent during the client communication phase (when the web page was first requested). This meant that all data had to either be loaded when the page was requested, or the user interaction would be a series of HTML requests to the server with page refreshes. Each HTML request would provide additional information as part of the URL or as data in a form field with state data often kept as hidden field data. This second alternative used a series of GET or POST operations (i.e., load page, change data, post data, load page, etc.), resulting in the displayed page being refreshed, providing a choppy user experience and possible security issues.

Neither loading an entire data set into the client nor reloading the base page with each GET or POST request was cheap in terms of resources. changed the web model by using JavaScript to asynchronously load data into the client as the data was needed.

The XMLHttpRequest object is the primary method of interacting with the server and the client; it is supported by all modern browsers. There are several frameworks and libraries with a higher level API that encapsulate the XMLHttpRequest object, providing a more straightforward interface to hide the complexity of using the object directly.

The client opens a new XMLHttpRequest and requests a web page, just like a regular client call would. This request, however, is typically aimed at a particular page that loads only data to be processed by JavaScript. As such, the data that needs to be exchanged can be limited to just what is necessary for that particular function, saving time, memory and bandwidth. Because it is asynchronous, this interaction does not have to block any other actions being done on the web page, and it lets the client/browser act more like a local desktop program with the website, exchanging data as needed without reloading any other resources.

Although the "X" in stands for , any type of data can be sent and received. (JavaScript Object Notation) has replaced as the data interchange format of choice. A major reason for using JSON is that JavaScript natively parses JSON text, while XML must be parsed by a much slower and cumbersome set of client libraries. Today, with the help of new responseType objects (ArrayBuffer, Blob, etc.), you can even request binary files via XMLHttpRequest and build much stronger and fully-featured web apps.

When XMLHttpRequest is used directly, the code must handle the communications layer and wait for the request response to be complete. This is shown in the code example below starting with the line if (xmlhttp.readyState == 4 && xmlhttp.status == 200). Since this callback function will be called every time the client receives a packet from the server, this test is needed to ensure the request state is complete and a valid 200 response is received before processing the response.

AJAX Example 1:

var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        //stuff to do with response text (xmlhttp.responseText)
}"GET", "url", true);

AJAX Example 2:

function (url, params) {
    // IE 5.5+ and every other browser
    var xhr = new(window.XMLHttpRequest || ActiveXObject)('MSXML2.XMLHTTP.3.0');"POST", url, true);

    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
    xhr.setRequestHeader("Accept", "application/json");
    xhr.onreadystatechange = function () {
        if (this.readyState === 4) {
            if (this.status >= 200 && this.status < 400) {
    xhr = null;

Because needing to test the status adds some complexity to , there are many libraries that will handle this interaction for you. Below is an example of using a standard library, and shows how it simplifies

jQuery AJAX Example:

    url: "url",
    context: document.body
}).done(function() {
    //stuff to do with response text

As of Chrome 42, Edge 14 and Firefox 39/52, there is a new API called fetch that drastically simplifies in browsers. There is no support for Internet Explorer. fetch is Promised based.

Fetch AJAX example:

    .then(res => res.json())
    .then(jsonData => console.log(jsonData));

fetch('/url', { method: 'POST', body: JSON.stringify({id: 1}), })
    .then(res => res.json())
    .then(jsonData => console.log(jsonData));

Axios AJAX example:

Axios is a Promise based HTTP client for the browser and Node JS.

// Make a request for a user with a given ID
  .then(function (response) {
  .catch(function (error) {
  });'/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  .then(function (response) {
  .catch(function (error) {

List of AJAX frameworks:

  1. jQuery UI
  2. MooTools
  3. Prototype
  4. YUI Library
  6. Spry framework
  7. Dojo Toolkit
  8. Ext JS
  9. Backbone.js
  10. AngularJS
  11. Unified.JS


221904 questions
9 answers

jQuery get textarea text

Recently I have started playing with jQuery, and have been following a couple of tutorials. Now I feel slightly competent with using it (it's pretty easy), and I thought it would be cool if I were able to make a 'console' on my webpage (as in, you…
  • 8,608
  • 9
  • 36
  • 47
9 answers

What is the motivation behind the introduction of preflight CORS requests?

Cross-origin resource sharing is a mechanism that allows a web page to make XMLHttpRequests to another domain (from Wikipedia). I've been fiddling with CORS for the last couple of days and I think I have a pretty good understanding of how everything…
Jan Groth
  • 14,039
  • 5
  • 40
  • 55
15 answers

Getting "net::ERR_BLOCKED_BY_CLIENT" error on some AJAX calls

Recently I've realised that, some adblocker extensions (such as adBlocker plus) block some Ajax calls. I get that error on the console: GET http://localhost/prj/conn.php?q=users/list/ net::ERR_BLOCKED_BY_CLIENT Why does it block some Ajax call but…
  • 12,579
  • 9
  • 44
  • 72
15 answers

jQuery AJAX cross domain

Here are two pages, test.php and testserver.php. test.php