❑ The AJAX JavaScript
❑ The AJAX Server Page
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 the DOM (Document Object Model).
See Appendix B for a complete listing of the HTML DOM Objects.
The example in Figure 35.1 demonstrates 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.
The preceding example 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 preceding example 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 changes 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();
(continued)
Learn Javascript and ajax with w3schools
200
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].node-Value;
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 are the same as in
previous chapters. The stateChanged() function also is used earlier in this tuto-rial; however, this time we return the result as an XML document (with response
XML) and use the DOM to extract the values we want to be displayed.
the aJaX server page
The 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.
The code runs a query against a database and returns the result as an XML docu-ment:
<%
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: 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 build an XML document with the data.
❑ The AJAX Server Page
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 the DOM (Document Object Model).
See Appendix B for a complete listing of the HTML DOM Objects.
The example in Figure 35.1 demonstrates 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.
The preceding example 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 preceding example 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 changes 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();
(continued)
Learn Javascript and ajax with w3schools
200
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].node-Value;
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 are the same as in
previous chapters. The stateChanged() function also is used earlier in this tuto-rial; however, this time we return the result as an XML document (with response
XML) and use the DOM to extract the values we want to be displayed.
the aJaX server page
The 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.
The code runs a query against a database and returns the result as an XML docu-ment:
<%
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: 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 build an XML document with the data.
0 comments:
Post a Comment