當前位置 : IT培訓網 > PHP開發 > php教程 > PHP實戰教程之AJAX實時搜索

PHP實戰教程之AJAX實時搜索

時間:2016-12-08 10:43:14??來源:php培訓網??作者:鄭州IT培訓網??已有:名學員訪問該課程
今天IT培訓網小編給大家分享的是PHP實戰教程之AJAX實時搜索,只有擁有真才實干才能在競爭中脫穎而出。

今天IT培訓網小編給大家分享的是PHP實戰教程之AJAX實時搜索,只有擁有真才實干才能在競爭中脫穎而出。

AJAX 可為用戶提供更友好、交互性更強的搜索體驗。

AJAX Live Search

在下面的實例中,我們將演示一個實時的搜索,在您鍵入數據的同時即可得到搜索結果。

實時的搜索與傳統的搜索相比,具有很多優勢:

當鍵入數據時,就會顯示出匹配的結果

當繼續鍵入數據時,對結果進行過濾

如果結果太少,刪除字符就可以獲得更寬的范圍

在下面的文本框中輸入 "HTML",搜索包含 HTML 的頁面:

 

上面實例中的結果在一個 XML 文件(links.xml)中進行查找。為了讓這個例子小而簡單,我們只提供 6 個結果。

實例解釋 - HTML 頁面

當用戶在上面的輸入框中鍵入字符時,會執行 "showResult()" 函數。該函數由 "onkeyup" 事件觸發:

<html>

<head>

<script>

function showResult(str)

{

if (str.length==0)

{

document.getElementById("livesearch").innerHTML="";

document.getElementById("livesearch").style.border="0px";

return;

}

if (window.XMLHttpRequest)

{// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行

xmlhttp=new XMLHttpRequest();

}

else

{// IE6, IE5 瀏覽器執行

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("livesearch").innerHTML=xmlhttp.responseText;

document.getElementById("livesearch").style.border="1px solid #A5ACB2";

}

}

xmlhttp.open("GET","livesearch.php?q="+str,true);

xmlhttp.send();

}

</script>

</head>

<body>

<form>

<input type="text" size="30" onkeyup="showResult(this.value)">

<div id="livesearch"></div>

</form>

</body>

</html>

源代碼解釋:

如果輸入框是空的(str.length==0),該函數會清空 livesearch 占位符的內容,并退出該函數。

如果輸入框不是空的,那么 showResult() 會執行以下步驟:

創建 XMLHttpRequest 對象

創建在服務器響應就緒時執行的函數

向服務器上的文件發送請求

請注意添加到 URL 末端的參數(q)(包含輸入框的內容)

PHP 文件

上面這段通過 JavaScript 調用的服務器頁面是名為 "livesearch.php" 的 PHP 文件。

"livesearch.php" 中的源代碼會搜索 XML 文件中匹配搜索字符串的標題,并返回結果:

<?php

$xmlDoc=new DOMDocument();

$xmlDoc->load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');

// 從 URL 中獲取參數 q 的值

$q=$_GET["q"];

// 如果 q 參數存在則從 xml 文件中查找數據

if (strlen($q)>0)

{

$hint="";

for($i=0; $i<($x->length); $i++)

{

$y=$x->item($i)->getElementsByTagName('title');

$z=$x->item($i)->getElementsByTagName('url');

if ($y->item(0)->nodeType==1)

{

// 找到匹配搜索的鏈接

if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))

{

if ($hint=="")

{

$hint="<a href='" .

$z->item(0)->childNodes->item(0)->nodeValue .

"' target='_blank'>" .

$y->item(0)->childNodes->item(0)->nodeValue . "</a>";

}

else

{

$hint=$hint . "<br /><a href='" .

$z->item(0)->childNodes->item(0)->nodeValue .

"' target='_blank'>" .

$y->item(0)->childNodes->item(0)->nodeValue . "</a>";

}

}

}

}

}

// 如果沒找到則返回 "no suggestion"

if ($hint=="")

{

$response="no suggestion";

}

else

{

$response=$hint;

}

// 輸出結果

echo $response;

?>

如果 JavaScript 發送了任何文本(即 strlen($q) > 0),則會發生:

加載 XML 文件到新的 XML DOM 對象

遍歷所有的 <title> 元素,以便找到匹配 JavaScript 所傳文本

在 "$response" 變量中設置正確的 URL 和標題。如果找到多于一個匹配,所有的匹配都會添加到變量。

如果沒有找到匹配,則把 $response 變量設置為 "no suggestion"。

PHP實戰教程為大家分享的是PHP基礎知識實例,勤學勤練習,這是學習編程最簡單也是最有效的方式。

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
PHP 教程
1、PHP 基礎
1.1 PHP 簡介
1.2 PHP 安裝
1.3 PHP 語法
1.4 PHP 變量
1.5 PHP echo/print
1.6 PHP 數據類型
1.7 PHP 常量
1.8 PHP 字符串
1.9 PHP 運算符
1.10 PHP If...Else
1.11 PHP Switch
1.12 PHP 數組
1.13 PHP 數組排序
1.14 PHP 超級全局變量
1.15 PHP While 循環
1.16 PHP For 循環
1.17 PHP 函數
1.18 PHP 魔術變量
1.19 PHP 命名空間
1.20 PHP 面向對象
2、PHP 表單
2.1 PHP 表單
2.2 PHP 表單驗證
2.3 PHP 表單 - 必需字段
2.4 PHP 表單 - 驗證郵件和URL
2.5 PHP 完整表單實例
2.6 PHP $_GET 變量
2.7 PHP $_POST 變量
3、PHP 高級教程
3.1 PHP 多維數組
3.2 PHP 日期
3.3 PHP 包含
3.4 PHP 文件
3.5 PHP 文件上傳
3.6 PHP Cookie
3.7 PHP Session
3.8 PHP E-mail
3.9 PHP 安全 E-mail
3.10 PHP Error
3.11 PHP 過濾器
3.12 PHP 高級過濾器
3.13 PHP JSON
4、PHP 7 新特性
4.1 PHP 7 新特性
5、PHP 數據庫
5.1 PHP MySQL 簡介
5.2 PHP MySQL 連接
5.3 PHP MySQL 創建數據庫
5.4 PHP MySQL 創建數據表
5.5 PHP MySQL 插入數據
5.6 PHP MySQL 插入多條數據
5.7 PHP MySQL 預處理語句
5.8 PHP MySQL 讀取數據
5.9 PHP MySQL Where
5.10 PHP MySQL Order By
5.11 PHP MySQL Update
5.12 PHP MySQL Delete
5.13 PHP ODBC
6、PHP XML
6.1 XML Expat Parser
6.2 XML DOM
6.3 XML SimpleXML
7、PHP 與 AJAX
7.1 AJAX 簡介
7.2 AJAX 與PHP
7.3 AJAX 數據庫
7.4 AJAX XML
7.5 AJAX 實時搜索
7.6 AJAX RSS Reader
7.7 AJAX 投票
五月情天