AJAX - AJAX Response Parsing with responseXML?

AJAX Response Parsing with responseXML refers to the process of receiving XML data from a server through an AJAX request and accessing that XML data as a DOM document in JavaScript. The responseXML property is available in the XMLHttpRequest object and is particularly useful when the server sends XML instead of JSON or plain text. Once the XML response is successfully received, JavaScript can navigate through its elements and extract the required information without reloading the entire webpage.

How responseXML Works

When an AJAX request is sent using XMLHttpRequest, the browser communicates with the server asynchronously. If the server processes the request and returns an XML document with an appropriate XML content type, the browser parses the response into an XML DOM structure. JavaScript can then access this structure through the responseXML property.

For example, a server might return the following XML:

<students>
    <student>
        <name>Rahul</name>
        <course>Computer Science</course>
    </student>
    <student>
        <name>Anita</name>
        <course>Information Technology</course>
    </student>
</students>

JavaScript can retrieve this XML using responseXML and navigate through elements such as student, name, and course. Unlike responseText, which returns the server response as a plain string, responseXML provides a parsed document that can be accessed using DOM methods.

Basic Example

var xhr = new XMLHttpRequest();

xhr.open("GET", "students.xml", true);

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var xmlDocument = xhr.responseXML;

        var students = xmlDocument.getElementsByTagName("student");

        for (var i = 0; i < students.length; i++) {
            var name = students[i]
                .getElementsByTagName("name")[0]
                .textContent;

            var course = students[i]
                .getElementsByTagName("course")[0]
                .textContent;

            console.log(name + " - " + course);
        }
    }
};

xhr.send();

Here, xhr.open() establishes a GET request for the XML file. After the request completes successfully, xhr.responseXML provides access to the parsed XML document. getElementsByTagName() is then used to locate the required XML elements, while textContent extracts the text stored inside those elements.

responseXML and responseText

The main difference between responseXML and responseText is how the response is represented.

responseText returns the response as a string:

var data = xhr.responseText;

If the server sends XML, the application would have to process that string separately if it wants to work with the XML structure.

With responseXML:

var data = xhr.responseXML;

the browser provides the response as an XML document. This makes it possible to use DOM methods to access individual XML elements and attributes.

For example:

var names = xhr.responseXML.getElementsByTagName("name");

This directly locates the name elements within the XML document.

Accessing XML Elements

After obtaining the XML document, standard DOM methods can be used to navigate its structure.

For example:

var xml = xhr.responseXML;

var students = xml.getElementsByTagName("student");

console.log(students.length);

The getElementsByTagName() method returns a collection of matching elements.

Individual elements can then be accessed using their position:

var firstStudent = students[0];

var studentName = firstStudent
    .getElementsByTagName("name")[0]
    .textContent;

console.log(studentName);

This approach is useful when an XML response contains multiple records that need to be processed dynamically.

Reading XML Attributes

XML elements can also contain attributes. Consider this XML:

<students>
    <student id="101">
        <name>Rahul</name>
    </student>
    <student id="102">
        <name>Anita</name>
    </student>
</students>

The getAttribute() method can be used to retrieve an attribute:

var students = xhr.responseXML.getElementsByTagName("student");

var id = students[0].getAttribute("id");

console.log(id);

This returns:

101

Attributes can provide additional information about an XML element without becoming separate child elements.

Checking Whether an XML Response Exists

It is important to check whether the browser successfully created an XML document before attempting to access it.

if (xhr.responseXML) {
    var xml = xhr.responseXML;
    console.log("XML response received");
}

If the server response is not valid XML, or the response is not recognized as XML, responseXML may be null. Therefore, applications should not blindly assume that an XML document is always available.

Importance of the Content Type

The server should identify the response correctly using an appropriate MIME type, commonly:

application/xml

or:

text/xml

Correct content-type information helps the browser determine how the response should be interpreted.

For example, a server response may include:

Content-Type: application/xml

If the server incorrectly identifies an XML response as another type, browser behavior can differ, and responseXML may not contain the expected document.

Processing XML After an AJAX Request

The typical sequence for using responseXML is:

  1. Create an XMLHttpRequest object.

  2. Configure the AJAX request.

  3. Send the request to the server.

  4. Wait for the request to complete.

  5. Check the HTTP status.

  6. Access xhr.responseXML.

  7. Locate the required XML elements.

  8. Extract element text or attributes.

  9. Use the extracted information to update the webpage.

This allows a webpage to retrieve structured information from a server and display only the required portion of the data.

Example of Updating a Webpage

Suppose the XML contains product information:

<products>
    <product>
        <name>Laptop</name>
        <price>55000</price>
    </product>
    <product>
        <name>Tablet</name>
        <price>25000</price>
    </product>
</products>

JavaScript can process the response and display it on the webpage:

var xhr = new XMLHttpRequest();

xhr.open("GET", "products.xml", true);

xhr.onload = function() {
    if (xhr.status === 200 && xhr.responseXML) {
        var products = xhr.responseXML.getElementsByTagName("product");
        var output = "";

        for (var i = 0; i < products.length; i++) {
            var name = products[i]
                .getElementsByTagName("name")[0]
                .textContent;

            var price = products[i]
                .getElementsByTagName("price")[0]
                .textContent;

            output += "<p>" + name + " - ₹" + price + "</p>";
        }

        document.getElementById("products").innerHTML = output;
    }
};

xhr.send();

In this example, the complete webpage does not need to be refreshed. The AJAX request retrieves the XML data, JavaScript parses the document through responseXML, and the required product information is inserted into the existing webpage.

Advantages of responseXML

responseXML is useful when working with systems that naturally produce XML data. It provides structured access to XML documents and allows developers to use familiar DOM methods to navigate the response. It can also be useful when integrating with older enterprise systems, legacy web services, RSS or Atom-style feeds, and applications where XML remains the required data format.

Another advantage is that developers do not need to manually split or interpret an XML response as a plain string. The browser provides a parsed document that can be traversed using DOM APIs.

Limitations of responseXML

Despite its usefulness, responseXML is less common in modern web applications than JSON-based responses. XML documents can also be more verbose than JSON, resulting in larger responses for some types of data. Developers must additionally handle cases where the XML is malformed or the server returns an unexpected response.

For modern applications, JSON is frequently preferred because JavaScript can easily convert JSON strings into JavaScript objects using JSON.parse(). However, responseXML remains important when an AJAX application communicates with an XML-based server or legacy system.

Conclusion

AJAX responseXML provides a way to work directly with XML data returned by a server. Instead of treating the response as an ordinary string, the browser exposes it as an XML document that JavaScript can navigate using DOM methods. Developers can retrieve elements, read text values, access attributes, and use the extracted information to update specific parts of a webpage. Although JSON is more common in modern AJAX applications, understanding responseXML remains valuable for XML-based APIs, legacy applications, feeds, and systems that continue to use XML for data exchange.