Ajax Xml File in XML
? Working with AJAX to Load an XML File (Using XML)
If you want to load an XML file from the server using AJAX and then process/display it on your webpage, here’s how you can do it step-by-step.
? What You’ll Need
An XML file stored on your server.
An HTML page with JavaScript that makes the AJAX request.
JavaScript code that processes the XML response.
? Sample XML File (books.xml)
<?xml version="1.0" encoding="UTF-8"?><library> <book> <title>Learning XML</title> <author>Erik T. Ray</author> </book> <book> <title>JavaScript: The Good Parts</title> <author>Douglas Crockford</author> </book></library>??? HTML + AJAX to Load the XML File
<!DOCTYPE html><html><head> <title>Load XML File with AJAX</title></head><body><h2>Book List from XML File</h2><button onclick="loadXML()">Load Books</button><div id="bookList"></div><script>function loadXML() { const xhttp = new XMLHttpRequest(); xhttp.onload = function() { // responseXML contains the parsed XML document const xmlDoc = this.responseXML; const books = xmlDoc.getElementsByTagName("book"); let html = "<ul>"; for (let i = 0; i < books.length; i++) { const title = books[i].getElementsByTagName("title")[0].textContent; const author = books[i].getElementsByTagName("author")[0].textContent; html += `<li><strong>${title}</strong> by ${author}</li>`; } html += "</ul>"; document.getElementById("bookList").innerHTML = html; }; xhttp.open("GET", "books.xml", true); xhttp.send();}</script></body></html>? How It Works
| Step | Description |
|---|---|
XMLHttpRequest() | Creates AJAX request object |
open("GET", "books.xml") | Prepares to fetch the XML file |
send() | Sends the request |
responseXML | The returned XML document, parsed automatically |
getElementsByTagName() | Selects XML nodes (like <book>) |
.textContent | Extracts text from XML elements |
?? Important Notes
Make sure
books.xmlis accessible from your web server path.XML file should be well-formed (valid XML).
Running this locally with just a file path (
file://) often causes CORS/security errors — use a local server or hosting environment.
Want to also see:
How to create and serve XML dynamically with PHP?
How to convert this XML data into JSON?
How to POST XML data via AJAX?
Just ask!
