PHP 和 AJAX Live Search-6.7PHP和AJAX

閱讀 ?·? 發(fā)布日期 2019-06-29 08:32 ?·? admin

AJAX 可為用戶提供更友好、交互性更強(qiáng)的搜索體驗(yàn)。

AJAX Live Search

在下面的 AJAX 例子中，我們將演示一個(gè)實(shí)時(shí)的搜索。

實(shí)時(shí)的搜索與傳統(tǒng)搜索相比，具有很多優(yōu)勢(shì)：

  • 當(dāng)鍵入數(shù)據(jù)時(shí)，就會(huì)顯示出匹配的結(jié)果
  • 當(dāng)繼續(xù)鍵入數(shù)據(jù)時(shí)，對(duì)結(jié)果進(jìn)行過濾
  • 如果結(jié)果太少，刪除字符就可以獲得更寬的范圍

在下面的文本框中搜索 W3School 的頁面

本例包括四個(gè)元素：

  • 簡單的 HTML 表單
  • JavaScript
  • PHP 頁面
  • XML 文檔

在本例中，結(jié)果在一個(gè) XML 文檔 (links.xml) 中進(jìn)行查找。為了讓這個(gè)例子小而簡單，我們只提供 8 個(gè)結(jié)果。

HTML 表單

這是 HTML 頁面。它包含一個(gè)簡單的 HTML 表單，針對(duì)此表單的 CSS 樣式，以及指向 JavaScript 的鏈接：

<html>
<head>
<script src="livesearch.js"></script> 
<style type="text/css"> 
#livesearch
  { 
  margin:0px;
  width:194px; 
  }
#txt1
  { 
  margin:0px;
  } 
</style>
</head>
<body>

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

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

</body>
</html>

例子解釋 - HTML 表單

正如你看到的，HTML 頁面包含一個(gè)簡單的 HTML 表單，其中的文本框名為 "txt1"。

表單是這樣工作的：

  1. 當(dāng)用戶在文本框中按鍵并松開按鍵時(shí)，會(huì)觸發(fā)一個(gè)事件
  2. 當(dāng)事件觸發(fā)時(shí)，會(huì)執(zhí)行名為 showResult() 的函數(shù)
  3. 表單下面是名為 "livesearch" 的 <div> 元素。它用作 showResult() 所返回?cái)?shù)據(jù)的占位符

JavaScript

JavaScript 代碼存儲(chǔ)在與 HTML 文檔連接的 "livesearch.js" 中：

var xmlHttp

function showResult(str)
{
if (str.length==0)
 { 
 document.getElementById("livesearch").
 innerHTML="";
 document.getElementById("livesearch").
 style.border="0px";
 return
 }

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }

var url="livesearch.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("livesearch").
 innerHTML=xmlHttp.responseText;
 document.getElementById("livesearch").
 style.border="1px solid #A5ACB2";
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

例子解釋：

GetXmlHttpObject 與 PHP 和 AJAX 請(qǐng)求 中的例子相同。

showResult() 函數(shù)

該函數(shù)每當(dāng)一個(gè)字符輸入文本框就會(huì)執(zhí)行一次。

如果文本域中沒有輸入 (str.length == 0)，該函數(shù)把返回字段設(shè)置為空，并刪除周圍的任何邊框。

不過，如果文本域中存在輸入，則函數(shù)執(zhí)行：

  1. 定義發(fā)送到服務(wù)器的 url （文件名）
  2. 把帶有輸入框內(nèi)容的參數(shù) (q) 添加到 url
  3. 添加一個(gè)隨機(jī)數(shù)，以防止服務(wù)器使用緩存文件
  4. 調(diào)用 GetXmlHttpObject 函數(shù)來創(chuàng)建 XMLHTTP 對(duì)象，并在觸發(fā)一個(gè)變化時(shí)告知此函數(shù)執(zhí)行名為 stateChanged 的一個(gè)函數(shù)
  5. 使用給定的 url 來打開 XMLHTTP 對(duì)象
  6. 向服務(wù)器發(fā)送 HTTP 請(qǐng)求

stateChanged() 函數(shù)

每當(dāng) XMLHTTP 對(duì)象的狀態(tài)發(fā)生變化時(shí)，該函數(shù)就會(huì)執(zhí)行。

當(dāng)狀態(tài)變?yōu)?4 (或 "complete") 時(shí)，就會(huì)使用響應(yīng)文本來填充 txtHint 占位符的內(nèi)容，并在返回字段周圍設(shè)置一個(gè)邊框。

PHP 頁面

由 JavaScript 代碼調(diào)用的服務(wù)器頁面是名為 "livesearch.php" 的 PHP 文件。

"livesearch.php" 中的代碼檢查那個(gè) XML 文檔 "links.xml"。該文檔 w3school.com.cn 上的一些頁面的標(biāo)題和 URL。

這些代碼會(huì)搜索 XML 文件中匹配搜索字符串的標(biāo)題，并以 HTML 返回結(jié)果：

<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");

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

//get the q parameter from URL
$q=$_GET["q"];

//lookup all links from the xml file if length of q>0
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)
  {
  //find a link matching the search text
  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>";
    }
   }
  }
 }
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
 {
 $response="no suggestion";
 }
else
 {
 $response=$hint;
 }
 
//output the response
echo $response;
?>

例子解釋：

如果從 JavaScript 送來了任何文本 (strlen($q) > 0)，會(huì)發(fā)生：

  1. PHP 創(chuàng)建 "links.xml" 文件的一個(gè) XML DOM 對(duì)象
  2. 遍歷所有 "title" 元素 (nodetypes = 1)，以便找到匹配 JavaScript 所傳數(shù)據(jù)的 name
  3. 找到包含正確 title 的 link，并設(shè)置為 "$response" 變量。如果找到多于一個(gè)匹配，所有的匹配都會(huì)添加到變量
  4. 如果沒有找到匹配，則把 $response 變量設(shè)置為 "no suggestion"
  5. $result 是送往 "livesearch" 占位符的輸出