通过 PHP、XML 和 jQuery 实现即时性(1)
 
- UID
- 1066743
|

通过 PHP、XML 和 jQuery 实现即时性(1)
即时功能入门常用缩略语- Ajax:异步 JavaScript + XML
- CSS:层叠样式表
- DOM:文档对象模型
- HTML:超文本标记语言
- JSON:JavaScript 对象符号
- UI:用户界面
- URL:统一资源定位器
- XML:可扩展标记语言
Google 的即时功能是一种新的搜索增强功能,随着您的键入显示结果,它已经获得了众多瞩目,而且很容易明白这是为什么。获取结果所需做的全部工作就是键入。您无需按 Enter 键来查看结果,然后调整您的搜索并再次按 Enter 键。这都将随着您的键入而发生。如果您还没有这样做,请尝试一下。令人惊讶的是这么小的变化却能在可用性上产生如此大的差异。
这类即时功能的主要好处在于易于实现,尤其当您在使用 jQuery 等客户端工具时(参见 )。在本文中,您要遵循构建简单搜索引擎的流程,而后再为该引擎构建即时搜索用户界面。
这一切都始于获取搜索数据。
设置数据对于本文,我决定搜索 “辛普森一家” 剧集。我创建一个包含所有 “辛普森一家” 剧集、标题、季数、集数、播放日期和每集摘要的 XML 文件(包括在源代码 中)。您可以在 中看到该 XML 的一部分。
清单 1. XML 数据源1
2
3
4
5
6
7
8
9
10
| <?xml version="1.0" encoding="UTF-8"?>
<episodes>
<episode title='Simpsons Roasting on an Open Fire' episode='1' season='1'
aired='17 December 1989'>
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.
</episode>
...
</episodes>
|
它实际上是一个非常大的文件,其大小约为 840K。这应该不令人意外,因为 “辛普森一家” 已经播放了漫长的 22 年。
接下来就是编写一个 PHP 类,可为您执行 XML 解析和搜索。这个类称为 Simpsons,如 中所示。
清单 2. Simpsons 搜索类1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <?php
class Simpsons {
private $episodes = array();
public function __construct() {
$xmlDoc = new DOMDocument();
$xmlDoc->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 将调用该响应程序来检索数据。 |
|
|
|
|
|