AJAX ResponseXML Example
While responseText returns the HTTP response as a string,
responseXML returns the response as XML.
The ResponseXML property returns an XML document object, which
can be examined and parsed using W3C DOM node tree methods and properties.
AJAX ResponseXML Example
In the following AJAX example we will demonstrate how a web page can fetch
information from a database using 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.
Select a Name in the Box Below
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 dropdown 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 JavaScript code is listed below.
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()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
|
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 Page
The server page called by the JavaScript, is a simple 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 an SQL 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.
The Ektron Intranet
lets you do everything you need to do on your corporate intranet and everything you want to do... all with just one application.
What can you do with the Ektron Intranet? |
|
Navigate through content, documents, assets, colleagues and workgroups quickly and intuitively with enterprise search |
|
Communicate with friends and colleagues with forums, message boards and corporate blogging using the new Social Networking Platform |
|
Promote collaboration among coworkers in your organization through project workspaces where others can efficiently find information and work together |
|
Personalize your company profile by bookmarking and organizing favorite content, uploading assets, posting photos, blogging, and more |
|
Interact with features like tagging, flagging, wikis and ratings found in the Web 2.0 Toolbox |
 |
Author/edit content, manage navigation, menus, audit trails, workflow and approvals with the best in breed Content Management |
|
|
|
|
See why there are 20,000+ Ektron integrations worldwide.
Request an
INSTANT DEMO or download a
FREE TRIAL today. |
|
HOME
Printer friendly page
