XML - Introduction to XML and AJAX

What is AJAX?

AJAX stands for Asynchronous JavaScript and XML.
It is a technique used in web development to send and receive data asynchronously from a server without reloading the entire web page.

 Role of XML in AJAX

Originally, XML was the primary data format used in AJAX communications—hence the name. Although formats like JSON are more common today, XML is still supported and used in many systems.

How AJAX Works with XML

  1. Browser sends a request using JavaScript (XMLHttpRequest or fetch).

  2. Server processes the request and sends back XML data.

  3. JavaScript receives and parses the XML.

  4. The webpage is updated dynamically using the data — without a page reload.

Example Flow:

let xhr = new XMLHttpRequest();
xhr.open("GET", "data.xml", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let xmlDoc = xhr.responseXML;
    let items = xmlDoc.getElementsByTagName("item");
    // Process XML and update the page
  }
};
xhr.send();

 Example XML Response (data.xml):

<items>
  <item>
    <name>Book</name>
    <price>25</price>
  </item>
  <item>
    <name>Pen</name>
    <price>5</price>
  </item>
</items>

 Benefits of AJAX with XML:

  • Faster user experience (no full page reloads)

  • Structured data handling using XML

  • Real-time updates on web pages