利用PHP+JavaScript打造AJAX搜索窗

2008-09-09 10:06 稿源:互联网  1条评论
一、引言

Web世界中一项广为使用的功能就是搜索。随着Web技术的日益发展,为了更好地满足客户的需求,常规搜索引擎开始对更多的非常规方式"敞开了大门"。在这方面,Yahoo!率先提供出其Y!Q服务。这个新的服务能够使你搜索任何web页面,前提是该页面的作者必须包括在他们的web页面中。是服务技术实现了把相关的搜索结果呈现到读者眼前,从而向读者展示更多的信息而不必离开他们的当前页面。

Yahoo!的Y!Q服务的确是一个伟大的想法,但是它的出现也受到了一些批评。原因何在?首先,它要求客户端必须使用Yahoo!的JavaScript并且你必须添加一个<form/>元素,以便满足Yahoo!的搜索要求。对于许多网站作者来说,提供该服务要求付出太多的努力。并且,在所有这些条件满足之后,搜索结果将以Yahoo!风格展现,从而破坏了用户网站的外观感觉。

幸运的是,Yahoo!并非唯一的提供"从你的网站提供搜索结果"服务的搜索引擎。MSNSearch也提供一种类似服务,除了它能够使web开发者控制外观感觉以外。这种能力来自于MSNSearch提供它的搜索结果的RSS版本,从而使得订阅一个特定的搜索或使用Ajax方法把该结果添加到你的页面成为可能。

尽管Google已经率先实现了这种新的"从你的站点进行搜索"技术;但是,在本文成文之时,与Google相关的GoogleBlogSearchBeta也已经能够以RSS或者Atom格式提供返回的结果。

二、服务器端组件

使用MSNSearch执行搜索时,你会看到一个桔黄色的XML图像出现在结果页面的底部。点击这个图像将会把你带到一个新的页面,并提供给你订阅该搜索的URL。

这样以来,你就可以编写服务器端代码以检索远程馈送。对于本文中的搜索窗,你将使用PHP检索搜索馈送。来自于服务器应用程序请求信息的URL看起来如下所示:

websearch.php?search=[SEARCHTERM]
查询字符串只有一个变量:"search";因此,应用程序应该查找此查询项。在服务器端,你需要创建一个页面来"拉动"这个数据:

<?php
header("Content-Type:text/xml");
header("Cache-Control:no-cache");if(isset($_GET["search"]))
{
 $searchTerm=urlencode(stripslashes($_GET["search"]));
 $url="http://search.msn.com/results.aspx?q=$searchTerm&format=rss";
 $xml=file_get_contents($url);
 echo$xml;
}
?>
前两行设置要求的头部以便浏览器能够正确处理数据(XML形式,并且没有对结果予以缓冲)。下一行代码使用isset()函数来决定是否搜索键存在于查询字符串中。

为了把一个合适的请求发送到远程主机,搜索术语应该通过许多函数的"过滤"。首先,它被传递给stripslashes()函数。如果在PHP配置中启动了"magicquotes"(缺省情况下是支持的),那么,到达PHP引擎的任何引号都会被使用一个斜杠(如,\"searchquery\")自动地脱掉。该stripslashes()函数负责删除这些符号,仅留下"searchquery"。在删除斜杠后,转到urlencode()函数,由这个函数负责编码字符以用于查询字符串。空格、引号、"&"等符号都被编码。

注意如果搜索术语不能通过这些函数的"过滤",那么,MSN服务器将返回一个代码400-"BadRequest"。

当为转换搜索术语准备好后,它被包括到URL中并存储于$url变量中。最后,file_get_contents()函数负责打开远程文件,读取其内容并以一个字符串形式把它返回到$xml变量中,然后使用echo命令把它打印到页面中。

三、客户端组件

本文中的搜索窗口(Widget)的客户端代码基于一个静态对象msnWebSearch创建-它被定义为一个没有任何属性(现在)的对象:

varmsnWebSearch={};
这个对象用于一个HTMLElement的onclick事件中执行搜索:

<ahref="#"
onclick='msnWebSearch.search(event,"ProfessionalAjax");returnfalse;'>
ProfessionalAjax
</a>
这个msnWebSearch对象提供若干取得搜索结果的方法,并负责绘制和放置包含这些数据的HTML。第一个方法是drawResultBox(),它负责绘制HTML。这个方法形成的HTML如下所示:

<divclass="ajaxWebSearchBox">
 <divclass="ajaxWebSearchHeading">MSNSearchResults
 <aclass="ajaxWebSearchCloseLink"href="#">X</a>
</div>
<divclass="ajaxWebSearchResults">
 <aclass="ajaxWebSearchLink"target="_new"/>
 <aclass="ajaxWebSearchLink"target="_new"/>
</div>
</div>
该结果框分为两部分:一个头部和一个结果栏(见图1)。头部告诉用户这个新的搜索窗包含来自一个MSN搜索的结果。它还包含一个"X"用于关闭该小窗口。其结果栏包含块风格的链接,当点击这些链接时将打一个新的窗口。


图1.结果框分为两部分:一个头部和一个结果栏#p#分页标题#e#

四、绘制结果用户接口

生成这个HTML的代码相当长,因为其中的元素都是使用DOM方法生成的。drawResultBox()方法接受一个参数(一个事件对象):

msnWebSearch.drawResultBox=function(e){
 vardivSearchBox=document.createElement("div");
 vardivHeading=document.createElement("div");
 vardivResultsPane=document.createElement("div");
 varaCloseLink=document.createElement("a");
前面这些代码经由createElement()方法创建HTML元素。在创建这些元素后,你就能够开始赋予它们属性。上面完成终结(封尾)的两个元素分别是aCloseLink和divHeading:

aCloseLink.href="#";
aCloseLink.className="ajaxWebSearchCloseLink";
aCloseLink.onclick=this.close;
aCloseLink.appendChild(document.createTextNode("X"));
divHeading.className="ajaxWebSearchHeading";
divHeading.appendChild(document.createTextNode("MSNSearchResults"));
divHeading.appendChild(aCloseLink);
前四行完成关闭结果框的链接。其中,方法close()成为链接的onclick事件的处理器。后面的几行代码负责使用文本和关闭链接填充头部的<div/>。

当这个结果框被绘制到页面上时,还没有接收到来自于一个服务器应用程序的响应。为了向用户展示已经发生了什么,可以向用户展示一个消息提示数据正在加载中(这种方式更友好些)(见图2)。为此,创建另一个元素并且把它添加到divResultsPane元素:

vardivLoading=document.createElement("div");
divLoading.appendChild(document.createTextNode("LoadingSearchFeed"));

divResultsPane.className="ajaxWebSearchResults";
divResultsPane.appendChild(divLoading);
这个代码创建加载消息并且把它添加到divResultsPane,同时还把类名赋给divResultsPane。


图2.向用户提示数据正在加载中#p#分页标题#e#

五、显示结果

populateResults()方法负责使用搜索结果填充结果栏。它接受两个参数:包含该结果的元素和一个XParser对象(XParser是一个基于JavaScript的RSS读取器,可从www.wdonline.com/javascript/xparser/自由下载):

msnWebSearch.populateResults=function(divResultsPane,oParser){
 varoFragment=document.createDocumentFragment();

 divResultsPane.removeChild(divResultsPane.firstChild);
这个方法以编程方式并通过DOM方法生成<a/>元素;这样以来,这些元素将被添加到一个在第一行创建的文档片断中。下一行删除添加在drawResultBox()中的正加载的<div/>元素。

下一步是创建这个链接:

for(vari=0;i<oParser.items.length;i++){
 varoItem=oParser.items[i];

 varaResultLink=document.createElement("a");
 aResultLink.href=oItem.link.value;
 aResultLink.className="ajaxWebSearchLink";
 aResultLink.target="_new";
 aResultLink.appendChild(document.createTextNode(oItem.title.value));

 oFragment.appendChild(aResultLink);
}
这段代码遍历回馈的各个项,并且由该数据生成链接并把<a/>元素添加到文档片断最后。

当退出循环时,该文档片断被添加到divResultsPane以显示搜索结果:

divResultsPane.appendChild(oFragment);
六、关闭结果框

为了关闭搜索结果框,msnWebSearch对象提供了close()方法。close()方法负责处理该链接的onclick事件(关闭该小框):

msnWebSearch.close=function(){
 vardivSearchBox=this.parentNode.parentNode;
 document.body.removeChild(divSearchBox);

 returnfalse;
};
该搜索框其实并没有关闭;事实上,它被从该文档中删除了。为此,需要检索divSearchBox元素。第一行代码完成这一任务-通过检索这个元素的父结点的父结点实现。因为close()负责处理onclick事件,所以this引用这一链接。下一行从文档中删除divSearchBox元素。最后一行,返回false,从而强迫浏览器不要沿用一个链接的缺省行为(转到在href属性中标注的位置)。

七、构建搜索接口

msnWebSearch对象的最后一个方法是search(),它提供执行一个搜索的接口。你可以使用一个元素的onclick事件来调用search()。它接受两个方法:一个事件对象和搜索术语:

msnWebSearch.search=function(e,sSearchTerm){
 vardivSearchBox=this.drawResultBox(e);
 varurl=encodeURI("websearch.php?search="+sSearchTerm);
 varoParser=newXParser(url);
 oParser.onload=function(){
msnWebSearch.populateResults(divSearchBox.childNodes[1],oParser);
 };
};


第一行调用drawResultBox()方法并且把事件e传递给它。下一行编码该URL以实现合适的转换。这个URL被传递给XParser构造器以创建一个新的分析器。当搜索回馈完成加载并使用结果填充搜索框时,该分析器的onload事件处理器调用populateResult()方法。
当然,构建这个搜索框的一个理由是,使其更适合于你自己的站点的外观。

#p#分页标题#e#

八、定制Web搜索框

借助于CSS,你可以容易地为你的现有站点定制搜索框,并且使你以后的任何重新设计都变得非常容易。

首先要讨论的CSS类是ajaxWebSearchBox(该类实现搜索框)。因为搜索框要确定位置,所以它必须要有一个绝对位置:

.ajaxWebSearchBox
{
 position:absolute;
 background-color:#0d1e4a;
 width:500px;
 padding:1px;
}
在此,绝对位置是唯一的要求。所有的其它属性都是根据你的口味可选的。在这个示例中,该框有一个微蓝色的背景,一个500像素的宽度,以及在四边上各有1个像素的填充。这个填充导致围绕该框的内容的是1个像素宽的边界。

下一个类是ajaxWebSearchHeading,它包含该框的头部文本和关闭链接。为了把关闭链接放在右上角,它使用绝对位置。因为这个原因,它要求ajaxWebSearchHeading使用一个相对位置:

.ajaxWebSearchHeading
{
 position:relative;
 background-color:#1162cc;
 font:bold14pxtahoma;
 height:21px;
 color:white;
 padding:3px0px0px2px;
}
在此,唯一要求的属性也是position属性。其它的属性有助于给出该元素一个好看的外观。其背景颜色是浅蓝色,而文本部分是白色,14像素高且是Tahoma字体。该元素的高度是21个像素并且在顶部和左边都填充以边界。

如前面所述,该关闭链接的位置是绝对的:

a.ajaxWebSearchCloseLink
{
 position:absolute;
 right:5px;
 top:3px;
 text-decoration:none;
 color:white;
}
a:hover.ajaxWebSearchCloseLink
{
 color:red;
}
该元素被放置在距右边5个像素,距顶部3个像素的位置(该元素被放在右上角)。这个链接没有任何文本修饰并且颜色呈白色。当用户的鼠标停在该链接上时,文本颜色变红。

注意,这里没有使用访问过的或活动的"假"类。这是因为该窗口总是忽略这个链接的href属性(它已经在它的事件处理器中返回了false)。因此,该链接从来不会真正处于活动或被访问状态。

然后,ajaxWebSearchResults类使结果栏的风格如下:

.ajaxWebSearchResults
{
 background-color:#d3e5fa;
 padding:5px;
}
这个元素不要求使用CSS属性。现有属性仅用于定义结果栏并且使它比较容易读取。背景颜色是一个浅蓝色并且围绕边缘有5个像素的填充。当然,你能够定制加载消息的风格:

.ajaxWebSearchResultsdiv
{
 text-align:center;
 font:bold14pxtahoma;
 color:#0a246a;
}
这个元素没有一个类名,但是你仍然能够通过使用前面的示例中展示的parentchild标志控制它的风格。这个示例把文本放置在<div/>元素的中央,并且给它一个加粗蓝色的字体,且有14个像素高。

最后一个你需要风格化的元素是结果链接。这些链接有一个类名叫ajaxWebSearchLink:

a.ajaxWebSearchLink
{
 font:12pxtahoma;
 padding:2px;
 display:block;
 color:#0a246a;
}
a:hover.ajaxWebSearchLink
{
 color:white;
 background-color:#316ac5;
}
a:visited.ajaxWebSearchLink
{
 color:purple;
}
唯一要求的属性是display属性(被设置为block)。这使每一个链接都能够在它自己的行上显示。填充空白部分大约有两个像素宽,使各个链接之间分开一些,从而使它们更易于读取。字体名为Tahoma并且有12像素高。它们的颜色是暗蓝色,与ajaxWebSearchResults的浅蓝色背景形成对照。

当用户在这些链接上移动鼠标时,背景颜色被设置为蓝色,而文本颜色改变为白色。

在前面的代码的最后一条规则中访问过的"假"类被设置。这是为了给用户提供用户接口暗示-它们已经被使用过。通过把访问过的"假"类设置为显示一种紫色,用户就可以知道它们已经访问过那个链接,从而节省他们的时间-不必再访问一个他们可能不想看的页面。

现在,让我们来看一下如何实现搜索框。

九、实现Web搜索搜索框

实现这个搜索框是很简单的。首先,你必须把websearch.php文件上传到你的web服务器(当然,必须安装PHP)。然后,你需要一个HTML文档来引用所有的组件。msnWebSearch对象依赖于XParser类,这个类又依赖于zXml库(可从www.nczonline.net/downloads/下载)。你必须引用下面这些文件:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxml:lang="en"lang="en"xmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>AjaxWebSearch</title>
<linkrel="stylesheet"type="text/css"href="css/websearch.css"/>
<scripttype="text/javascript"src="js/zxml.js"></script>
<scripttype="text/javascript"src="js/xparser.js"></script>
<scripttype="text/javascript"src="js/websearch.js"></script>
</head><body>
</body>
</html>
为了执行搜索,应该把msnWebSearch.search()方法设置为该元素的onclick处理器:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxml:lang="en"lang="en"xmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>AjaxWebSearch</title>
<linkrel="stylesheet"type="text/css"href="css/websearch.css"/>
<scripttype="text/javascript"src="js/zxml.js"></script>
<scripttype="text/javascript"src="js/xparser.js"></script>
<scripttype="text/javascript"src="js/websearch.js"></script>
</head><body>
<ahref="#"onclick='msnWebSearch.search(event,"ProfessionalAjax");
returnfalse;'>SearchforProfessionalAjax</a>
</body>
</html>
第一个新的链接执行一个针对准确词组"ProfessionalAjax"的搜索,而第二个链接将搜索这其中的各个单词。还要注意,在onclick事件中返回的是false-这强迫浏览器忽略掉href属性。点击这些链接将在光标位置绘制搜索框,并且就在此处显示你的搜索结果。

有好的文章希望站长之家帮助分享推广,猛戳这里我要投稿

相关文章

相关热点

查看更多