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ả:
