AJAX - Server Response

onreadystatechange property

readyState properties retain the XMLHttpRequest status.

onreadystatechange properties define the function to be executed when the readyState changes.

status Properties and statusText The property contains the status of the XMLHttpRequest object.

Server response properties Method
onreadystatechange Defined the function to be called when the readyState attribute changes.
readyState

saved the XMLHttpRequest status.

  • 0: The request has not been initialized
  • 1: The server connection has been established
  • 2: The request has been received
  • 3: The request is being processed
  • 4: The request has been completed and the response is ready
status
  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Page not found"

For a complete list, please visit HTTP Message Reference Manual
statusText returns the status text (e.g. "OK" or "Not Found")

each time the readyState changes, the onreadystatechange function is called.

when readyState is 4,status is 200 when, the response is ready:

Example

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); 
}

Try It Yourself

Note:onreadystatechange is triggered five times (0-4), each time readyState all have changed.

Using callback functions

A callback function is a function that is passed as a parameter to another function.

If your website has multiple AJAX tasks, you should create a function to execute XMLHttpRequest objects and a callback function for each AJAX task.

该函数应当包含 URL 以及当响应就绪时调用的函数。

Example

This function should contain the URL and the function to be called when the response is ready.
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
  function loadDoc(url, cFunction) {
  var xhttp;
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      xhttp = new XMLHttpRequest();
    }
  };
  cFunction(this);
  xhttp.send();
}
xhttp.open("GET", url, true);
  function myFunction2(xhttp) {
 } 
function myFunction1(xhttp) {
  function myFunction2(xhttp) {
 }

Try It Yourself

// Action here

Server response properties Method
responseText property Property
responseXML Get response data in string format

Get response data in XML data format

Server response method Method
getResponseHeader() Description
getAllResponseHeaders() Return specific header information from the server

Return all header information from the server

responseText property The responseText property returns the server response in the form of a JavaScript string, so you can use it like this:

Example

document.getElementById("demo").innerHTML = xhttp.responseText;

Try It Yourself

responseXML property

The XML HttpRequest object has a built-in XML parser.

ResponseXML as an XML DOM object.

Using this property, you can return the responseParsingfor the XML DOM object:

Example

Request file music_list.xmland parse the response:

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET", "music_list.xml", true);
xhttp.send();

Try It Yourself

You will learn more about XML DOM in the DOM chapter of this tutorial.

The getAllResponseHeaders() method

getAllResponseHeaders() The method returns all header information from the server response.

Example

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  }
};

Try It Yourself

The getResponseHeader() method

getResponseHeader() The method returns specific header information from the server response.

Example

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Try It Yourself