PHP+XML+jQuery如何实现即时功能

这篇文章将为大家详细讲解有关PHP+XML+jQuery如何实现即时功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司是专业的卫滨网站建设公司，卫滨接单;提供成都网站设计、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行卫滨网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

Google的即时功能是一种新的搜索增强功能，随着您的键入显示结果，它已经获得了众多瞩目，而且很容易明白这是为什么。获取结果所需做的全部工作就是键入。您无需按Enter键来查看结果，然后调整您的搜索并再次按Enter键。这都将随着您的键入而发生。如果您还没有这样做，请尝试一下。令人惊讶的是这么小的变化却能在可用性上产生如此大的差异。

这类即时功能的主要好处在于易于实现，尤其当您在使用jQuery等客户端工具时。在本文中，您要遵循构建简单搜索引擎的流程，而后再为该引擎构建即时搜索用户界面。这一切都始于获取搜索数据。

设置数据

对于本文，我决定搜索“辛普森一家”剧集。我创建一个包含所有 “辛普森一家” 剧集、标题、季数、集数、播放日期和每集摘要的 XML 文件（包括在源代码 下载 中）。您可以在清单 1中看到该XML的一部分。

清单1. XML数据源            Christmas seems doomed for the Simpson family when Homer receives no      Christmas Bonus. Homer becomes a mall Santa Claus, hoping to make money and      bring Marge, Bart, Lisa, and baby Maggie, a happy holiday.        ...  

它实际上是一个非常大的文件，其大小约为840K。这应该不令人意外，因为 “辛普森一家” 已经播放了漫长的22年。接下来就是编写一个PHP类，可为您执行XML解析和搜索。这个类称为Simpsons，如清单 2中所示。

清单 2. Simpsons 搜索类  load("simpsons.xml");   foreach ($xmlDoc->documentElement->childNodes as $episode)     {       if ( $episode->nodeType == 1 ) {        $this->episodes []= array(         'episode' => $episode->getAttribute( 'episode' ),        'season' => $episode->getAttribute( 'season' ),        'title' => $episode->getAttribute( 'title' ),        'aired' => $episode->getAttribute( 'aired' ),        'summary' => $episode->nodeValue );       }     }   }   public function find( $q ) {     $found = array();     $re = "/".$q."/i";     foreach( $this->episodes as $episode ) {       if ( preg_match( $re, $episode['summary'] ) ||           preg_match( $re, $episode['title'] ) ) {       $found []= $episode;     }     }     return $found;   }  }  ?>

该类的构造函数使用对于PHP来说标准的XML DOM库读取剧集信息的XML文件。它迭代根节点的所有子节点并提取它们的季数、标题、播放日期和剧集属性，以及包含摘要的节点的文本。然后将所有数据作为一个哈希表附加到剧集数组，该数组是一个成员变量。

然后，find函数搜索剧集列表以便使用与标题和摘要匹配的简单正则表达式来查找匹配项。任何匹配的剧集都被附加到一个数组，然后返回给调用方。如果数组为空，则没有发现匹配项。

现在有了数据，下一步就是开始构建Ajax响应程序，您的即时UI将调用该响应程序来检索数据。

创建Ajax响应页面

第一个版本的UI针对Ajax请求使用HTML响应。此方法是实现即时UI的最简单的方式。即时UI web页面采用搜索关键词并使用该关键词对服务器发出Ajax 请求。然后，服务器格式化组成该响应的HTML块并将其返回到页面。在一个简单的调用中，即时UI web页面中的代码将使用更新的 HTML 替换该页面的一部分。

在本文的后面，我会演示使用来自服务器的XML响应和JSON响应，但是现在，为了简单起见，我们从HTML版开始。

您首先需要的是HTML响应页面。此页面接受来自请求的查询字符串。然后使用该字符串调用Simpsons类来搜索剧集。接着，将已返回的剧集数组格式化 HTML。此代码位于清单 3中。

清单 3. HTML Ajax 响应页面  find( $_REQUEST['q'] );  if ( count( $episodes ) == 0 ) {  ?> No results found      -    Season     Episode  -    Aired on     

在顶部，清单 3包括Simpsons类。然后该代码创建该类的一个新实例并进行find调用。之后它会查看响应是否为空，以及是否返回 “No Results Found”；否则，它遍历这些结果并组成一个结果表。

为了测试该页面，只需转到您的Web浏览器并请求该网页。您可以在图 1中看到输出。

此时，您拥有开始构建即时搜索UI所需要的所有东西。

构建即时搜索UI

使用JavaScript jQuery库可以轻松构建即时搜索UI。查看清单 4，您就可以明白我的意思。

清单 4. 使用HTML响应的即时页面        Simpsons Search: