Chương này mình sẽ trình bày một ví dụ minh họa cách sử dụng kỹ thuật AJAX trên Client Side và ngôn ngữ PHP trên Server Side.
Ví dụ ứng dụng AJAX và PHP
Trong ví dụ này, khi người dùng gõ một ký tự trong trường input, hàm JavaScript có tên là showHint() sẽ được thực thi. Hàm này được kích hoạt bởi sự kiện onkeyup.
<html> <body> <h3>Ban hay nhap mot ten trong truong input ben duoi:</h3> <form action=""> First name: <input type="text" id="txt1" onkeyup="showHint(this.value)"> </form> <p>Suggestion: <span id="txtHint"></span></p> <script> function showHint(str) { var xhttp; if (str.length == 0) { document.getElementById("txtHint").innerHTML = ""; return; } xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { document.getElementById("txtHint").innerHTML = xhttp.responseText; } }; xhttp.open("GET", "gethint.php?q="+str, true); xhttp.send(); } </script> </body> </html>
Giải thích
Đầu tiên, kiểm tra xem nếu trường input là trống hay không (điều kiện str.length == 0). Nếu là trống thì xóa nội dung của Placeholder và thoát khỏi hàm.
Nếu trường input là không trống, thực hiện:
- Tạo một đối tượng XMLHttpRequest.
- Tạo một hàm để thực thi khi Response từ Server đã sẵn sàng.
- Gửi Request tới một PHP file (giả sử có tên là gethint.php) trên Server.
- Bạn nên chú ý rằng tham số q được thêm vào "gethint.php?q=" + str.
- Biến str giữ nội dung của trường input.
Nội dung của gethint.php
PHP file này kiểm tra mảng các tên và sau đó trả về tên tương ứng cho trình duyệt.
<?php // Mot mang cac ten Sinh Vien $a[] = "An"; $a[] = "Bao"; $a[] = "Chinh"; $a[] = "Doanh"; $a[] = "Em"; $a[] = "Gam"; $a[] = "Hoang"; $a[] = "Kim"; $a[] = "Linh"; $a[] = "Ngoc"; $a[] = "Oanh"; $a[] = "Phuc"; $a[] = "Anh"; $a[] = "Nam"; $a[] = "Sen"; $a[] = "Dong"; $a[] = "Sinh"; $a[] = "Torres"; $a[] = "Ronaldo"; $a[] = "Messi"; $a[] = "Suares"; $a[] = "Morinho"; $a[] = "Van Gan"; $a[] = "Viet"; // Lay tham so q tu dia chi URL $q = $_REQUEST["q"]; $hint = ""; // Tim tat ca cac hint co trong Array neu tham so $q khac "" 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"; } } } } // Ket qua "Khong co suggestion nao" neu khong tim thay bat ky hint nao trong Array echo $hint === "" ? "Khong co suggestion nao" : $hint; ?>
