📄 ajax_responsexml.asp
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX ResponseXML Example</title>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="xml,tutorial,html,dhtml,css,xsl,xhtml,javascript,asp,ado,vbscript,dom,sql,colors,soap,php,authoring,programming,training,learning,beginner's guide,primer,lessons,school,howto,reference,examples,samples,source code,tags,demos,tips,links,FAQ,tag list,forms,frames,color table,w3c,cascading style sheets,active server pages,dynamic html,internet,database,development,Web building,Webmaster,html guide" />
<meta name="Description" content="Free HTML XHTML CSS JavaScript DHTML XML DOM XSL XSLT RSS AJAX ASP ADO PHP SQL tutorials, references, examples for web building." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<link rel="stylesheet" type="text/css" href="../stdtheme.css" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "../../https@ssl./default.htm" : "../../www./default.htm");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3855518-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
<script src="selectcustomer_xml.js" type="text/javascript"></script>
</head>
<body>
<a name="top"></a>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#808080">
<tr>
<td width="234" valign="top">
<a href="../default.htm"><img src="../images/w3default80.jpg" border="0" alt="W3Schools" /></a>
</td>
<th valign="middle" align="left" class="right">
<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*txtimg*/
google_ad_slot = "5330033957";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<noscript>
<a href="../default.asp" target="_blank"><img src="../banners/w6.gif" border="0" alt="W3Schools" /></a>
</noscript>
<br /></th>
</tr>
</table>
<table style="margin-left:1px" width="800px" border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="137" class="content" valign="top"><br />
<a class="left" href="../default.asp" target="_top">
<img src="../images/homeicon.gif" border="0" alt="home" /></a>
<a class="left" href="../default.asp" target="_top">
<b>HOME</b></a>
<br /><br />
<b>AJAX Basic</b><br />
<a class="left" target="_top" href="default.asp" >AJAX HOME</a><br />
<a class="left" target="_top" href="ajax_intro.asp" >AJAX Intro</a><br />
<a class="left" target="_top" href="ajax_httprequest.asp" >AJAX HTTP Request</a><br />
<a class="left" target="_top" href="ajax_example.asp" >AJAX Example</a><br />
<a class="left" target="_top" href="ajax_browsers.asp" >AJAX Browsers</a><br />
<a class="left" target="_top" href="ajax_xmlhttprequest.asp" >AJAX XMLHttpRequest</a><br />
<a class="left" target="_top" href="ajax_server.asp" >AJAX Server</a><br />
<a class="left" target="_top" href="ajax_serverscript.asp" >AJAX Server Script</a><br />
<br />
<b>AJAX Advanced</b><br />
<a class="left" target="_top" href="ajax_example_suggest.asp" >AJAX Suggest</a><br />
<a class="left" target="_top" href="ajax_source.asp" >AJAX Source</a><br />
<a class="left" target="_top" href="ajax_database.asp" >AJAX Database</a><br />
<a class="left" target="_top" href="ajax_xmlfile.asp" >AJAX XML File</a><br />
<a class="left" target="_top" href="ajax_responsexml.asp" style='font-weight:bold;'>AJAX ResponseXML</a><br />
<br />
<b>AJAX Examples</b><br />
<a class="left" target="_top" href="ajax_examples.asp" >AJAX Examples</a><br /><br />
<b>Selected Reading</b><br />
<a class="left" target="_top" href="../browsers/browsers_stats.asp">Web Statistics</a><br />
<a class="left" target="_top" href="../site/site_glossary.asp">Web Glossary</a><br />
<a class="left" target="_top" href="../hosting/default.asp">Web Hosting</a><br />
<a class="left" target="_top" href="../quality/default.asp">Web Quality</a><br /><br />
<a class="left" target="_top" href="../forum/default.asp">W3Schools Forum</a><br /><br />
<a class="left" target="_top" href="../about/about_helping.asp">Helping W3Schools</a><br /><br />
<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*LeftLinkUnit*/
google_ad_slot = "4854527104";
google_ad_width = 120;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
<td valign="top">
<table style="border: 1px solid gray" width="100%" bgcolor="#FFFFFF" border="0" cellpadding="5" cellspacing="0">
<tr>
<td>
<h1>AJAX ResponseXML Example</h1>
<a href="ajax_xmlfile.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="ajax_examples.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<hr />
<p class="intro">While responseText returns the HTTP response as a string,
responseXML returns the response as XML.</p>
<p class="intro">The ResponseXML property returns an XML document object, which
can be examined and parsed using W3C DOM node tree methods and properties.</p>
<hr />
<h2>AJAX ResponseXML Example</h2>
<p>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.</p>
<hr />
<h2>Select a Name in the Box Below</h2>
<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><br />
<span id="city"></span><br />
<span id="country"></span>
<hr />
<h2>AJAX Example Explained</h2>
<p>The example above contains an HTML form, several <span> elements to hold the
returned data, and a link to a JavaScript:</p>
<table class="ex" id="table6" border="1" width="100%">
<tr>
<td>
<pre><html>
<head>
<script src="selectcustomer_xml.js"></script>
</head>
<body></pre>
<pre><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></pre>
<pre><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></pre>
<pre></body>
</html></pre>
</td>
</tr>
</table>
<p>The example above contains an HTML form with a drop down box called
"customers".</p>
<p>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.</p>
<p>
The JavaScript code is listed below.</p>
<hr />
<h2>The AJAX JavaScript</h2>
<p>This is the JavaScript code stored in the file "selectcustomer_xml.js":</p>
<table class="ex" id="table7" border="1" width="100%">
<tr>
<td>
<pre>var xmlHttp</pre>
<pre>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);
}</pre>
<pre>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)
{
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -