PHP - AJAX Search
AJAX là viết tắt của thuật ngữ Asynchronous JavaScript and XML. Ajax được sử dụng để xây dựng các trang web nhanh chóng và động. Ví dụ dưới đây minh họa sự tương tác với script PHP ở phía backend thông qua các hàm AJAX để cung cấp một trường tìm kiếm trên trang web.
Step 1
Lưu đoạn kịch bản sau dưới tên "example.php" −
<html>
<head>
<style>
span {
color: green;
}
</style>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "hello.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Search your favourite tutorials:</b></p>
<form>
<input type = "text" onkeyup = "showHint(this.value)">
</form>
<p>Entered Course name: <span id="txtHint"></span></p>
</body>
</html>
Đoạn mã này về cơ bản là một kịch bản HTML, hiển thị một biểu mẫu HTML với một trường văn bản. Khi sự kiện onkeyup xảy ra, một hàm JavaScript có tên showHint() sẽ được gọi. Hàm này gửi một yêu cầu HTTP GET đến một kịch bản PHP khác trên máy chủ.
Step 2
Lưu đoạn mã sau dưới dạng "php_ajax.php" −
<?php
// Array with names
$a[] = "Android";
$a[] = "B programming language";
$a[] = "C programming language";
$a[] = "D programming language";
$a[] = "euphoria";
$a[] = "F#";
$a[] = "GWT";
$a[] = "HTML5";
$a[] = "ibatis";
$a[] = "Java";
$a[] = "K programming language";
$a[] = "Lisp";
$a[] = "Microsoft technologies";
$a[] = "Networking";
$a[] = "Open Source";
$a[] = "Prototype";
$a[] = "QC";
$a[] = "Restful web services";
$a[] = "Scrum";
$a[] = "Testing";
$a[] = "UML";
$a[] = "VB Script";
$a[] = "Web Technologies";
$a[] = "Xerox Technology";
$a[] = "YQL";
$a[] = "ZOPL";
$q = $_REQUEST["q"];
$hint = "";
if ($q !== "") {
$q = strtolower($q);
$len = strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
echo $hint === "" ? "Please enter a valid course name" : $hint;
?>
Step 3
Chúng ta sẽ bắt đầu ứng dụng này bằng cách mở example.php trong trình duyệt bằng cách nhập URL http://localhost/example.php .
Vào mỗi lần nhấn phím trong trường tìm kiếm, một yêu cầu GET được gửi đến máy chủ. Kịch bản trên máy chủ đọc ký tự từ mảng $_REQUEST và tìm kiếm tên khóa học phù hợp. Giá trị phù hợp được hiển thị bên dưới trường văn bản trong trình duyệt.
