📄 php_ajax_livesearch.asp
字号:
style.border="1px solid #A5ACB2";
}
}</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>
<h2>Example Explained</h2>
<p>The GetXmlHttpObject function is the same as in the
<a href="php_ajax_suggest.asp">PHP AJAX Suggest</a> chapter.</p>
<p><b>The showResult() Function</b></p>
<p>This function executes every time a character is entered in the input field.</p>
<p>If there is no input in the text field (str.length == 0) the function sets
the return field to empty and removes any border around it.</p>
<p>However, if there is any input in the text field the function
executes the following:</p>
<ol>
<li>Defines the url (filename) to send to the server</li>
<li>Adds a parameter (q) to the url with the content of the input field
</li>
<li>Adds a random number to prevent the server from using a cached file</li>
<li>Calls on the GetXmlHttpObject function to create an XMLHTTP object, and tells the object to execute a function
called stateChanged when a change is triggered</li>
<li>Opens the XMLHTTP object with the given url.</li>
<li>Sends an HTTP request to the server</li>
</ol>
<p><b>The stateChanged() Function</b></p>
<p>This function executes every time the state of the XMLHTTP
object changes.</p>
<p>When the state changes to 4 (or to "complete"), the content of the txtHint
placeholder is filled with the response text, and a border is set around the
return field. </p>
<hr>
<h2>The PHP Page</h2>
<p>The server page called by the JavaScript code is a PHP file called "livesearch.php".</p>
<p>The code in the "livesearch.php" checks the XML document "<a target="_blank" href="links.xml">links.xml</a>".
This document contains titles and URL's of some pages on W3Schools.com.</p>
<p>The code searches the XML file for titles matching the search string and returns the result as HTML:</p>
<table class="ex" id="table10" border="1" width="100%">
<tr>
<td>
<pre><?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");</pre>
<pre>$x=$xmlDoc->getElementsByTagName('link');</pre>
<pre>//get the q parameter from URL
$q=$_GET["q"];</pre>
<pre>//lookup all links from the xml file if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
{
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1)
{
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if ($hint=="")
{
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
else
{
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}</pre>
<pre>// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}</pre>
<pre>//output the response
echo $response;
?></pre>
</td>
</tr>
</table>
<p>If there is any text sent from the JavaScript (strlen($q) > 0) the following
happens:</p>
<ol>
<li>PHP creates an XML DOM object of the "links.xml" file</li>
<li>All "title" elements (nodetypes = 1) are looped through to find a name matching the one sent from the JavaScript</li>
<li>The link containing the correct title is found and set as the
"$response" variable. If more than one match is found, all matches are added
to the variable</li>
<li>If no matches are found the $response variable is set to "no suggestion"</li>
<li>The $result variable is output and sent to the "livesearch" placeholder</li>
</ol>
<hr />
<a href="php_ajax_responsexml.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="php_ajax_rss_reader.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>
<iframe style="background-color:#ffffff" src="../banners/oddcastbannerframe.asp"
height="60" width="468" 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>
</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_livesearch.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 + -