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 hơn với người dùng.
Tìm kiếm trực tiếp AJAX
Ví dụ sau đây sẽ minh họa một tìm kiếm trực tiếp, nơi bạn nhận được kết quả tìm kiếm trong 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 nhập
- 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 các ký tự để xem kết quả rộng hơn
Tìm kiếm trang W3Schools trong trường đầu vào bên dưới:
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 nhỏ và đơn giản, chỉ có sáu kết quả có sẵn.
Giải thích ví dụ - Trang HTML
Khi người dùng nhập một ký tự vào trường nhập ở trên, hàm "showResult ()" được thực thi. Chức năng đượ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 trình giữ chỗ tìm kiếm cuộc sống và thoát khỏi hàm.
Nếu trường đầu vào không trống, hàm showResult () thực hiện như sau:
- Tạo một đối tượng XMLHttpRequest
- Tạo chức năng được thực thi khi phản hồi của máy chủ đã sẵn sàng
- Gửi yêu cầu tới một tệp 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 JavaScript gọi ở trên là một tệp PHP có tên "livesearch.php".
Mã nguồn trong "livesearch.php" tìm kiếm một tệp XML cho các tiêu đề khớp với chuỗi tìm kiếm 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 sẽ xảy ra:
- Tải tệp XML vào đối tượng DOM XML mới
- Lặp qua tất cả các phần tử <title> để tìm các kết quả phù hợ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ả phù hợp, tất cả các kết quả phù hợp sẽ được thêm vào biến
- Nếu không tìm thấy kết quả phù hợp nào, biến $ response được đặt thành "không có đề xuất"