📄 php_ajax_responsexml.asp
字号:
<li>When the user selects data, a function called "showUser()" is executed.
The execution of the function is triggered by the "onchange" event.</li>
</ul>
<p>In other
words: Each time the user changes the value in the drop down box, the function
showUser() is called and outputs the result in the specified <span> elements.</p>
<hr>
<h2>The JavaScript</h2>
<p>This is the JavaScript code stored in the file "responsexml.js":</p>
<table class="ex" id="table7" border="1" width="100%">
<tr>
<td>
<pre>var xmlHttp</pre>
<pre>function showUser(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="responsexml.php"
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 || xmlHttp.readyState=="complete")
{
xmlDoc=xmlHttp.responseXML;
document.getElementById("firstname").innerHTML=
xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
document.getElementById("lastname").innerHTML=
xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
document.getElementById("job").innerHTML=
xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
document.getElementById("age_text").innerHTML="Age: ";
document.getElementById("age").innerHTML=
xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
document.getElementById("hometown_text").innerHTML="<br/>From: ";
document.getElementById("hometown").innerHTML=
xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
}
} </pre>
<pre>function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}</pre>
</td>
</tr>
</table>
<h2>Example Explained</h2>
<p>The showUser() and GetXmlHttpObject functions are the same as in the
<a href="php_ajax_database.asp">PHP AJAX Database</a> chapter, you can go
to there for an explanation of those.</p>
<p><b>The stateChanged() Function</b></p>
<p>If an item in the drop down box is selected the function
executes the following:</p>
<ol>
<li>Defines the "xmlDoc" variable as an xml document using the
responseXML function</li>
<li>Retrieves data from the xml documents and places them in the correct
<span> elements</li>
</ol><hr>
<h2>The PHP Page</h2>
<p>The server page called by the JavaScript, is a simple PHP file called
"responsexml.php".</p>
<p>The page is written in PHP and uses a MySQL databse.</p>
<p>The code runs a SQL query against a database and returns the result as an XML
document:</p>
<table class="ex" id="table8" border="1" width="100%">
<tr>
<td>
<pre><?php
header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");
//A date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");</pre>
<pre>$q=$_GET["q"];</pre>
<pre>$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}</pre>
<pre>mysql_select_db("ajax_demo", $con);</pre>
<pre>$sql="SELECT * FROM user WHERE id = ".$q."";</pre>
<pre>$result = mysql_query($sql);</pre>
<pre>echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<person>';
while($row = mysql_fetch_array($result))
{
echo "<firstname>" . $row['FirstName'] . "</firstname>";
echo "<lastname>" . $row['LastName'] . "</lastname>";
echo "<age>" . $row['Age'] . "</age>";
echo "<hometown>" . $row['Hometown'] . "</hometown>";
echo "<job>" . $row['Job'] . "</job>";
}
echo "</person>";</pre>
<pre>mysql_close($con);
?>
</pre>
</td>
</tr>
</table>
<h2>Example Explained</h2>
<p>When the query is sent from the JavaScript to the PHP page the following
happens:</p>
<ol>
<li>The content-type of the PHP document is set to be "text/xml"</li>
<li>The PHP document is set to "no-cache" to prevent caching</li>
<li>The $q variable is set to be the data sent from the html page</li>
<li>PHP opens a connection to a MySQL server</li>
<li>The "user" with the specified id is found</li>
<li>The data is outputted as an xml document</li>
</ol>
<hr />
<a href="php_ajax_database.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="php_ajax_livesearch.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<br />
<hr />
<!-- **** SPOTLIGHTS 1 **** -->
<iframe src="../banners/aspallframe.asp" height="110" width="485"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
<hr />
<!-- **** SPOTLIGHTS 2 **** -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2" bgcolor="#dae6f2"><a href="../../www.ektron.com/cms400-web-cms.aspx@id=5748&cpid=BAC-3183&campaignid=3183" target="_blank">
<img src="../images/061608-w3schools_box.gif" width="161" height="232" alt="Ektron CMS400.NET" border="0" /></a></td>
<td><a href="../../www.ektron.com/index.aspx@cpid=BAC-3183&campaignid=3183" target="_blank"><img src="../images/061608-w3schools_logo.gif" width="339" height="108" alt="Ektron - What do you want your website to do?" border="0" /></a></td>
</tr>
<tr>
<td><a href="../../www.ektron.com/cms400-web-cms.aspx@id=5748&cpid=BAC-3183&campaignid=3183" target="_blank"><img src="../images/061608-w3schools_eintranet.gif" width="339" height="124" alt="The Ektron Intranet" border="0" /></a></td>
</tr>
<tr>
<td colspan="2"><a href="../../www.ektron.com/instant_demo.cfm@flash=6134&type=5&cpid=BAC-3183&campaignid=3183" target="_blank"><img src="../images/061608-w3schools_taketour.gif" alt="Take the video tour" width="500" height="33" border="0" /></a></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
<p style="padding: 10px; margin:0px;"><a href="../../www.ektron.com/cms400-web-cms.aspx@id=5748&cpid=BAC-3183&campaignid=3183" target="_blank"><strong>The Ektron Intranet</strong></a>
lets you do everything you need to do on your corporate intranet and everything you want to do<strong>... all with just one application</strong>.</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<table cellspacing="0" cellpadding="4" width="100%" border="0" bgcolor="#FFFFFF">
<tr>
<td bgcolor="#dae6f2"><p><strong>What can you do with the Ektron Intranet? </strong></p></td>
</tr>
<tr>
<td>
<table width="100%" border="0" align="center" cellpadding="4" cellspacing="0">
<tr>
<td><img src="../images/061608-w3schools_icon_search.jpg" width="32" height="32" alt="Ektron" /></td>
<td valign="top"><p>Navigate through content, documents, assets, colleagues and workgroups quickly and intuitively with <strong>enterprise search</strong></p></td>
</tr>
<tr>
<td><img src="../images/061608-w3schools_icon_communication.jpg" width="32" height="32" alt="Ektron" /></td>
<td valign="top"><p>Communicate with friends and colleagues with forums, message boards and corporate blogging using the new <strong>Social Networking Platform</strong> </p></td>
</tr>
<tr>
<td><p><img src="../images/061608-w3schools_icon_open.gif" width="32" height="32" alt="Ektron" /></p></td>
<td valign="top"><p>Utilize the extensive out-of-the box features or <strong>customize</strong> your site through Ektron CMS400.NET's <strong>open architecture</strong></p></td>
</tr>
<tr>
<td><img src="../images/061608-w3schools_icon_collaboration.jpg" width="32" height="32" alt="Ektron" /></td>
<td valign="top"><p>Promote collaboration in your organization through project <strong>workspaces</strong> where others can efficiently find information and work together</p></td>
</tr>
<tr>
<td><img src="../images/061608-w3schools_icon_docflow.jpg" width="32" height="32" alt="Ektron" /></td>
<td valign="top"><p>Author/edit content, manage navigation, menus, audit trails, workflow and approvals with the best in breed <strong>Content Management</strong> </p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center" style="padding: 0px 10px 10px 10px; line-height: 14pt;">
<p>See why there are 20,000+ Ektron integrations worldwide.</p>
</td>
</tr>
</table> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><a href="../../www.ektron.com/instant_demo.cfm@flash=6134&type=5&cpid=BAC-3183&campaignid=3183" target="_blank">
<img src="../images/061608-w3schools_buttontop.gif" width="161" height="27" alt="Take the Video Tour" border="0" /></a></td>
<td bgcolor="#FFFFFF"><a href="../../www.ektron.com/instant_demo.cfm@flash=6134&type=5&cpid=BAC-3183&campaignid=3183" target="_blank"><strong>TAKE THE VIDEO TOUR</strong></a></td>
</tr>
<tr>
<td bgcolor="#dae6f2"><a href="../../www.ektron.com/instant_demo.cfm@flash=6134&type=5&cpid=BAC-3183&campaignid=3183" target="_blank">
<img src="../images/061608-w3schools_buttonbottom.gif" width="161" height="35" alt="Take the Video Tour" border="0" /></a></td>
<td bgcolor="#dae6f2">or download a <a href="../../www.ektron.com/download.cfm@product_id=363&purchase=0&cpid=BAC-3183&campaignid=3183" target="_blank"><strong>FREE TRIAL</strong></a> today.</td>
</tr>
</table>
<hr />
<!-- **** SPOTLIGHTS 3 **** -->
<table cellpadding="0" cellspacing="0"><tr><td width="72"></td><td>
<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*txt*/
google_ad_slot = "1699448869";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td></tr></table>
<hr />
<center>
<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*imgtxt*/
google_ad_slot = "8606855891";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
<hr />
<!-- **** END SPOTLIGHTS **** -->
</td></tr>
<tr><td>
<p>Jump to: <a href="#top" target="_top"><b>Top of Page</b></a>
or <a href="../default.asp" target="_top"><b>HOME</b></a> or
<a href='php_ajax_responsexml.asp@output=print' target="_blank">
<img src="../images/print.gif" alt="Printer Friendly" border="0" />
<b>Printer friendly page</b></a></p>
<p>W3Schools provides material for training only. We do not warrant the correctness of its contents.
The risk from using it lies entirely with the user.
While using this site, you agree to have read and accepted our
<a href="../about/about_copyright.asp">terms of use</a> and
<a href="../about/about_privacy.asp">privacy policy</a>.
</p>
<p><a href="../about/about_copyright.asp">Copyright 1999-2008</a> by Refsnes Data. All Rights Reserved.</p>
<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr>
<td width="60%" align="left">
<a href="../../validator.w3.org/check@uri=referer" target="_blank">
<img src="../images/vxhtml.gif" alt="Validate" width="88" height="31" border="0" /></a>
<a href="../../jigsaw.w3.org/css-validator/check@uri=referer" target="_blank">
<img src="../images/vcss.gif" alt="Validate" width="88" height="31" border="0" /></a>
<a href="../../www.w3.org/WAI/WCAG1A-Conformance" title="Explanation of Level A Conformance" target="_blank">
<img src="../images/wai.gif" alt="W3C-WAI level A conformance icon" width="88" height="31" border="0" /></a>
</td>
<td>
<a href="../xhtml/xhtml_howto.asp" target="_top">W3Schools was converted to XHTML in December 1999</a>
</td></tr>
</table>
</td></tr>
</table>
</td>
<td width="145" align="center" valign="top">
<iframe style="background-color:#f1f1f1" src="../banners/rightcolumn.asp@secid=php" height="1500" width="147"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
</iframe>
</td>
</tr></table>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -