Ví dụ về PHP - Tìm kiếm trực tiếp AJAX
AJAX có thể được sử dụng để tạo ra các tìm kiếm tương tác và thân thiện với người dùng hơn.
Tìm kiếm trực tiếp AJAX
Ví dụ sau đây sẽ minh họa tìm kiếm trực tiếp, nơi bạn nhận được kết quả tìm kiếm khi nhập.
Tìm kiếm trực tiếp có nhiều lợi ích so với tìm kiếm truyền thống:
- Kết quả được hiển thị khi bạn gõ
- Kết quả thu hẹp khi bạn tiếp tục nhập
- Nếu kết quả trở nên quá hẹp, hãy xóa ký tự để xem kết quả rộng hơn
Tìm kiếm trang Example.com.vn trong trường nhập bên dưới:
Các kết quả trong ví dụ trên được tìm thấy trong một tệp XML ( links.xml ). Để làm cho ví dụ này trở nên nhỏ gọn và đơn giản, chỉ có sáu kết quả.
Giải thích ví dụ - Trang HTML
Khi người dùng nhập một ký tự vào trường đầu vào ở trên, hàm "showResult()" sẽ được thực thi. Chức năng này được kích hoạt bởi sự kiện "onkeyup":
<html>
<head>
<script>
function showResult(str)
{
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("livesearch").innerHTML=this.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>
Giải thích mã nguồn:
Nếu trường đầu vào trống (str.length==0), hàm sẽ xóa nội dung của phần giữ chỗ tìm kiếm trực tiếp và thoát khỏi hàm.
Nếu trường đầu vào không trống, hàm showResult() sẽ thực thi như sau:
- Tạo một đối tượng XMLHttpRequest
- Tạo hàm để thực thi khi phản hồi của máy chủ sẵn sàng
- Gửi yêu cầu đến một tập tin trên máy chủ
- Lưu ý rằng một tham số (q) được thêm vào URL (với nội dung của trường đầu vào)
Tệp PHP
Trang trên máy chủ được gọi bằng JavaScript ở trên là một tệp PHP có tên "livesearch.php".
Mã nguồn trong "livesearch.php" tìm kiếm tiêu đề khớp với chuỗi tìm kiếm trong tệp XML và trả về kết quả:
<?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 was found
// or to the correct values
if ($hint=="") {
$response="no suggestion";
}
else {
$response=$hint;
}
//output the response
echo $response;
?>
Nếu có bất kỳ văn bản nào được gửi từ JavaScript (strlen($q) > 0), điều sau đây sẽ xảy ra:
- Tải tệp XML vào đối tượng XML DOM mới
- Lặp lại tất cả các phần tử <title> để tìm kết quả khớp từ văn bản được gửi từ JavaScript
- Đặt url và tiêu đề chính xác trong biến "$response". Nếu tìm thấy nhiều kết quả khớp, tất cả kết quả khớp sẽ được thêm vào biến
- Nếu không tìm thấy kết quả phù hợp, biến $response được đặt thành "không có đề xuất"