- Rongsen.Com.Cn 版权所有 2008-2010 京ICP备08007000号 京公海网安备11010802026356号 朝阳网安编号:110105199号
- 北京黑客防线网安工作室-黑客防线网安服务器维护基地为您提供专业的
服务器维护
,企业网站维护
,网站维护
服务 - （建议采用1024×768分辨率，以达到最佳视觉效果） Powered by 黑客防线网安 ©2009-2010 www.rongsen.com.cn
PHP+AJAX教程(7):AJAX Live Search
作者：黑客防线网安PHP教程基地 来源：黑客防线网安PHP教程基地 浏览次数：0 |
WebjxCom提示：AJAX可为用户提供更友好、交互性更强的搜索体验。
AJAX可为用户提供更友好、交互性更强的搜索体验。
AJAXLiveSearch
在下面的AJAX例子中，我们将演示一个实时的搜索。
实时的搜索与传统搜索相比，具有很多优势：
当键入数据时，就会显示出匹配的结果
当继续键入数据时，对结果进行过滤
如果结果太少，删除字符就可以获得更宽的范围
在下面的文本框中搜索W3School的页面
本例包括四个元素：
简单的HTML表单
JavaScript
PHP页面
XML文档
在本例中，结果在一个XML文档(links.xml)中进行查找。为了让这个例子小而简单，我们只提供8个结果。
HTML表单
这是HTML页面。它包含一个简单的HTML表单，针对此表单的CSS样式，以及指向JavaScript的链接：
<html>
<head>
<scriptsrc="livesearch.js"></script>
<styletype="text/css">
#livesearch
{
margin:0px;
width:194px;
}
#txt1
{
margin:0px;
}
</style>
</head>
<body>
<form>
<inputtype="text"id="txt1"size="30"
onkeyup="showResult(this.value)">
<divid="livesearch"></div>
</form>
</body>
</html>
例子解释-HTML表单
正如你看到的，HTML页面包含一个简单的HTML表单，其中的文本框名为"txt1"。
表单是这样工作的：
当用户在文本框中按键并松开按键时，会触发一个事件
当事件触发时，会执行名为showResult()的函数
表单下面是名为"livesearch"的<div>元素。它用作showResult()所返回数据的占位符
JavaScript
JavaScript代码存储在与HTML文档连接的"livesearch.js"中：
varxmlHttp
functionshowResult(str)
{
if(str.length==0)
{
document.getElementById("livesearch").
innerHTML="";
document.getElementById("livesearch").
style.border="0px";
return
}
xmlHttp=GetXmlHttpObject()
if(xmlHttp==null)
{
alert("BrowserdoesnotsupportHTTPRequest")
return
}
varurl="livesearch.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
functionstateChanged()
{
if(xmlHttp.readyState==4||xmlHttp.readyState=="complete")
{
document.getElementById("livesearch").
innerHTML=xmlHttp.responseText;
document.getElementById("livesearch").
style.border="1pxsolid#黑客防线ACB2";
}
}
functionGetXmlHttpObject()
{
varxmlHttp=null;
try
{
//Firefox,Opera8.0+,Safari
xmlHttp=newXMLHttpRequest();
}
catch(e)
{
//InternetExplorer
try
{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
}
returnxmlHttp;
}
例子解释：
GetXmlHttpObject与PHP和AJAX请求中的例子相同。
showResult()函数
该函数每当一个字符输入文本框就会执行一次。
如果文本域中没有输入(str.length==0)，该函数把返回字段设置为空，并删除周围的任何边框。
不过，如果文本域中存在输入，则函数执行：
定义发送到服务器的url（文件名）
把带有输入框内容的参数(q)添加到url
添加一个随机数，以防止服务器使用缓存文件
调用GetXmlHttpObject函数来创建XMLHTTP对象，并在触发一个变化时告知此函数执行名为stateChanged的一个函数
使用给定的url来打开XMLHTTP对象
向服务器发送HTTP请求
stateChanged()函数
每当XMLHTTP对象的状态发生变化时，该函数就会执行。
当状态变为4(或"complete")时，就会使用响应文本来填充txtHint占位符的内容，并在返回字段周围设置一个边框。
PHP页面
由JavaScript代码调用的服务器页面是名为"livesearch.php"的PHP文件。
"livesearch.php"中的代码检查那个XML文档"links.xml"。该文档w3school.com.cn上的一些页面的标题和URL。
这些代码会搜索XML文件中匹配搜索字符串的标题，并以HTML返回结果：
<?php
$xmlDoc=newDOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//gettheqparameterfromURL
$q=$_GET["q"];
//lookupalllinksfromthexmlfileiflengthofq>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)
{
//findalinkmatchingthesearchtext
if(stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if($hint=="")
{
$hint="<ahref='".
$z->item(0)->childNodes->item(0)->nodeValue.
"'target='_blank'>".
$y->item(0)->childNodes->item(0)->nodeValue."</a>";
}
else
{
$hint=$hint."<br/><ahref='".
$z->item(0)->childNodes->item(0)->nodeValue.
"'target='_blank'>".
$y->item(0)->childNodes->item(0)->nodeValue."</a>";
}
}
}
}
}
//Setoutputto"nosuggestion"ifnohintwerefound
//ortothecorrectvalues
if($hint=="")
{
$response="nosuggestion";
}
else
{
$response=$hint;
}
//outputtheresponse
echo$response;
?>
例子解释：
如果从JavaScript送来了任何文本(strlen($q)>0)，会发生：
PHP创建"links.xml"文件的一个XMLDOM对象
遍历所有"title"元素(nodetypes=1)，以便找到匹配JavaScript所传数据的name
找到包含正确title的link，并设置为"$response"变量。如果找到多于一个匹配，所有的匹配都会添加到变量
如果没有找到匹配，则把$response变量设置为"nosuggestion"
$result是送往"livesearch"占位符的输出
AJAX可为用户提供更友好、交互性更强的搜索体验。
AJAXLiveSearch
在下面的AJAX例子中，我们将演示一个实时的搜索。
实时的搜索与传统搜索相比，具有很多优势：
当键入数据时，就会显示出匹配的结果
当继续键入数据时，对结果进行过滤
如果结果太少，删除字符就可以获得更宽的范围
在下面的文本框中搜索W3School的页面
本例包括四个元素：
简单的HTML表单
JavaScript
PHP页面
XML文档
在本例中，结果在一个XML文档(links.xml)中进行查找。为了让这个例子小而简单，我们只提供8个结果。
HTML表单
这是HTML页面。它包含一个简单的HTML表单，针对此表单的CSS样式，以及指向JavaScript的链接：
<html>
<head>
<scriptsrc="livesearch.js"></script>
<styletype="text/css">
#livesearch
{
margin:0px;
width:194px;
}
#txt1
{
margin:0px;
}
</style>
</head>
<body>
<form>
<inputtype="text"id="txt1"size="30"
onkeyup="showResult(this.value)">
<divid="livesearch"></div>
</form>
</body>
</html>
例子解释-HTML表单
正如你看到的，HTML页面包含一个简单的HTML表单，其中的文本框名为"txt1"。
表单是这样工作的：
当用户在文本框中按键并松开按键时，会触发一个事件
当事件触发时，会执行名为showResult()的函数
表单下面是名为"livesearch"的<div>元素。它用作showResult()所返回数据的占位符
JavaScript
JavaScript代码存储在与HTML文档连接的"livesearch.js"中：
varxmlHttp
functionshowResult(str)
{
if(str.length==0)
{
document.getElementById("livesearch").
innerHTML="";
document.getElementById("livesearch").
style.border="0px";
return
}
xmlHttp=GetXmlHttpObject()
if(xmlHttp==null)
{
alert("BrowserdoesnotsupportHTTPRequest")
return
}
varurl="livesearch.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
functionstateChanged()
{
if(xmlHttp.readyState==4||xmlHttp.readyState=="complete")
{
document.getElementById("livesearch").
innerHTML=xmlHttp.responseText;
document.getElementById("livesearch").
style.border="1pxsolid#黑客防线ACB2";
}
}
functionGetXmlHttpObject()
{
varxmlHttp=null;
try
{
//Firefox,Opera8.0+,Safari
xmlHttp=newXMLHttpRequest();
}
catch(e)
{
//InternetExplorer
try
{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
}
returnxmlHttp;
}
例子解释：
GetXmlHttpObject与PHP和AJAX请求中的例子相同。
showResult()函数
该函数每当一个字符输入文本框就会执行一次。
如果文本域中没有输入(str.length==0)，该函数把返回字段设置为空，并删除周围的任何边框。
不过，如果文本域中存在输入，则函数执行：
定义发送到服务器的url（文件名）
把带有输入框内容的参数(q)添加到url
添加一个随机数，以防止服务器使用缓存文件
调用GetXmlHttpObject函数来创建XMLHTTP对象，并在触发一个变化时告知此函数执行名为stateChanged的一个函数
使用给定的url来打开XMLHTTP对象
向服务器发送HTTP请求
stateChanged()函数
每当XMLHTTP对象的状态发生变化时，该函数就会执行。
当状态变为4(或"complete")时，就会使用响应文本来填充txtHint占位符的内容，并在返回字段周围设置一个边框。
PHP页面
由JavaScript代码调用的服务器页面是名为"livesearch.php"的PHP文件。
"livesearch.php"中的代码检查那个XML文档"links.xml"。该文档w3school.com.cn上的一些页面的标题和URL。
这些代码会搜索XML文件中匹配搜索字符串的标题，并以HTML返回结果：
<?php
$xmlDoc=newDOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//gettheqparameterfromURL
$q=$_GET["q"];
//lookupalllinksfromthexmlfileiflengthofq>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)
{
//findalinkmatchingthesearchtext
if(stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if($hint=="")
{
$hint="<ahref='".
$z->item(0)->childNodes->item(0)->nodeValue.
"'target='_blank'>".
$y->item(0)->childNodes->item(0)->nodeValue."</a>";
}
else
{
$hint=$hint."<br/><ahref='".
$z->item(0)->childNodes->item(0)->nodeValue.
"'target='_blank'>".
$y->item(0)->childNodes->item(0)->nodeValue."</a>";
}
}
}
}
}
//Setoutputto"nosuggestion"ifnohintwerefound
//ortothecorrectvalues
if($hint=="")
{
$response="nosuggestion";
}
else
{
$response=$hint;
}
//outputtheresponse
echo$response;
?>
例子解释：
如果从JavaScript送来了任何文本(strlen($q)>0)，会发生：
PHP创建"links.xml"文件的一个XMLDOM对象
遍历所有"title"元素(nodetypes=1)，以便找到匹配JavaScript所传数据的name
找到包含正确title的link，并设置为"$response"变量。如果找到多于一个匹配，所有的匹配都会添加到变量
如果没有找到匹配，则把$response变量设置为"nosuggestion"
$result是送往"livesearch"占位符的输出
黑客防线网安服务器维护方案本篇连接：http://shop.rongsen.com.cn/show-17515-1.html
新闻栏目
| 我要申请本站：N点 | 黑客防线官网 | |
| 专业服务器维护及网站维护手工安全搭建环境，网站安全加固服务。黑客防线网安服务器维护基地招商进行中！QQ:29769479 |