📄 ajax_xmlfile.asp@output=print
字号:
<!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 XML</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" />
<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="selectcd.js" type="text/javascript"></script>
</head>
<body>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
<h1>AJAX XML Example</h1>
<a href="ajax_database.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="ajax_responsexml.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<hr />
<p class="intro">AJAX can be used for interactive communication with an XML
file.</p>
<hr />
<h2>AJAX XML Example</h2>
<p>In the AJAX example below we will demonstrate how a web page can fetch
information from an XML file using AJAX technology.</p>
<hr />
<h2>Select a CD in the Box Below</h2>
<form action="">
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<div id="txtHint"><b>CD info will be listed here.</b></div>
<hr />
<h2>AJAX Example Explained</h2>
<p>The example above contains a simple HTML form and a link to a JavaScript:</p>
<table class="ex" width="100%" border="1" id="table1"><tr><td>
<pre><html>
<head>
<script src="selectcd.js"></script>
</head></pre>
<pre><body></pre>
<pre><form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form></pre>
<pre><p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p></pre>
<pre></body>
</html></pre>
</td></tr></table>
<p>
As you can see it is just a simple HTML form with a simple drop down box called "cds".</p>
<p>The paragraph below the form contains a div called "txtHint". The
div is
used as a placeholder for info retrieved from the web server.</p>
<p>When the user selects data, a function called "showCD" 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 showCD 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 "selectcd.js":</p>
<table class="ex" width="100%" border="1" id="table4"><tr><td>
<pre>var xmlHttp</pre>
<pre>function showCD(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="getcd.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)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}</pre>
<pre>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;
}</pre>
</td></tr></table>
<br />
<hr>
<h2>The XML File</h2>
<p>The XML file is "<a target="_blank" href="cd_catalog.xml">cd_catalog.xml</a>".
This document contains a CD collection.<br />
</p>
<hr />
<h2>The AJAX Server Page</h2>
<p>The server page called by the JavaScript, is a simple ASP file called "getcd.asp".</p>
<p>The page is written in VBScript for an Internet Information Server (IIS). It
could easily be rewritten in PHP, or some other server language.
<a href="../php/php_ajax_xml.asp">Look at a corresponding example in PHP</a>.</p>
<p>The code runs a query against an XML file and returns the result as HTML:</p>
<table class="ex" width="100%" border="1" id="table5"><tr><td>
<pre>
<%
response.expires=-1
q=request.querystring("q")
set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load(Server.MapPath("cd_catalog.xml"))
set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")
for each x in nodes
for each y in x.childnodes
response.write("<b>" & y.nodename & ":</b> ")
response.write(y.text)
response.write("<br />")
next
next
%></pre>
</td></tr></table>
<br />
<hr />
<a href="ajax_database.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="ajax_responsexml.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -