What is the server response in AJAX and why we are uses this property?

Asked 19-Aug-2021
Viewed 450 times

1 Answer


0

To get a response from a server, use the XMLHttpRequest object's ResponseText and ResponseXML.
There are two types of server responses in Ajax.
responseText Property
If the Response XML is not received from the server, then use the responseText property. The responseText property returns a String as a Response and you can use it accordingly.
responseXML Property
If the Response from the Server is XML and you want to parse it as an XML Object using the parseXML(), then use the Response XML Properties.

Example 
<!doctype html>

<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- Bootstrap CSS -->
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <title>Ajax Example</title>
</head>
<body>
    <div class='container'>
        <h1 class='text-center'>Ajax Example </h1>
        <button type='button' onclick='loadResponseText()' class='btn btn-primary my-3'>Click me for load the responseText</button>
        <button type='button' onclick='loadResponseXML()' class='btn btn-primary my-3'>Click me for load the responseXML</button>
        <h1 class='text-danger'>responseText data</h1>
        <p id='loadAjaxInText'>call ajax without reload the page</p>
        <h1 class='text-danger'>responseXML data</h1>
        <p id='loadAjaxInXML'>call ajax without reload the page</p>
    </div>
    <script>
        function loadResponseText() {
            // creating instance of XMLHttpRequest()
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    // call responseXML
                    document.getElementById('loadAjaxInText').innerHTML = this.responseText;
                }
            };
            xhttp.open('GET', 'ajademo.txt', true);
            xhttp.send();
        }
        function loadResponseXML() {
            // creating instance of XMLHttpRequest()
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    // call responseXML
                    var xmlDoc = xhttp.responseXML;
                    var x = xmlDoc.getElementsByTagName('BOOK');
                    var txt = 'Book \'TITLE\' List here : <br>';
                    for (var i = 0 ; i < x.length ; i++) {
                        var item = x[i].getElementsByTagName('TITLE')[0].childNodes[0].nodeValue + '<br>';
                        txt += '<b>'+item+'</b>';
                    }
                    document.getElementById('loadAjaxInXML').innerHTML = txt;
                }
            };
            xhttp.open('GET', 'xmlfile.xml', true);
            xhttp.send();
        }
    </script>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
</body>
</html>

ajademo.txt

<h1>AJAX</h1>

<p>AJAX is not a programming language.</p>
<p>AJAX is a technique for accessing web servers from a web page.</p>
<p>AJAX stands for Asynchronous JavaScript And XML.</p>

xmlfile.xml

<?xml version='1.0' encoding='UTF-8'?>

<CATALOG>
   <BOOK>
      <author>Gambardella, Matthew</author>
      <TITLE>XML Developer's Guide</TITLE>
      <genre>Computer</genre>
      <price>44.95</price>
      <publish_date>2000-10-01</publish_date>
      <description>An in-depth look at creating applications
      with XML.</description>
   </BOOK>
   <BOOK>
      <author>Ralls, Kim</author>
      <TITLE>Midnight Rain</TITLE>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2000-12-16</publish_date>
      <description>A former architect battles corporate zombies,
      an evil sorceress, and her own childhood to become queen
      of the world.</description>
   </BOOK>
   <BOOK>
      <author>Corets, Eva</author>
      <TITLE>Maeve Ascendant</TITLE>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2000-11-17</publish_date>
      <description>After the collapse of a nanotechnology
      society in England, the young survivors lay the
      foundation for a new society.</description>
   </BOOK>
   <BOOK>
      <author>Corets, Eva</author>
      <TITLE>Oberon's Legacy</TITLE>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2001-03-10</publish_date>
      <description>In post-apocalypse England, the mysterious
      agent known only as Oberon helps to create a new life
      for the inhabitants of London. Sequel to Maeve
      Ascendant.</description>
   </BOOK>
   <BOOK>
      <author>Corets, Eva</author>
      <TITLE>The Sundered Grail</TITLE>
      <genre>Fantasy</genre>
      <price>5.95</price>
      <publish_date>2001-09-10</publish_date>
      <description>The two daughters of Maeve, half-sisters,
      battle one another for control of England. Sequel to
      Oberon's Legacy.</description>
   </BOOK>
</CATALOG>


Output

What is the server response in AJAX and why we are uses this property?