AJAX with XML Example in PHP

🌐 AJAX with XML Example in PHP

AJAX can also work with XML data instead of JSON. In this example, we’ll fetch XML from PHP and parse it in JavaScript to dynamically update the webpage.

1️⃣ XML Data (`users.xml`)

2️⃣ PHP Script to Serve XML (`fetch_xml.php`)

<?php
header("Content-Type: text/xml");

echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<users>';
echo '<user><id>1</id><name>Vipul</name><email>vipul@example.com</email></user>';
echo '<user><id>2</id><name>Amit</name><email>amit@example.com</email></user>';
echo '</users>';
?>

<?php

header("Content-Type: text/xml");

echo '<?xml version="1.0" encoding="UTF-8"?>';

echo '<users>';

echo '<user><id>1</id><name>Vipul</name><email>vipul@example.com</email></user>';

echo '<user><id>2</id><name>Amit</name><email>amit@example.com</email></user>';

echo '</users>';

✅ This PHP script generates XML content dynamically.

3️⃣ HTML + JavaScript to Fetch and Parse XML

<!DOCTYPE html>
<html>
<head>
<title>AJAX XML Example</title>
<script>
function loadXMLData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var xmlDoc = this.responseXML;
var users = xmlDoc.getElementsByTagName("user");
var html = "<ul>";
for (var i = 0; i < users.length; i++) {
var id = users[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;
var name = users[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
var email = users[i].getElementsByTagName("email")[0].childNodes[0].nodeValue;
html += "<li>ID: " + id + " | Name: " + name + " | Email: " + email + "</li>";
}
html += "</ul>";
document.getElementById("result").innerHTML = html;
}
};
xhttp.open("GET", "fetch_xml.php", true);
xhttp.send();
}
</script>
</head>
<body>
<h2>AJAX XML Example</h2>
<button onclick="loadXMLData()">Load Users</button>
<div id="result"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>AJAX XML Example</title>

function loadXMLData() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

var xmlDoc = this.responseXML;

var users = xmlDoc.getElementsByTagName("user");

var html = "<ul>";

for (var i = 0; i < users.length; i++) {

var id = users[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;

var name = users[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;

var email = users[i].getElementsByTagName("email")[0].childNodes[0].nodeValue;

html += "<li>ID: " + id + " | Name: " + name + " | Email: " + email + "</li>";

}

html += "</ul>";

document.getElementById("result").innerHTML = html;

}

};

xhttp.open("GET", "fetch_xml.php", true);

xhttp.send();

}

</script>

</head>

<body>

<h2>AJAX XML Example</h2>

<button onclick="loadXMLData()">Load Users</button>

</body>

</html>

✅ The responseXML property of XMLHttpRequest automatically parses XML into a DOM object.

4️⃣ Key Points

Set Content-Type: text/xml in PHP when returning XML.
Use responseXML in JavaScript to parse XML automatically.
Access nodes with getElementsByTagName() and .childNodes[0].nodeValue.
Useful for legacy systems or APIs that return XML instead of JSON.
Can be combined with PHP to dynamically generate XML from a database.

AJAX with XML Example in PHP