Tutorials – Ajax

In the previous chapters, we discussed the fundamentals of Ajax and making asynchronous requests using technologies like XMLHttpRequest and the Fetch API. In this chapter, we will explore one of the most common data formats used in Ajax communication: XML (Extensible Markup Language). We’ll learn how to send and receive XML data in Ajax requests, and we’ll delve into parsing and manipulating XML to update web content dynamically.

Understanding XML

XML, short for Extensible Markup Language, is a versatile and widely used data format. It’s a text-based format that is both human-readable and machine-readable, making it suitable for transmitting structured data. XML is often used to represent hierarchical and structured information, such as configuration files, data interchange, and more.

XML consists of elements enclosed in tags, much like HTML, but it allows you to define your own tags, making it “extensible.” Each XML document should have a single root element that encloses all other elements. Here’s a simple example of an XML document:

<bookstore>
  <book>
    <title>Harry Potter and the Sorcerer's Stone</title>
    <author>J.K. Rowling</author>
    <price>12.99</price>
  </book>
  <book>
    <title>The Great Gatsby</title>
    <author>F. Scott Fitzgerald</author>
    <price>9.99</price>
  </book>
</bookstore>

In this example, <bookstore> is the root element, and it contains two <book> elements, each with nested elements for title, author, and price.

Sending XML with Ajax

When working with XML in Ajax, you can send an XML document as the request payload. You can use XMLHttpRequest or the Fetch API to achieve this. Let’s explore how to send XML data using both methods.

Using XMLHttpRequest

To send XML data with XMLHttpRequest, you need to create an XML string and set the appropriate content type header:

var xhr = new XMLHttpRequest();
// Create an XML string
var xmlString = '<bookstore><book><title>JavaScript: The Good Parts</title><author>Douglas Crockford</author><price>19.99</price></book></bookstore>';
xhr.open('POST', 'https://api.example.com/books', true);
xhr.setRequestHeader('Content-Type', 'application/xml;charset=UTF-8');
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    // Request was successful
    var responseXML = xhr.responseXML; // Parsed XML response
    // Process and update the web page with responseXML
  } else {
    // Handle error
    console.error('Request failed with status: ' + xhr.status);
  }
};
xhr.send(xmlString);

In this example, we create an XML string and set the content type header to indicate that we’re sending XML data. When the response is received, we parse it using xhr.responseXML.

Using the Fetch API

The Fetch API offers a simpler way to send XML data. You can create a new Blob object with the XML data and specify the content type in the headers option:

var xmlString = '<bookstore><book><title>JavaScript: The Good Parts</title><author>Douglas Crockford</author><price>19.99</price></book></bookstore>';
var xmlBlob = new Blob([xmlString], { type: 'application/xml' });
fetch('https://api.example.com/books', {
  method: 'POST',
  body: xmlBlob,
})
  .then(function (response) {
    if (!response.ok) {
      throw new Error('Request failed with status: ' + response.status);
    }
    return response.text(); // Parsing the response as text
  })
  .then(function (data) {
    // Process and update the web page with data
  })
  .catch(function (error) {
    console.error(error);
  });

In this example, we create a Blob containing the XML data and specify the content type in the headers option.

Receiving and Parsing XML

Once you’ve sent an XML request and received a response, you need to parse the XML to extract and manipulate the data. Both XMLHttpRequest and the Fetch API provide methods for this purpose.

Using XMLHttpRequest

With XMLHttpRequest, you can access the response as an XML document using the responseXML property. Here’s how to do it:

xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    var responseXML = xhr.responseXML; // Parsed XML response
    var titles = responseXML.querySelectorAll('title'); // Select all <title> elements
    // Process and update the web page with titles
  } else {
    console.error('Request failed with status: ' + xhr.status);
  }
};

In this example, we use responseXML to access the XML response, and then we can use standard DOM methods to navigate and manipulate the XML data.

Using the Fetch API

When using the Fetch API, you can parse the XML response using the response.text() method and then convert it to an XML document using the DOMParser:

fetch('https://api.example.com/books')
  .then(function (response) {
    if (!response.ok) {
      throw new Error('Request failed with status: ' + response.status);
    }
    return response.text(); // Parsing the response as text
  })
  .then(function (data) {
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(data, 'application/xml');
    var titles = xmlDoc.querySelectorAll('title'); // Select all <title> elements
    // Process and update the web page with titles
  })
  .catch(function (error) {
    console.error(error);
  });

In this example, we parse the response as text and then use the DOMParser to convert it to an XML document.

Updating the Web Page with XML Data

Once you’ve extracted data from the XML response, you can use JavaScript to update the web page’s content. Here’s a simple example of how to display book titles:

var titles = responseXML.querySelectorAll('title');
var titleList = document.getElementById('book-titles');
titles.forEach(function (title) {
  var li = document.createElement('li');
  li.textContent = title.textContent;
  titleList.appendChild(li);
});

In this example, we select all <title> elements in the XML and create list items (<li>) for each one, adding them to an unordered list (<ul>) with the id “book-titles” on the web page.

Challenges of Working with XML

While XML is a powerful and versatile data format, it has some drawbacks. XML can be verbose, leading to larger payload sizes and slower transmission over networks. JSON has become a more popular data format due to its simplicity and efficiency. Therefore, when possible, consider using JSON for data interchange in Ajax applications. However, in cases where you need to work with XML, the techniques discussed in this chapter are valuable.

Conclusion

In this chapter, we explored working with XML in the context of Ajax. You learned how to send XML data in Ajax requests using both XMLHttpRequest and the Fetch API. We also covered parsing XML responses and updating web content based on the data extracted from the XML. Understanding these concepts is essential for web developers who need to work with XML data in their Ajax applications.

In the next chapter, we’ll continue our journey through Ajax and explore more advanced topics, such as error handling, JSON, and third-party APIs.