您当前的位置: 首页 » AJAX编程 » 利用PHP＋JavaScript打造AJAX搜索窗(1)
利用PHP＋JavaScript打造AJAX搜索窗(1)
论坛链接
一、 引言
Web世界中一项广为使用的功能就是搜索。随着Web技术的日益发展，为了更好地满足客户的需求，常规搜索引擎开始对更多的非常规方式"敞开了大门"。在这方面，Yahoo!率先提供出其Y!Q服务。这个新的服务能够使你搜索任何web页面，前提是该页面的作者必须包括在他们的web页面中。是服务技术实现了把相关的搜索结果呈现到读者眼前，从而向读者展示更多的信息而不必离开他们的当前页面。
Yahoo!的Y!Q服务的确是一个伟大的想法，但是它的出现也受到了一些批评。原因何在？首先，它要求客户端必须使用Yahoo!的 Javascript并且你必须添加一个＜form/＞元素，以便满足Yahoo!的搜索要求。对于许多网站作者来说，提供该服务要求付出太多的努力。并且，在所有这些条件满足之后，搜索结果将以Yahoo!风格展现，从而破坏了用户网站的外观感觉。
幸运的是，Yahoo!并非唯一的提供"从你的网站提供搜索结果"服务的搜索引擎。MSN Search也提供一种类似服务，除了它能够使web开发者控制外观感觉以外。这种能力来自于MSN Search提供它的搜索结果的RSS版本，从而使得订阅一个特定的搜索或使用Ajax方法把该结果添加到你的页面成为可能。
尽管Google已经率先实现了这种新的"从你的站点进行搜索"技术；但是，在本文成文之时，与Google相关的Google BlogSearch Beta也已经能够以RSS或者Atom格式提供返回的结果。
二、 服务器端组件
使用MSN Search执行搜索时，你会看到一个桔黄色的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配置中启动了"magic quotes"(缺省情况下是支持的)，那么，到达PHP引擎的任何引号都会被使用一个斜杠（如，\"search query\"）自动地脱掉。该stripslashes()函数负责删除这些符号，仅留下"search query"。在删除斜杠后，转到urlencode()函数，由这个函数负责编码字符以用于查询字符串。空格、引号、"&"等符号都被编码。
注意 如果搜索术语不能通过这些函数的"过滤"，那么，MSN服务器将返回一个代码400-"Bad Request"。
当为转换搜索术语准备好后，它被包括到URL中并存储于$url变量中。最后，file_get_contents()函数负责打开远程文件，读取其内容并以一个字符串形式把它返回到$xml变量中，然后使用echo命令把它打印到页面中。
三、 客户端组件
本文中的搜索窗口（Widget）的客户端代码基于一个静态对象msnWebSearch创建-它被定义为一个没有任何属性(现在)的对象：
var msnWebSearch ={};
这个对象用于一个HTMLElement的onclick事件中执行搜索：
＜a href="#"
onclick='msnWebSearch.search(event，"Professional Ajax"); return false;'＞
Professional Ajax
＜/a＞
这个msnWebSearch对象提供若干取得搜索结果的方法，并负责绘制和放置包含这些数据的HTML。第一个方法是drawResultBox()，它负责绘制HTML。这个方法形成的HTML如下所示：
＜divclass="ajaxWebSearchBox"＞
＜div class="ajaxWebSearchHeading"＞MSN Search Results
＜a class="ajaxWebSearchCloseLink" href="#"＞X＜/a＞
＜/div＞
＜div class="ajaxWebSearchResults"＞
＜a class="ajaxWebSearchLink" target="_new" /＞
＜a class="ajaxWebSearchLink" target="_new" /＞
＜/div＞
＜/div＞
该结果框分为两部分：一个头部和一个结果栏(见图1)。头部告诉用户这个新的搜索窗包含来自一个MSN搜索的结果。它还包含一个"X"用于关闭该小窗口。其结果栏包含块风格的链接，当点击这些链接时将打一个新的窗口。
图1.结果框分为两部分：一个头部和一个结果栏
Web世界中一项广为使用的功能就是搜索。随着Web技术的日益发展，为了更好地满足客户的需求，常规搜索引擎开始对更多的非常规方式"敞开了大门"。在这方面，Yahoo!率先提供出其Y!Q服务。这个新的服务能够使你搜索任何web页面，前提是该页面的作者必须包括在他们的web页面中。是服务技术实现了把相关的搜索结果呈现到读者眼前，从而向读者展示更多的信息而不必离开他们的当前页面。
Yahoo!的Y!Q服务的确是一个伟大的想法，但是它的出现也受到了一些批评。原因何在？首先，它要求客户端必须使用Yahoo!的 Javascript并且你必须添加一个＜form/＞元素，以便满足Yahoo!的搜索要求。对于许多网站作者来说，提供该服务要求付出太多的努力。并且，在所有这些条件满足之后，搜索结果将以Yahoo!风格展现，从而破坏了用户网站的外观感觉。
幸运的是，Yahoo!并非唯一的提供"从你的网站提供搜索结果"服务的搜索引擎。MSN Search也提供一种类似服务，除了它能够使web开发者控制外观感觉以外。这种能力来自于MSN Search提供它的搜索结果的RSS版本，从而使得订阅一个特定的搜索或使用Ajax方法把该结果添加到你的页面成为可能。
尽管Google已经率先实现了这种新的"从你的站点进行搜索"技术；但是，在本文成文之时，与Google相关的Google BlogSearch Beta也已经能够以RSS或者Atom格式提供返回的结果。
二、 服务器端组件
使用MSN Search执行搜索时，你会看到一个桔黄色的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配置中启动了"magic quotes"(缺省情况下是支持的)，那么，到达PHP引擎的任何引号都会被使用一个斜杠（如，\"search query\"）自动地脱掉。该stripslashes()函数负责删除这些符号，仅留下"search query"。在删除斜杠后，转到urlencode()函数，由这个函数负责编码字符以用于查询字符串。空格、引号、"&"等符号都被编码。
注意 如果搜索术语不能通过这些函数的"过滤"，那么，MSN服务器将返回一个代码400-"Bad Request"。
当为转换搜索术语准备好后，它被包括到URL中并存储于$url变量中。最后，file_get_contents()函数负责打开远程文件，读取其内容并以一个字符串形式把它返回到$xml变量中，然后使用echo命令把它打印到页面中。
三、 客户端组件
本文中的搜索窗口（Widget）的客户端代码基于一个静态对象msnWebSearch创建-它被定义为一个没有任何属性(现在)的对象：
var msnWebSearch ={};
这个对象用于一个HTMLElement的onclick事件中执行搜索：
＜a href="#"
onclick='msnWebSearch.search(event，"Professional Ajax"); return false;'＞
Professional Ajax
＜/a＞
这个msnWebSearch对象提供若干取得搜索结果的方法，并负责绘制和放置包含这些数据的HTML。第一个方法是drawResultBox()，它负责绘制HTML。这个方法形成的HTML如下所示：
＜divclass="ajaxWebSearchBox"＞
＜div class="ajaxWebSearchHeading"＞MSN Search Results
＜a class="ajaxWebSearchCloseLink" href="#"＞X＜/a＞
＜/div＞
＜div class="ajaxWebSearchResults"＞
＜a class="ajaxWebSearchLink" target="_new" /＞
＜a class="ajaxWebSearchLink" target="_new" /＞
＜/div＞
＜/div＞
该结果框分为两部分：一个头部和一个结果栏(见图1)。头部告诉用户这个新的搜索窗包含来自一个MSN搜索的结果。它还包含一个"X"用于关闭该小窗口。其结果栏包含块风格的链接，当点击这些链接时将打一个新的窗口。
图1.结果框分为两部分：一个头部和一个结果栏