PHP+XML+jQuery如何實現(xiàn)即時功能
這篇文章將為大家詳細(xì)講解有關(guān)PHP+XML+jQuery如何實現(xiàn)即時功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)公司是專業(yè)的衛(wèi)濱網(wǎng)站建設(shè)公司，衛(wèi)濱接單;提供成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行衛(wèi)濱網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!
Google的即時功能是一種新的搜索增強功能，隨著您的鍵入顯示結(jié)果，它已經(jīng)獲得了眾多矚目，而且很容易明白這是為什么。獲取結(jié)果所需做的全部工作就是鍵入。您無需按Enter鍵來查看結(jié)果，然后調(diào)整您的搜索并再次按Enter鍵。這都將隨著您的鍵入而發(fā)生。如果您還沒有這樣做，請嘗試一下。令人驚訝的是這么小的變化卻能在可用性上產(chǎn)生如此大的差異。
這類即時功能的主要好處在于易于實現(xiàn)，尤其當(dāng)您在使用jQuery等客戶端工具時。在本文中，您要遵循構(gòu)建簡單搜索引擎的流程，而后再為該引擎構(gòu)建即時搜索用戶界面。這一切都始于獲取搜索數(shù)據(jù)。
設(shè)置數(shù)據(jù)
對于本文，我決定搜索“辛普森一家”劇集。我創(chuàng)建一個包含所有 “辛普森一家” 劇集、標(biāo)題、季數(shù)、集數(shù)、播放日期和每集摘要的 XML 文件（包括在源代碼 下載 中）。您可以在清單 1中看到該XML的一部分。
清單1. XML數(shù)據(jù)源 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。這應(yīng)該不令人意外，因為 “辛普森一家” 已經(jīng)播放了漫長的22年。接下來就是編寫一個PHP類，可為您執(zhí)行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; } } ?>該類的構(gòu)造函數(shù)使用對于PHP來說標(biāo)準(zhǔn)的XML DOM庫讀取劇集信息的XML文件。它迭代根節(jié)點的所有子節(jié)點并提取它們的季數(shù)、標(biāo)題、播放日期和劇集屬性，以及包含摘要的節(jié)點的文本。然后將所有數(shù)據(jù)作為一個哈希表附加到劇集數(shù)組，該數(shù)組是一個成員變量。
然后，find函數(shù)搜索劇集列表以便使用與標(biāo)題和摘要匹配的簡單正則表達(dá)式來查找匹配項。任何匹配的劇集都被附加到一個數(shù)組，然后返回給調(diào)用方。如果數(shù)組為空，則沒有發(fā)現(xiàn)匹配項。
現(xiàn)在有了數(shù)據(jù)，下一步就是開始構(gòu)建Ajax響應(yīng)程序，您的即時UI將調(diào)用該響應(yīng)程序來檢索數(shù)據(jù)。
創(chuàng)建Ajax響應(yīng)頁面
第一個版本的UI針對Ajax請求使用HTML響應(yīng)。此方法是實現(xiàn)即時UI的最簡單的方式。即時UI web頁面采用搜索關(guān)鍵詞并使用該關(guān)鍵詞對服務(wù)器發(fā)出Ajax 請求。然后，服務(wù)器格式化組成該響應(yīng)的HTML塊并將其返回到頁面。在一個簡單的調(diào)用中，即時UI web頁面中的代碼將使用更新的 HTML 替換該頁面的一部分。
在本文的后面，我會演示使用來自服務(wù)器的XML響應(yīng)和JSON響應(yīng)，但是現(xiàn)在，為了簡單起見，我們從HTML版開始。
您首先需要的是HTML響應(yīng)頁面。此頁面接受來自請求的查詢字符串。然后使用該字符串調(diào)用Simpsons類來搜索劇集。接著，將已返回的劇集數(shù)組格式化 HTML。此代碼位于清單 3中。
清單 3. HTML Ajax 響應(yīng)頁面 find( $_REQUEST['q'] ); if ( count( $episodes ) == 0 ) { ?> No results found - Season Episode - Aired on
|
在頂部，清單 3包括Simpsons類。然后該代碼創(chuàng)建該類的一個新實例并進(jìn)行find調(diào)用。之后它會查看響應(yīng)是否為空，以及是否返回 “No Results Found”；否則，它遍歷這些結(jié)果并組成一個結(jié)果表。
為了測試該頁面，只需轉(zhuǎn)到您的Web瀏覽器并請求該網(wǎng)頁。您可以在圖 1中看到輸出。
此時，您擁有開始構(gòu)建即時搜索UI所需要的所有東西。
構(gòu)建即時搜索UI
使用JavaScript jQuery庫可以輕松構(gòu)建即時搜索UI。查看清單 4，您就可以明白我的意思。
清單 4. 使用HTML響應(yīng)的即時頁面 Instant Search - HTML Based Simpsons Search:
在頁面的頂部，清單 4包括jQuery庫和CSS樣式表，以使輸出更美觀。頁面的主體包括搜索關(guān)鍵詞的輸入字段和保存此輸出的結(jié)果div。
工作的大部分都在頁面底部的 JavaScript 部分完成。它首先調(diào)用文檔中的 ready 函數(shù)。此調(diào)用可確保在頁面準(zhǔn)備就緒前都不執(zhí)行內(nèi)部 JavaScript。內(nèi)部 JavaScript 使用搜索關(guān)鍵詞輸出對象中的 keyup 函數(shù)來監(jiān)控搜索關(guān)鍵詞字段中的關(guān)鍵字鍵入。在文本字段變更時，將對服務(wù)器調(diào)用 Ajax get 方法。通過使用 html 函數(shù)，來自此調(diào)用的數(shù)據(jù)響應(yīng)將用于填充結(jié)果元素。
如果JavaScript代碼看上去像線路噪聲，沒關(guān)系。這實際上就是JavaScript的技術(shù)現(xiàn)狀，該代碼需要復(fù)查線路，所以代碼規(guī)模最好保持得小一些。
雖然您可以在沒有jQuery庫的情況下完成這些工作，但是使用該庫的價值在于，該代碼非常簡潔且所有跨平臺工作都已經(jīng)為您完成。您不必?fù)?dān)心Internet Explorer與Safari或Firefox；只需編寫一次代碼然后將其用于任何地方。
要測試該庫，請在Web瀏覽器中建立即時搜索UI。在圖 2中，您可以看到類似的東西。
圖2顯示了我輸入少量字符后的界面。在我鍵入關(guān)鍵詞 “frink” 之后，您可以在 圖 3 中看到結(jié)果。
圖3顯示了在標(biāo)題或兩集概要中出現(xiàn) “frink”?？尚Φ臄?shù)據(jù)！Frink教授（到目前為止節(jié)目中的最佳角色）出現(xiàn)在不止兩集中。但這仍是非常奇妙。本地計算機(jī)上的響應(yīng)時間是非常出色的，即使服務(wù)器代碼解析是通過840K的XML。
現(xiàn)在您可能想通過在每一個按鍵之間放置一個延遲并在您真正發(fā)出請求時來控制請求的數(shù)量。在清單 5中，更新的代碼可以執(zhí)行此操作。
清單 5. 使用帶有延遲的 HTML 響應(yīng)的即時頁面 Instant Search - HTML Based With Delay Simpsons Search:
此代碼在用戶按鍵時創(chuàng)建一個計時器。當(dāng)該計時器在 200 毫秒后停止時，請求發(fā)出。如果另外一次擊鍵在計時器停止之前，則原來的計時器將被取消，同時創(chuàng)建一個新的計時器。其結(jié)果就是在用戶停止了鍵入之后，計時器停止 200 毫秒。雖然該界面始終感覺像原來的，但是向服務(wù)器發(fā)出請求的數(shù)量會大幅減少，尤其是在用戶快速鍵入的時候。
雖然我們可以到此為止，但是實際上有另外兩種方式來進(jìn)行此即時過程。
遷移到XML
第一種方式是使用XML作為您從服務(wù)器到客戶端的傳輸語法。此處的想法是服務(wù)器提供一個通用XML端點，任何流程都可以使用該端點來執(zhí)行查詢，并且您的客戶端足夠智能，能夠讀取XML并以其想要的方式來格式化它。
要變成XML，首先要創(chuàng)建如清單 6中所示的新服務(wù)器頁面。
清單6. XML Ajax頁面 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é)點附加到其上，從而保存所有返回的數(shù)據(jù)。然后在腳本的末尾，它只是將XML DOM保存為字符串。請注意在腳本的頂部，在導(dǎo)出XML而非HTML時，還要將內(nèi)容類型設(shè)置為文本/xml。
如果在您的Web瀏覽器中導(dǎo)航到此頁面，則您會看到類似圖 4中的情況。
不過，一些瀏覽器可能以更結(jié)構(gòu)化的方式顯示已返回的文本。如果您想查看原始的源XML，則您可以選擇View - Source以便看到類似圖 5中的窗口。
如您所見，該腳本創(chuàng)建了一些良好格式化的XML，準(zhǔn)備好供新的客戶端代碼使用。
解析XML（而不是直接使用 HTML）的新客戶端代碼位于清單 7中。
清單 7. 使用 XML 的即時搜索頁面 Instant Search - XML Based Simpsons Search:
用于監(jiān)控?fù)翩I和發(fā)出Ajax請求的客戶端代碼幾乎完全一樣。所不同的是不同的URL獲取XML數(shù)據(jù)而不是HTML數(shù)據(jù)。
在數(shù)據(jù)返回以后，該代碼使用jQuery來尋找所有劇集標(biāo)簽。然后它可格式化大量XML并使用replaceWith函數(shù)來用新表替換舊表。由于使用了jQuery，此代碼比在使用瀏覽器的原生 DOM 功能時更容易使用。
傳輸數(shù)據(jù)的另一種方式是通過JSON（JavaScript對象符號）。
遷移到JSON
在Web 2.0的世界中，JSON是一種非常流行的移動數(shù)據(jù)的方式。它小巧、方便、快捷，便于瀏覽器讀取，因為需要做的所有操作就是評估已返回的JavaScript代碼。創(chuàng)建JSON也很簡單，就如您在清單 8中的Ajax搜索頁面的JSON版本中所見的那樣。
清單8. JSON Ajax頁面 find( $_REQUEST['q'] ) ); ?>
您只需使用json_encode函數(shù)來將已返回的數(shù)組轉(zhuǎn)變?yōu)镴SON代碼。如果您好奇的話，這里也存在一個可將JSON轉(zhuǎn)回為PHP基本類型的json_decode函數(shù)。大多數(shù)流行語言都具有與這里一樣簡單的JSON機(jī)制，可以將基本數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)化為JSON，或者轉(zhuǎn)換出JSON。
如果您在瀏覽器中查看JSON頁面，則您會看到類似圖 6中的響應(yīng)頁面。
雖然本頁面可能不會太吸引人們的目光，但是對于瀏覽器中的JavaScript解譯器來說，此頁面看起來非常易于閱讀。用于讀取 JSON 格式化輸出的相應(yīng)的即時UI web代碼位于清單 9中。
清單 9. JSON 即時搜索 UI Instant Search - JSON Based Simpsons Search:
此代碼非常類似于 XML 代碼，不同的是您可以對返回的數(shù)組使用 jQuery each 函數(shù)，然后使用點符號來訪問數(shù)據(jù)中的所有重要關(guān)鍵字（也就是說，標(biāo)題、劇集、摘要等等）。
現(xiàn)在您具有：可以用作您自己的工作起始點的即時搜索功能的初步實現(xiàn)。
與Google的開發(fā)人員所做的相比，此實現(xiàn)具有三個主要區(qū)別。首先是縮放。他們每天要處理數(shù)十億的搜索，現(xiàn)在通過每一次擊鍵他們可處理數(shù)十億單獨的小搜索。雖然存在許多有關(guān)這方面的問題和解決方案，但是在這種情況下您至少有一件事情要去做 — 瀏覽器緩存。如果用戶鍵入相同的關(guān)鍵詞兩次，由于瀏覽器緩存的緣故，實際上僅進(jìn)行一個請求，因為第二次發(fā)出請求時瀏覽器返回緩存的數(shù)據(jù)。
Google 所作的另外一件事情是預(yù)取結(jié)果。例如，如果您鍵入 “mov”，則暗示您正在尋找 “movies”，進(jìn)行此搜索并通過用于您缺少的 “ies” 的灰色文本指示這點。
第三個區(qū)別是對于分頁的支持，這相當(dāng)容易解決。您所要做的就是在頁面的底部為頁面鏈接添加一些 JavaScript，然后在用戶單擊以從第一頁瀏覽到任何隨后頁面時調(diào)用此腳本。
關(guān)于“PHP+XML+jQuery如何實現(xiàn)即時功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
網(wǎng)站欄目：PHP+XML+jQuery如何實現(xiàn)即時功能
分享地址：
http://weahome.cn/article/pesdci.html
重慶分公司
重慶分公司
