Purpose:
In the first quick start[link], all we did was replace a div with plaintext content[if you noticed it,those html tags where internally treated as a plain string] from external html file.In this version, we will see how to receive xml response from server side script[PHP], and how to parse through the XML data in client side Javascript.
Scenario:
Depending on the variable passed, php file will generate an xml response. In this case, city name and population of a city in California is passed to PHP.The xml response from server is fetched into client through an Ajax call, which is then parsed to dig out city name and population values.
Explanation:
Everything is just the same as in first example except:
- Now we use responseXML instead of responseText, so that javascript handles the response as an XML Object instead of just a plain string
- Once xml response is recieved, its parsed through to extract data.
The example shows two most important tasks of an xml parser.Extract nodevalues, and attribute values.
<California>
<County population="50000">La Mirada</County>
</California>
Here La Mirada is the nodevalue of County tag
and 50000 is the population attribute of County tag
In the code, this is depicted by the following code:
docx.getElementsByTagName('County')[0].firstChild.nodeValue; -->shows how to extract the nodevalue
docx.getElementsByTagName('County')[0].getAttribute("population"); -->shows how to extract attribute value
The explanation of Ajax portion of example is same as that in the first Ajax Quick start example. Feel free to take a look at it.
You can download the companion file here.To see this in action, all you have to do is unzip the content into a folder in your server, enabled with PHP.
[On a lighter note, all aspects in this tutorial are not fully thought of!If you find something misleading, feel free to post it in the comments .]
Code follows: [or else just download the companion file]
client.html
<html>
<head>
<script>
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function requestContent(url) {
xmlhttp.open("GET",url,true);
xmlhttp.onreadystatechange =statusListener;
xmlhttp.send(null);
}
function statusListener() {
if (xmlhttp.readyState == 1) {
document.getElementById('content').innerHTML="loading..";
}
if (xmlhttp.readyState == 4) {
var docx=xmlhttp.responseXML;
document.getElementById('cityname').innerHTML=docx.getElementsByTagName('County')[0].firstChild.nodeValue;
document.getElementById('population').innerHTML=docx.getElementsByTagName('County')[0].getAttribute("population");
}
}
</script>
</head>
<body>
<a href='javascript:requestContent("citylist.php?city=La Mirada&population=50000");'>city 1</a> <a href='javascript:requestContent("citylist.php?city=Irwindale&population=2000");'>city 2</a>
<div id="cityname">City name</div>
<div id="population">Population</div>
</body>
</html>
citylist.php
<?php
$city=$_GET['city'];
$population=$_GET['population'];
header('Content-Type: text/xml');
$return_value ='<California><County population="'.$population.'">'.$city.'</County></California>';
echo $return_value;
die();
?>
No comments:
Post a Comment