Response

Next ❯Ajax Events

XMLHttpRequest object provides some predefined methods & properties to access the response data

  • It doesn't matter what backed language you are using to handle the request, the only thing matters is what you are sending from the server side
  • In response you can have either data or header(s) or both


Handling Response Data

We have multiple types of data format, most popular are plain-text, xml, json

For XML we have responseXML property
For others we have responseText property

xmldata.xml file used in below example
<ostype>
  <os>
    <title>Windows</title>
    <company>Microsoft</company>
  </os>
  <os>
    <title>Mojave</title>
    <company>Apple</company>
  </os>
</ostype>
Example - For xml data (using 'responseXML' property)
<!DOCTYPE html>
<html>
<body>
  <div id="text1"></div>
  <button onclick="fun()">Load (xmldata.xml)</button>
  
  <script>
    function fun() {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          // here, handle the server response
          var xmldata = this.responseXML;
          var x = xmldata.getElementsByTagName("title");
          var y = xmldata.getElementsByTagName("company");
          document.getElementById("text1").innerHTML =
            x[0].childNodes[0].nodeValue + " by " + y[0].childNodes[0].nodeValue + "<br>" +
            x[1].childNodes[0].nodeValue + " by " + y[1].childNodes[0].nodeValue;
        }
      };
      xhr.open("GET", "xmldata.xml", true);
      xhr.send();
    }
  </script>

</body>
</html>
OUTPUT:


ajax_demo.txt file used in below examples
<p>AJAX full form is Asynchronous JavaScript and XML</p>
<p className="abc">Hope You enjoy using AJAX</p>
Example - For other type of data (using 'responseText' property)
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    // here, handle the server response
    document.getElementById("text1").innerHTML = this.responseText;
  }
};
xhr.open("GET", "ajax_demo.txt", true);
xhr.send();
OUTPUT:
  • For JSON data you can use JSON.parse() method to handle


Handling Response Header(s)

You can only able to access the headers which are received from the server side

For specific response header we have 

getResponseHeader(headerName)

For all response headers we have 

getAllResponseHeaders()
Example - To getAllResponseHeaders
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    // here, handle the server response
    document.getElementById("text1").innerHTML = this.getAllResponseHeaders();
  }
};
xhr.open("GET", "ajax_demo.txt", true);
xhr.send();
Example - To getResponseHeader
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    // here, handle the server response
    document.getElementById("text1").innerHTML = this.getResponseHeader("Content-Length");
  }
};
xhr.open("GET", "ajax_demo.txt", true);
xhr.send();
Example - Use 'HEAD' method if you only need the headers
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    // here, handle the server response
    document.getElementById("text1").innerHTML = this.getResponseHeader("Content-Length");
  }
};
xhr.open("HEAD", "ajax_demo.txt", true);
xhr.send();


Handling Response URL

To get the URL, which is sending the response

Example - To get response url
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    // here, handle the server response
    document.getElementById("text1").innerHTML = this.responseURL;
  }
};
xhr.open("GET", "ajax_demo.txt", true);
xhr.send();

  • Ajax Events
❮ Prev Ajax Request
Next ❯Ajax Events
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯