Tìm kiếm trực tiếp AJAX và PHP

AJAX có thể cung cấp cho người dùng trải nghiệm tìm kiếm thân thiện và tương tác hơn.

Tìm kiếm trực tuyến AJAX

Trong ví dụ AJAX dưới đây, chúng ta sẽ演示 một tìm kiếm trực tuyến.

So với tìm kiếm truyền thống, tìm kiếm trực tuyến có nhiều ưu điểm:

  • Kết quả sẽ được hiển thị khi nhập dữ liệu
  • Kết quả sẽ được lọc khi tiếp tục nhập dữ liệu
  • Nếu kết quả quá ít, bạn có thể xóa ký tự để có phạm vi rộng hơn

Tìm kiếm trong hộp văn bản dưới đây các trang của CodeW3C.com

Ví dụ này bao gồm bốn yếu tố:

  • Biểu mẫu HTML đơn giản
  • JavaScript
  • Trang PHP
  • Tài liệu XML

Trong ví dụ này, kết quả nằm trong một tài liệu XML (links.xml) để tìm kiếm. Để làm cho ví dụ nhỏ và đơn giản, chúng ta chỉ cung cấp 8 kết quả.

Biểu mẫu HTML

Đây là trang HTML. Nó chứa một biểu mẫu HTML đơn giản, phong cách CSS cho biểu mẫu này, và liên kết đến 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>

Giải thích ví dụ - Biểu mẫu HTML

Như bạn đã thấy, trang HTML chứa một biểu mẫu HTML đơn giản, trong đó hộp văn bản có tên là "txt1".

Cách hoạt động của biểu mẫu:

  1. Khi người dùng nhấn và thả phím trong hộp văn bản, một sự kiện sẽ được kích hoạt
  2. Khi sự kiện được kích hoạt, hàm có tên là showResult() sẽ được thực thi
  3. Dưới biểu mẫu là phần tử <div> có tên là "livesearch" dùng làm đại diện cho dữ liệu được trả về bởi hàm showResult()

JavaScript

JavaScript mã nguồn lưu trữ trong "livesearch.js" liên kết với tài liệu HTML:

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");
  }
 }
trả về xmlHttp;
}

Giải thích ví dụ:

GetXmlHttpObject và Yêu cầu AJAX và PHP của ví dụ đó

Hàm showResult()

Hàm này sẽ được thực hiện mỗi khi một ký tự được nhập vào hộp văn bản

Nếu không có nội dung trong khu vực văn bản (str.length == 0), hàm sẽ đặt trường trả về thành trống và xóa bất kỳ viền nào xung quanh

Nhưng, nếu có nội dung trong khu vực văn bản, hàm sẽ thực hiện:

  1. Định nghĩa url gửi đến máy chủ (tên tệp)
  2. Thêm tham số có nội dung hộp văn bản (q) vào url
  3. Thêm một số ngẫu nhiên để ngăn máy chủ sử dụng tệp lưu cache
  4. Gọi hàm GetXmlHttpObject để tạo đối tượng XMLHTTP và thông báo cho hàm này thực hiện hàm tên là stateChanged khi có sự thay đổi
  5. Sử dụng url được cung cấp để mở đối tượng XMLHTTP
  6. Gửi yêu cầu HTTP đến máy chủ

Hàm stateChanged()

Hàm stateChanged() sẽ được thực hiện mỗi khi trạng thái của đối tượng XMLHTTP thay đổi.

Khi trạng thái trở thành 4 (hoặc "complete") thì văn bản phản hồi sẽ được sử dụng để thay thế nội dung của ký tự chờ txtHint và đặt một viền xung quanh trường trả về.

Trang PHP

Trang web máy chủ được gọi bởi mã JavaScript là tệp PHP có tên "livesearch.php".

"livesearch.php" chứa mã kiểm tra tệp XML "links.xml". Tệp này chứa các tiêu đề và URL của một số trang trên codew3c.com.

Mã này sẽ tìm kiếm các tiêu đề khớp với chuỗi tìm kiếm trong tệp XML và trả về kết quả dưới dạng HTML:

<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//lay tham so q tu URL
$q=$_GET["q"];
//tim tat ca link tu file xml neu do dai cua 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)
  {
  //tim mot link khop voi chuoi tim kiem
  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>";
    }
   }
  }
 }
}
// Đặt đầu ra thành "no suggestion" nếu không tìm thấy gợi ý nào
// hoặc để đúng giá trị
if ($hint == "")
 {
 $response="no suggestion";
 }
else
 {
 $response=$hint;
 }
//output the response
echo $response;
?>

Giải thích ví dụ:

Nếu từ JavaScript gửi đến bất kỳ văn bản nào (strlen($q) > 0), sẽ xảy ra:

  1. PHP tạo đối tượng XML DOM cho tệp "links.xml"
  2. Duyệt qua tất cả các phần tử "title" (nodetypes = 1), để tìm kiếm khớp với dữ liệu name được truyền bởi JavaScript
  3. Tìm thấy liên kết chứa title chính xác, và đặt thành biến "$response". Nếu tìm thấy nhiều hơn một khớp, tất cả các khớp sẽ được thêm vào biến
  4. Nếu không tìm thấy khớp, đặt biến $response thành "no suggestion"
  5. $result là đầu ra gửi đến "livesearch" placeholder