AJAX with XML Example in PHP

AJAX with XML Example in PHP

AJAX (Asynchronous JavaScript and XML) allows a web page to send/receive data from the server without reloading.
In this tutorial, you’ll learn AJAX with XML using JavaScript + PHP step by step.

What is AJAX with XML?

AJAX sends an HTTP request to the server
Server responds with XML data
JavaScript parses XML and updates the page dynamically

Earlier, XML was very popular (now JSON is more common, but XML is still asked in interviews).

How AJAX with XML Works (Flow)

User triggers an event (click / keyup)
JavaScript sends AJAX request
PHP processes request
PHP returns XML
JavaScript reads XML and updates HTML

Example Scenario

User enters a student ID
AJAX sends ID to PHP
PHP returns student details in XML
Page updates without reload

HTML + JavaScript (AJAX Request)

`index.html`

<!DOCTYPE html>
<html>
<head>
<title>AJAX with XML (PHP)</title>
<script>
function getStudent() {
var id = document.getElementById("sid").value;

if (id == "") {
document.getElementById("result").innerHTML = "";
return;
}

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var xml = xhr.responseXML;

var name = xml.getElementsByTagName("name")[0].childNodes[0].nodeValue;
var marks = xml.getElementsByTagName("marks")[0].childNodes[0].nodeValue;

document.getElementById("result").innerHTML =
"Name: " + name + "<br>Marks: " + marks;
}
};

xhr.open("GET", "student.php?id=" + id, true);
xhr.send();
}
</script>
</head>

<body>
<h2>AJAX with XML Example</h2>

Enter Student ID:
<input type="text" id="sid" onkeyup="getStudent()">

<div id="result"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

function getStudent() {

var id = document.getElementById("sid").value;

if (id == "") {

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

return;

}

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

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

var xml = xhr.responseXML;

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

var marks = xml.getElementsByTagName("marks")[0].childNodes[0].nodeValue;

document.getElementById("result").innerHTML =

"Name: " + name + "<br>Marks: " + marks;

}

};

xhr.open("GET", "student.php?id=" + id, true);

xhr.send();

}

</script>

</head>

<body>

<h2>AJAX with XML Example</h2>

Enter Student ID:

</body>

</html>

PHP File (Returns XML)

`student.php`

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

$id = $_GET['id'];

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

if ($id == 1) {
echo "<name>Amit</name>";
echo "<marks>85</marks>";
} elseif ($id == 2) {
echo "<name>Ravi</name>";
echo "<marks>72</marks>";
} else {
echo "<name>Not Found</name>";
echo "<marks>NA</marks>";
}

echo "</student>";
?>

<?php

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

$id = $_GET['id'];

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

echo "<student>";

if ($id == 1) {

echo "<name>Amit</name>";

echo "<marks>85</marks>";

} elseif ($id == 2) {

echo "<name>Ravi</name>";

echo "<marks>72</marks>";

} else {

echo "<name>Not Found</name>";

echo "<marks>NA</marks>";

}

echo "</student>";

PHP sends XML response
Content-Type: text/xml is important

Sample XML Response

Key JavaScript XML Methods

AJAX with XML vs JSON (Interview)

Feature	XML	JSON
Readability	Low	High
Size	Larger	Smaller
Parsing	Slower	Faster
Popularity	Older	Modern

JSON is preferred today, but XML is still asked in interviews.

Common Mistakes

Forgetting Content-Type: text/xml
Using responseText instead of responseXML
Invalid XML format
Forgetting async (true) in open()

Interview Questions & MCQs (Very Important)

Q1. What does AJAX stand for?

A) Asynchronous Java and XML
B) Asynchronous JavaScript and XML
C) Advanced JavaScript and XML
D) Active Java XML

Answer: B

Q2. Which object is used for AJAX in JavaScript?

A) fetch
B) XMLHttpRequest
C) AjaxRequest
D) httpRequest

Answer: B

Q3. Which property reads XML response?

A) responseText
B) responseXML
C) response
D) xmlText

Answer: B

Q4. Which header is required for XML response?

A) text/html
B) application/json
C) text/xml
D) application/text

Answer: C

Q5. Which format is more popular today?

A) XML
B) JSON

Answer: B

Real-Life Use Cases

Legacy systems
SOAP web services
Old enterprise applications
Exam & interview questions

Summary

AJAX enables no-page-reload communication
XML was widely used with AJAX
PHP can easily generate XML
JavaScript parses XML using DOM
XML is slower but still interview-relevant

AJAX with XML Example in PHP