Introduction
This article explains how to obtain XML using XMLHttpRequest then parse the plain text and specific values using PHP. I will use a JavaScript function to take the XML data that was returned by the Ajax call using "xhr.ResponseXML" and parse it for the name tag element values.
Example
This is your "pets.xml" file:
<animals>
<dog>
<dog>
<animalname>Puppy</animalname>
<color>white</color>
<breed>simple</breed>
</dog>
<dog>
<animalname>Tomy</animalname>
<color>red</color>
<breed>lab</breed>
</dog>
</dog>
<cat>
<cat>
<animalname>Sheru</animalname>
<color>black</color>
<breed>lab</breed>
</cat>
</cat>
</animals>
This your "dog.php" file that retrieves the contents of the "pets.xml" file with an XMLHttpRequest and displays it as plain text. The script only retrieves an XML element value; name attributes are discarded.
<html>
<head>
<title>ajax grabbed plain text</title>
<style type="text/css">
#content{
border: 1px solid black;
width: 250px;
background-color:#FFCCCC;
padding: 10px;
}
</style>
</head>
<body>
<p><strong>ajax grabbed with plain text</strong></p>
<div id="content"> </div>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open("GET", "pets.xml", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var message = "";
if (xhr.status == 200) {
message = "<pre>" + xhr.responseText + "</pre>";
}
else {
message = "Error has been occured";
}
document.getElementById("content").innerHTML = message;
}
}
xhr.send(null);
</script>
</body>
</html>
Output
![cal.jpg]()
Example
The following grabs XML with XMLHttpRequest and parses for specific values using PHP.
<html>
<head>
<title>ajax grabbed specific XML</title>
<style type="text/css">
#content{
border: 1px solid black;
width: 250px;
background-color:#FFCCCC;
padding: 10px;
}
</style>
</head>
<body>
<p><strong>ajax grabbed specific XML</strong></p>
<div id="content"> </div>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open("GET", "pets.xml", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var message = "Hi..";
if (xhr.status == 200) {
var xml_data = xhr.responseXML
var names = xml_data.getElementsByTagName("animalname");
for (i = 0; i < names.length; ++i) {
message += names[i].firstChild.nodeValue + "<br/>";
}
}
else {
message = "Error has been occured";
}
document.getElementById("content").innerHTML = message;
}
}
xhr.send(null);
</script>
</body>
</html>
Output
![cal1.jpg]()