AJAX and XML
We can use AJAX to request data from a XML file. Let's see how to do
it.
Create a page named "display.html". The functions are almost
the same:
<html>
<head>
<script type="text/javascript" language="javascript">
<!--
function requestHttp(url,posTag){//posTag for where to show the message
var httpRequest;
if(window.XMLHttpRequest){// Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
if(httpRequest.overrideMimeType){
httpRequest.overrideMimeType('text/xml');
}
}else if(window.ActiveXObject){ // IE
try{
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
getFile(httpRequest,url,posTag);
}
function getFile(httpRequest,url,posTag){
if(!httpRequest){
alert('Error - Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = function(){
showContents(httpRequest,posTag);//function display contents
}
//httpRequest.open('GET', url, true);
//httpRequest.send('');
//send data to server
var pid = document.getElementById('pid').value;
qst="?q="+pid+"&sid="+Math.random();//this line
to avoid catch data
//-----get method start
httpRequest.open("GET", url + qst, true);
httpRequest.send('');
//-----get method end
}
function showContents(httpRequest,posTag){
if(httpRequest.readyState == 4){
if(httpRequest.status == 200){
//alert(httpRequest.responseText);
document.all(posTag).innerHTML=httpRequest.responseText;
}else{
alert('Error');
}
}
}
//-->
</script>
</head>
<body>
<form>
Select a product:
<select id="pid" name="pid" onchange="requestHttp('getXML.php','message');">
<option value="1001">1001</option>
<option value="1002">1002</option>
<option value="1003">1003</option>
</select>
</form>
<div id="message"></div>
</body>
</html>
We use a form object Select List, with a "onchange" handler
to trigger an AJAX function. Please note, you must use
id="pid"
as the form element id, otherwise, it will not work on Firefox browser.
The next page is "getXML.php". When the user selects the item
from the list, the request will be sent to the server. On the server,
"getXML.php" receives the request, and searches into the XML
file. If the record in the file matches the submitted request, then the
script sends the information back to the user.
Here is the source code:
<?php
$q=$_GET["q"];
$tagname="ProductID";
$xmlfile="product.xml";
$xmlDoc = new DOMDocument();
$xmlDoc->load($xmlfile);
$x=$xmlDoc->getElementsByTagName($tagname);
//find product record according to query
for ($i=0; $i<=$x->length-1; $i++){
if ($x->item($i)->nodeType==1){
if ($x->item($i)->childNodes->item(0)->nodeValue == $q){
$y=($x->item($i)->parentNode);
}
}
}
$product=($y->childNodes);
//display requsted record
for ($i=0;$i<$product->length;$i++){
if ($product->item($i)->nodeType==1){
echo '<b>' . ($product->item($i)->nodeName) . ":</b>
";
echo($product->item($i)->childNodes->item(0)->nodeValue)
. "<br />";
}
}
?>
We will need the third page "product.xml":
<?xml version="1.0" encoding="ISO-8859-1"?>
<Items>
<Item>
<ProductName>Garmin Mobile PC From GARMIN USA</ProductName>
<ProductID>1001</ProductID>
<Description>Garmin Mobile PC, navigation for your laptop or UMPC.
Package includes: Garmins renowned navigation software with City Navigator
North Americ NT on DVD, quick start manual.</Description>
<link>http://www.selectagps.com/Garmin-Mobile-PC-d_B00128JAFK.html</link>
<Price>47.92</Price>
</Item>
<Item>
<ProductName>Garmin nuvi 660 4.3-Inch Widescreen Bluetooth Portable
GPS Navigator
From Garmin</ProductName>
<ProductID>1002</ProductID>
<Description>See more and explore with nuvi 660. This widescreen
travel companion and navigator features preloaded maps, hands-free calling,
traffic alerts, FM transmitter and more. Like the rest of the wide nuvi
600-series, its large touchscreen display puts the world at your fingertips.</Description>
<link>http://www.selectagps.com/Garmin-n-vi-660-43-Inch-d_B000H49LXQ.html</link>
<Price>299.99</Price>
</Item>
<Item>
<ProductName>Canon PowerShot SD850 IS 8.0 MP Digital Elph Camera
with 4x Optical Image Stabilized Zoom From Canon</ProductName>
<ProductID>1003</ProductID>
<Description>The PowerShot SD850 IS Digital Elph is a digital
camera that will really get your creative juices flowing. It starts
with a high-resolution 8-megapixel CCD, a 4x Optical Zoom with Canon's
exclusive UA Lens, and an Optical Image Stabilizer for steady zooming.
There's also a DIGIC III Image Processor with Face Detection and red-eye
correction, an ISO 1600 Setting for sharper images in low light, 5 Movie
Modes and a 2.5-inch PureColor LCD with scratch-resistant, anti-reflective
coating for easy viewing.</Description>
<link>http://www.ishopsale.com/Canon-PowerShot-SD850-IS-80-d_B000Q30420.html</link>
<Price>219.94</Price>
</Item>
</Items>
The script getXML.php reads data from product.xml, then sends the data
back to the display.html and display it inside the tags:
<div id="message">[contents from getXML.php will be
displayed here]</div>
Very simple, isn't it?
|
Earn your 
Go to