Love beautiful code? We do too.
AJAX được sử dụng để giao tiếp với các Webpage và WebServer. Dưới đây là ví dụ minh họa một trường Search bởi sử dụng với AJAX.
<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", "php_ajax.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Tìm kiếm khóa học:</b></p>
<form>
<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Nhập tên khóa học: <span id="txtHint"></span></p>
</body>
</html>
Code trên mở một file có tên php_ajax.php bởi sử dụng phương thức GET, vì thế chúng ta cần tạo một file có tên php_ajax.php trong cùng thư mục và output sẽ được đính kèm với txtHint.
Tệp php_ajax.php
File này chứa mảng tên khóa học và nó trả về giá trị tới trình duyệt web.
<?php
// mảng các tên khóa học
$a[] = "PHP";
$a[] = "Android";
$a[] = "Java";
$a[] = "C";
$a[] = "C++";
$a[] = "C#";
$a[] = "Python";
$a[] = "HTML5";
$a[] = "CSS";
$a[] = "AngularJS";
$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 === "" ? "Mời bạn nhập tên khóa học hợp lệ" : $hint;
?>
Lưu chương trình trên trong một file có tên là test.php trong htdocs, sau đó mở trình duyệt và gõ địa chỉ http://localhost:8080/test.php sẽ cho kết quả:
Unpublished comment
Viết câu trả lời