Ajax Examples in XML
? AJAX Examples Using XML
Here are multiple examples that show how AJAX works with XML to load and display dynamic content without refreshing the page. These examples use pure HTML, JavaScript, and optionally Classic ASP or PHP to serve XML.
? Example 1: Load XML Data from a Static File
? data.xml
<employees> <employee> <name>Vikash Gupta</name> <position>Developer</position> </employee> <employee> <name>Ravi Kumar</name> <position>Designer</position> </employee></employees>? index.html
<!DOCTYPE html><html><head> <title>AJAX XML Example 1</title></head><body><h2>Employee List (from XML)</h2><div id="output"></div><script>function loadXML() { const xhttp = new XMLHttpRequest(); xhttp.onload = function () { const xmlDoc = this.responseXML; const employees = xmlDoc.getElementsByTagName("employee"); let output = "<ul>"; for (let i = 0; i < employees.length; i++) { const name = employees[i].getElementsByTagName("name")[0].textContent; const position = employees[i].getElementsByTagName("position")[0].textContent; output += `<li>${name} - ${position}</li>`; } output += "</ul>"; document.getElementById("output").innerHTML = output; }; xhttp.open("GET", "data.xml", true); xhttp.send();}window.onload = loadXML;</script></body></html>? Example 2: Load XML From Server-Side Script (Classic ASP)
? data.asp
<%Response.ContentType = "text/xml"Response.Write("<?xml version='1.0' encoding='UTF-8'?>")Response.Write("<students>")Response.Write("<student><name>John</name><grade>A</grade></student>")Response.Write("<student><name>Lisa</name><grade>B</grade></student>")Response.Write("</students>")%>? index.html (AJAX)
<!DOCTYPE html><html><head> <title>AJAX XML Example 2</title></head><body><h2>Student Grades (from ASP)</h2><div id="output"></div><script>function loadXML() { const xhttp = new XMLHttpRequest(); xhttp.onload = function () { const xmlDoc = this.responseXML; const students = xmlDoc.getElementsByTagName("student"); let output = "<ol>"; for (let i = 0; i < students.length; i++) { const name = students[i].getElementsByTagName("name")[0].textContent; const grade = students[i].getElementsByTagName("grade")[0].textContent; output += `<li>${name} - Grade: ${grade}</li>`; } output += "</ol>"; document.getElementById("output").innerHTML = output; }; xhttp.open("GET", "data.asp", true); xhttp.send();}window.onload = loadXML;</script></body></html>? Example 3: Use Button to Load XML on Click
<!DOCTYPE html><html><head> <title>AJAX XML Example 3</title></head><body><h2>Load Book List</h2><button onclick="loadBooks()">Load Books</button><div id="books"></div><script>function loadBooks() { const xhttp = new XMLHttpRequest(); xhttp.onload = function () { const xmlDoc = this.responseXML; const books = xmlDoc.getElementsByTagName("book"); let output = "<table border='1'><tr><th>Title</th><th>Author</th></tr>"; for (let i = 0; i < books.length; i++) { const title = books[i].getElementsByTagName("title")[0].textContent; const author = books[i].getElementsByTagName("author")[0].textContent; output += `<tr><td>${title}</td><td>${author}</td></tr>`; } output += "</table>"; document.getElementById("books").innerHTML = output; }; xhttp.open("GET", "books.xml", true); xhttp.send();}</script></body></html>? Sample books.xml:
<books> <book> <title>XML Guide</title> <author>Jane Doe</author> </book> <book> <title>AJAX Essentials</title> <author>John Smith</author> </book></books>? Summary of Techniques
| Feature | Used in Examples |
|---|---|
| Static XML | Example 1 |
| Server-Generated XML (ASP) | Example 2 |
| Event-Based AJAX | Example 3 |
Would you like to:
Post data using AJAX and get XML response?
Store the XML in a database using ASP?
Convert XML to JSON on the client side?
Let me know your next step!
