AJAX ResponseXML Example
responseText returns the HTTP response as a string.
responseXML returns the response as XML.
AJAX ResponseXML example
The ResponseXML property returns an XML document object, which can be examined and parsed using
the DOM.
The following example will demonstrate how a web page can fetch information from a database with AJAX technology. The selected data from the
database will this time be converted to an XML document, and then we will use the DOM to extract the values to be displayed.
AJAX example explained
The example above contains an HTML form, several <span> elements to hold the
returned data, and a link to a JavaScript:
<html>
<head>
<script src="selectcustomer_xml.js"></script>
</head>
<body>
<form action="">
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<b><span id="companyname"></span></b><br />
<span id="contactname"></span><br />
<span id="address"></span>
<span id="city"></span><br/>
<span id="country"></span>
</body>
</html> |
The example above contains an HTML form with a drop-down box called "customers".
When the user selects a customer in the drop-down box, a function called "showCustomer()" is executed. The
execution of the function is triggered by the "onchange" event. In other words:
Each time the user change the value in the drop down box, the function showCustomer() is called.
The AJAX JavaScript
This is the JavaScript code stored in the file "selectcustomer_xml.js":
var xmlhttp
function showCustomer(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="getcustomer_xml.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
var xmlDoc=xmlhttp.responseXML.documentElement;
document.getElementById("companyname").innerHTML=
xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;
document.getElementById("contactname").innerHTML=
xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;
document.getElementById("address").innerHTML=
xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;
document.getElementById("city").innerHTML=
xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
document.getElementById("country").innerHTML=
xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
} |
The showCustomer() and GetXmlHttpObject() functions above are the same as in
previous chapters. The stateChanged() function is also used earlier in this
tutorial, however; this time we return the result as an XML document (with
responseXML) and uses the DOM to
extract the values we want to be displayed.
The AJAX server pageThe server page called by the JavaScript, is an ASP file called
"getcustomer_xml.asp". The page is written in VBScript for an Internet Information Server (IIS). It
could easily be rewritten in PHP, or some other server language.
Look at a corresponding example in PHP. The code runs a query against a database and returns the result as an XML document:
<%
response.expires=-1
response.contenttype="text/xml"
sql="SELECT * FROM CUSTOMERS "
sql=sql & " WHERE CUSTOMERID='" & request.querystring("q") & "'"
on error resume next
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql, conn
if err <> 0 then
response.write(err.description)
set rs=nothing
set conn=nothing
else
response.write("<?xml version='1.0' encoding='ISO-8859-1'?>")
response.write("<company>")
response.write("<compname>" &rs.fields("companyname")& "</compname>")
response.write("<contname>" &rs.fields("contactname")& "</contname>")
response.write("<address>" &rs.fields("address")& "</address>")
response.write("<city>" &rs.fields("city")& "</city>")
response.write("<country>" &rs.fields("country")& "</country>")
response.write("</company>")
end if
on error goto 0
%> | Notice the second line in the ASP code above: response.contenttype="text/xml".
The ContentType property sets the HTTP content type for the response object. The
default value for this property is "text/html". This time we want the content
type to be XML. Then we select data from the database, and builds an XML document with the data.
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 3500 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
