PHP+XML+jQuery實(shí)現(xiàn)即時(shí)功能
Google的即時(shí)功能是一種新的搜索增強(qiáng)功能，隨著您的鍵入顯示結(jié)果，它已經(jīng)獲得了眾多矚目，而且很容易明白這是為什么。獲取結(jié)果所需做的全部工作就是鍵入。您無(wú)需按Enter鍵來(lái)查看結(jié)果，然后調(diào)整您的搜索并再次按Enter鍵。這都將隨著您的鍵入而發(fā)生。如果您還沒有這樣做，請(qǐng)嘗試一下。令人驚訝的是這么小的變化卻能在可用性上產(chǎn)生如此大的差異。
這類即時(shí)功能的主要好處在于易于實(shí)現(xiàn)，尤其當(dāng)您在使用jQuery等客戶端工具時(shí)。在本文中，您要遵循構(gòu)建簡(jiǎn)單搜索引擎的流程，而后再為該引擎構(gòu)建即時(shí)搜索用戶界面。這一切都始于獲取搜索數(shù)據(jù)。
設(shè)置數(shù)據(jù)
對(duì)于本文，我決定搜索“辛普森一家”劇集。我創(chuàng)建一個(gè)包含所有 “辛普森一家” 劇集、標(biāo)題、季數(shù)、集數(shù)、播放日期和每集摘要的 XML 文件（包括在源代碼 下載 中）。您可以在清單 1中看到該XML的一部分。
- 清單1. XML數(shù)據(jù)源
- <?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>
它實(shí)際上是一個(gè)非常大的文件，其大小約為840K。這應(yīng)該不令人意外，因?yàn)?“辛普森一家” 已經(jīng)播放了漫長(zhǎng)的22年。接下來(lái)就是編寫一個(gè)PHP類，可為您執(zhí)行XML解析和搜索。這個(gè)類稱為Simpsons，如清單 2中所示。
- 清單 2. Simpsons 搜索類
- <?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;
- }
- }
- ?>
該類的構(gòu)造函數(shù)使用對(duì)于PHP來(lái)說(shuō)標(biāo)準(zhǔn)的XML DOM庫(kù)讀取劇集信息的XML文件。它迭代根節(jié)點(diǎn)的所有子節(jié)點(diǎn)并提取它們的季數(shù)、標(biāo)題、播放日期和劇集屬性，以及包含摘要的節(jié)點(diǎn)的文本。然后將所有數(shù)據(jù)作為一個(gè)哈希表附加到劇集數(shù)組，該數(shù)組是一個(gè)成員變量。
然后，find函數(shù)搜索劇集列表以便使用與標(biāo)題和摘要匹配的簡(jiǎn)單正則表達(dá)式來(lái)查找匹配項(xiàng)。任何匹配的劇集都被附加到一個(gè)數(shù)組，然后返回給調(diào)用方。如果數(shù)組為空，則沒有發(fā)現(xiàn)匹配項(xiàng)。
現(xiàn)在有了數(shù)據(jù)，下一步就是開始構(gòu)建Ajax響應(yīng)程序，您的即時(shí)UI將調(diào)用該響應(yīng)程序來(lái)檢索數(shù)據(jù)。
#p#
創(chuàng)建Ajax響應(yīng)頁(yè)面
第一個(gè)版本的UI針對(duì)Ajax請(qǐng)求使用HTML響應(yīng)。此方法是實(shí)現(xiàn)即時(shí)UI的最簡(jiǎn)單的方式。即時(shí)UI web頁(yè)面采用搜索關(guān)鍵詞并使用該關(guān)鍵詞對(duì)服務(wù)器發(fā)出Ajax 請(qǐng)求。然后，服務(wù)器格式化組成該響應(yīng)的HTML塊并將其返回到頁(yè)面。在一個(gè)簡(jiǎn)單的調(diào)用中，即時(shí)UI web頁(yè)面中的代碼將使用更新的 HTML 替換該頁(yè)面的一部分。
在本文的后面，我會(huì)演示使用來(lái)自服務(wù)器的XML響應(yīng)和JSON響應(yīng)，但是現(xiàn)在，為了簡(jiǎn)單起見，我們從HTML版開始。
您首先需要的是HTML響應(yīng)頁(yè)面。此頁(yè)面接受來(lái)自請(qǐng)求的查詢字符串。然后使用該字符串調(diào)用Simpsons類來(lái)搜索劇集。接著，將已返回的劇集數(shù)組格式化 HTML。此代碼位于清單 3中。
- 清單 3. HTML Ajax 響應(yīng)頁(yè)面
- <?php
- include 'Simpsons.php';
- $s = new Simpsons();
- $episodes = $s->find( $_REQUEST['q'] );
- if ( count( $episodes ) == 0 ) {
- ?>
- No results found
- <?php
- } else {
- ?>
- <table>
- <?php foreach( $episodes as $e ) { ?>
- <tr><td class="episode"><b><?php echo( $e['title'] )
- ?></b> -
- Season <?php echo( $e['season'] ) ?>
- Episode <?php echo( $e['episode'] ) ?> -
- Aired on <?php echo( $e['aired'] ) ?></td></tr>
- <tr><td class="summary"><?php echo( $e['summary'] )
- ?></td></tr>
- <?php } ?>
- </table>
- <?php
- }
- ?>
在頂部，清單 3包括Simpsons類。然后該代碼創(chuàng)建該類的一個(gè)新實(shí)例并進(jìn)行find調(diào)用。之后它會(huì)查看響應(yīng)是否為空，以及是否返回 “No Results Found”；否則，它遍歷這些結(jié)果并組成一個(gè)結(jié)果表。
為了測(cè)試該頁(yè)面，只需轉(zhuǎn)到您的Web瀏覽器并請(qǐng)求該網(wǎng)頁(yè)。您可以在圖 1中看到輸出。
此時(shí)，您擁有開始構(gòu)建即時(shí)搜索UI所需要的所有東西。
#p#
構(gòu)建即時(shí)搜索UI
使用JavaScript jQuery庫(kù)可以輕松構(gòu)建即時(shí)搜索UI。查看清單 4，您就可以明白我的意思。
- 清單 4. 使用HTML響應(yīng)的即時(shí)頁(yè)面
- <html><head>
- <script src="jquery-1.4.2.min.js"></script>
- <link rel="stylesheet" href="styles.css" type="text/css" />
- <title>Instant Search - HTML Based</title>
- </head>
- <body>
- Simpsons Search: <input type="text" id="term" />
- <div id="results">
- </div>
- <script>
- $(document).ready(function() {
- $('#term').keyup(function() {
- $.get('search_html.php?q='+escape($('#term').val()), function(data) {
- $('#results').html(data);
- } );
- } );
- } );
- </script>
- </body>
- </html>
在頁(yè)面的頂部，清單 4包括jQuery庫(kù)和CSS樣式表，以使輸出更美觀。頁(yè)面的主體包括搜索關(guān)鍵詞的輸入字段和保存此輸出的結(jié)果div。
工作的大部分都在頁(yè)面底部的 JavaScript 部分完成。它首先調(diào)用文檔中的 ready 函數(shù)。此調(diào)用可確保在頁(yè)面準(zhǔn)備就緒前都不執(zhí)行內(nèi)部 JavaScript。內(nèi)部 JavaScript 使用搜索關(guān)鍵詞輸出對(duì)象中的 keyup 函數(shù)來(lái)監(jiān)控搜索關(guān)鍵詞字段中的關(guān)鍵字鍵入。在文本字段變更時(shí)，將對(duì)服務(wù)器調(diào)用 Ajax get 方法。通過(guò)使用 html 函數(shù)，來(lái)自此調(diào)用的數(shù)據(jù)響應(yīng)將用于填充結(jié)果元素。
如果JavaScript代碼看上去像線路噪聲，沒關(guān)系。這實(shí)際上就是JavaScript的技術(shù)現(xiàn)狀，該代碼需要復(fù)查線路，所以代碼規(guī)模最好保持得小一些。
雖然您可以在沒有jQuery庫(kù)的情況下完成這些工作，但是使用該庫(kù)的價(jià)值在于，該代碼非常簡(jiǎn)潔且所有跨平臺(tái)工作都已經(jīng)為您完成。您不必?fù)?dān)心Internet Explorer與Safari或Firefox；只需編寫一次代碼然后將其用于任何地方。
要測(cè)試該庫(kù)，請(qǐng)?jiān)赪eb瀏覽器中建立即時(shí)搜索UI。在圖 2中，您可以看到類似的東西。
圖2顯示了我輸入少量字符后的界面。在我鍵入關(guān)鍵詞 “frink” 之后，您可以在 圖 3 中看到結(jié)果。
圖3顯示了在標(biāo)題或兩集概要中出現(xiàn) “frink”。可笑的數(shù)據(jù)！Frink教授（到目前為止節(jié)目中的最佳角色）出現(xiàn)在不止兩集中。但這仍是非常奇妙。本地計(jì)算機(jī)上的響應(yīng)時(shí)間是非常出色的，即使服務(wù)器代碼解析是通過(guò)840K的XML。
現(xiàn)在您可能想通過(guò)在每一個(gè)按鍵之間放置一個(gè)延遲并在您真正發(fā)出請(qǐng)求時(shí)來(lái)控制請(qǐng)求的數(shù)量。在清單 5中，更新的代碼可以執(zhí)行此操作。
- 清單 5. 使用帶有延遲的 HTML 響應(yīng)的即時(shí)頁(yè)面
- <html><head>
- <link rel="stylesheet" href="styles.css" type="text/css">
- <script src="jquery-1.4.2.min.js"></script>
- <title>Instant Search - HTML Based With Delay</title>
- </head>
- <body>
- Simpsons Search: <input type="text" id="term" />
- <div id="results">
- </div>
- <script>
- delayTimer = null;
- function getResults() {
- $.get('search_html.php?q='+escape($('#term').val()), function(data) {
- $('#results').html(data);
- } );
- delayTimer = null;
- }
- $(document).ready(function() {
- $('#term').keyup(function() {
- if ( delayTimer )
- window.clearTimeout( delayTimer );
- delayTimer = window.setTimeout( getResults, 200 );
- } );
- } );
- </script>
- </body>
- </html>
此代碼在用戶按鍵時(shí)創(chuàng)建一個(gè)計(jì)時(shí)器。當(dāng)該計(jì)時(shí)器在 200 毫秒后停止時(shí)，請(qǐng)求發(fā)出。如果另外一次擊鍵在計(jì)時(shí)器停止之前，則原來(lái)的計(jì)時(shí)器將被取消，同時(shí)創(chuàng)建一個(gè)新的計(jì)時(shí)器。其結(jié)果就是在用戶停止了鍵入之后，計(jì)時(shí)器停止 200 毫秒。雖然該界面始終感覺像原來(lái)的，但是向服務(wù)器發(fā)出請(qǐng)求的數(shù)量會(huì)大幅減少，尤其是在用戶快速鍵入的時(shí)候。
雖然我們可以到此為止，但是實(shí)際上有另外兩種方式來(lái)進(jìn)行此即時(shí)過(guò)程。
#p#
遷移到XML
第一種方式是使用XML作為您從服務(wù)器到客戶端的傳輸語(yǔ)法。此處的想法是服務(wù)器提供一個(gè)通用XML端點(diǎn)，任何流程都可以使用該端點(diǎn)來(lái)執(zhí)行查詢，并且您的客戶端足夠智能，能夠讀取XML并以其想要的方式來(lái)格式化它。
要變成XML，首先要?jiǎng)?chuàng)建如清單 6中所示的新服務(wù)器頁(yè)面。
- 清單6. XML Ajax頁(yè)面
- <?php
- include 'Simpsons.php';
- header( 'Content-type: text/xml' );
- $s = new Simpsons();
- $doc = new DOMDocument();
- $root = $doc->createElement( 'episodes' );
- $doc->appendChild( $root );
- foreach( $s->find( $_REQUEST['q'] ) as $episode ) {
- $el = $doc->createElement( 'episode' );
- $el->setAttribute( 'title', $episode['title'] );
- $el->setAttribute( 'episode', $episode['episode'] );
- $el->setAttribute( 'season', $episode['season'] );
- $el->setAttribute( 'aired', $episode['aired'] );
- $tn = $doc->createTextNode( $episode['summary'] );
- $el->appendChild( $tn );
- $root->appendChild( $el );
- }
- print $doc->saveXML();
- ?>
雖然搜索仍然一樣，但是您格式化結(jié)果的方式變了。現(xiàn)在，該代碼創(chuàng)建了XML文檔并將節(jié)點(diǎn)附加到其上，從而保存所有返回的數(shù)據(jù)。然后在腳本的末尾，它只是將XML DOM保存為字符串。請(qǐng)注意在腳本的頂部，在導(dǎo)出XML而非HTML時(shí)，還要將內(nèi)容類型設(shè)置為文本/xml。
如果在您的Web瀏覽器中導(dǎo)航到此頁(yè)面，則您會(huì)看到類似圖 4中的情況。
不過(guò)，一些瀏覽器可能以更結(jié)構(gòu)化的方式顯示已返回的文本。如果您想查看原始的源XML，則您可以選擇View - Source以便看到類似圖 5中的窗口。
如您所見，該腳本創(chuàng)建了一些良好格式化的XML，準(zhǔn)備好供新的客戶端代碼使用。
解析XML（而不是直接使用 HTML）的新客戶端代碼位于清單 7中。
- 清單 7. 使用 XML 的即時(shí)搜索頁(yè)面
- <html><head>
- <script src="jquery-1.4.2.min.js"></script>
- <link rel="stylesheet" href="styles.css" type="text/css" />
- <title>Instant Search - XML Based</title>
- </head>
- <body>
- Simpsons Search: <input type="text" id="term" />
- <table id="results">
- </table>
- <script>
- $(document).ready( function() {
- $('#term').keyup( function() {
- $.get('search_xml.php?q='+escape($('#term').val()), function(data) {
- html = '<table id="results">';
- $(data).find('episode').each( function() {
- var ep = $(this);
- html += '<tr><td class="episode"><b>'+
- ep.attr('title')+'</b> ';
- html += 'Season '+ep.attr('season')+' ';
- html += 'Episode '+ep.attr('episode')+' ';
- html += 'Aired '+ep.attr('aired')+'</td></tr>';
- html += '<tr><td class="summary">'+
- ep.text()+'</td></tr>';
- } );
- html += '</html>';
- $('#results').replaceWith( html );
- } );
- } );
- } );
- </script>
- </body>
- </html>
用于監(jiān)控?fù)翩I和發(fā)出Ajax請(qǐng)求的客戶端代碼幾乎完全一樣。所不同的是不同的URL獲取XML數(shù)據(jù)而不是HTML數(shù)據(jù)。
在數(shù)據(jù)返回以后，該代碼使用jQuery來(lái)尋找所有劇集標(biāo)簽。然后它可格式化大量XML并使用replaceWith函數(shù)來(lái)用新表替換舊表。由于使用了jQuery，此代碼比在使用瀏覽器的原生 DOM 功能時(shí)更容易使用。
傳輸數(shù)據(jù)的另一種方式是通過(guò)JSON（JavaScript對(duì)象符號(hào)）。
#p#
遷移到JSON
在Web 2.0的世界中，JSON是一種非常流行的移動(dòng)數(shù)據(jù)的方式。它小巧、方便、快捷，便于瀏覽器讀取，因?yàn)樾枰龅乃胁僮骶褪窃u(píng)估已返回的JavaScript代碼。創(chuàng)建JSON也很簡(jiǎn)單，就如您在清單 8中的Ajax搜索頁(yè)面的JSON版本中所見的那樣。
- 清單8. JSON Ajax頁(yè)面
- <?php
- include 'Simpsons.php';
- header( 'Content-type: application/json' );
- $s = new Simpsons();
- print json_encode( $s->find( $_REQUEST['q'] ) );
- ?>
您只需使用json_encode函數(shù)來(lái)將已返回的數(shù)組轉(zhuǎn)變?yōu)镴SON代碼。如果您好奇的話，這里也存在一個(gè)可將JSON轉(zhuǎn)回為PHP基本類型的json_decode函數(shù)。大多數(shù)流行語(yǔ)言都具有與這里一樣簡(jiǎn)單的JSON機(jī)制，可以將基本數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)化為JSON，或者轉(zhuǎn)換出JSON。
如果您在瀏覽器中查看JSON頁(yè)面，則您會(huì)看到類似圖 6中的響應(yīng)頁(yè)面。
雖然本頁(yè)面可能不會(huì)太吸引人們的目光，但是對(duì)于瀏覽器中的JavaScript解譯器來(lái)說(shuō)，此頁(yè)面看起來(lái)非常易于閱讀。用于讀取 JSON 格式化輸出的相應(yīng)的即時(shí)UI web代碼位于清單 9中。
- 清單 9. JSON 即時(shí)搜索 UI
- <html><head>
- <script src="jquery-1.4.2.min.js"></script>
- <link rel="stylesheet" href="styles.css" type="text/css" />
- <title>Instant Search - JSON Based</title>
- </head>
- <body>
- Simpsons Search: <input type="text" id="term" />
- <table id="results">
- </table>
- <script>
- $(document).ready( function() {
- $('#term').keyup( function() {
- $.get('search_json.php?q='+escape($('#term').val()), function(data) {
- html = '<table id="results">';
- $.each( data, function( ind, ep ) {
- html += '<tr><td class="episode"><b>'+ep.title+'</b> ';s
- html += 'Season '+ep.season+' ';
- html += 'Episode '+ep.episode+' ';
- html += 'Aired '+ep.aired+'</td></tr>';
- html += '<tr><td class="summary">'+ep.summary+'</td></tr>';
- } );
- html += '</html>';
- $('#results').replaceWith( html );
- } );
- } );
- } );
- </script>
- </body>
- </html>
此代碼非常類似于 XML 代碼，不同的是您可以對(duì)返回的數(shù)組使用 jQuery each 函數(shù)，然后使用點(diǎn)符號(hào)來(lái)訪問(wèn)數(shù)據(jù)中的所有重要關(guān)鍵字（也就是說(shuō)，標(biāo)題、劇集、摘要等等）。
現(xiàn)在您具有：可以用作您自己的工作起始點(diǎn)的即時(shí)搜索功能的初步實(shí)現(xiàn)。
與Google的開發(fā)人員所做的相比，此實(shí)現(xiàn)具有三個(gè)主要區(qū)別。首先是縮放。他們每天要處理數(shù)十億的搜索，現(xiàn)在通過(guò)每一次擊鍵他們可處理數(shù)十億單獨(dú)的小搜索。雖然存在許多有關(guān)這方面的問(wèn)題和解決方案，但是在這種情況下您至少有一件事情要去做 — 瀏覽器緩存。如果用戶鍵入相同的關(guān)鍵詞兩次，由于瀏覽器緩存的緣故，實(shí)際上僅進(jìn)行一個(gè)請(qǐng)求，因?yàn)榈诙伟l(fā)出請(qǐng)求時(shí)瀏覽器返回緩存的數(shù)據(jù)。
Google 所作的另外一件事情是預(yù)取結(jié)果。例如，如果您鍵入 “mov”，則暗示您正在尋找 “movies”，進(jìn)行此搜索并通過(guò)用于您缺少的 “ies” 的灰色文本指示這點(diǎn)。
第三個(gè)區(qū)別是對(duì)于分頁(yè)的支持，這相當(dāng)容易解決。您所要做的就是在頁(yè)面的底部為頁(yè)面鏈接添加一些 JavaScript，然后在用戶單擊以從第一頁(yè)瀏覽到任何隨后頁(yè)面時(shí)調(diào)用此腳本。
結(jié)束語(yǔ)
Google的即時(shí)UI功能真的很即時(shí)。它是革命性的嗎？不是。但是它是對(duì)可用性具有深遠(yuǎn)影響的一小步。正如您從本文中看到的，通過(guò)使用像XML、PHP和jQuery這樣的標(biāo)準(zhǔn)工具，這些行為的初步階段并不難實(shí)現(xiàn)。
【編輯推薦】
