Một ví dụ về cách sử dụng AJAX

- AJAX được sử dụng để tạo ra những ứng dụng có tính tương tác cao.

- Ví dụ bên dưới sẽ cho các bạn thấy cách một trang web có thể giao tiếp với máy chủ trong khi người dùng đang nhập ký tự vào bên trong trường input.

Tìm kiếm tên của bạn

https://webcoban.vn/demo/file?id=3707

- Ở ví dụ trên, khi người dùng nhập một ký tự vào bên trong trường input thì sự kiện onkeyup được kích hoạt, nó sẽ gọi đến hàm showHint() để thực thi.

- Dưới đây là đoạn mã HTML của trang web ở ví dụ trên.

<!DOCTYPE html>
<html>
<head>
	<title>Tìm kiếm tên của bạn</title>
	<script>
		function showHint(str){
			if(str.length==0){
				document.getElementById("display").innerHTML = "";
			}else{
				var myRequest = new XMLHttpRequest();
				myRequest.onreadystatechange = function(){
					if (this.readyState == 4 && this.status == 200){
						document.getElementById("display").innerHTML = this.responseText;
					}
				}
				myRequest.open("GET", "process.php?text=" + str);
				myRequest.send();
			}
		}
	</script>
</head>
<body>
	<form>
		<p>Nhập tên của bạn: <input type="text" onkeyup="showHint(this.value)"></p>
		<p>Gợi ý: <span id="display"></span></p>
	</form>
</body>
</html>

Giải thích ý nghĩa của hàm showHint()

- Trước tiên kiểm tra trường input có bị bỏ trống hay không, nếu có thì xóa nội dung bên trong phần tử #display, còn nếu không thì tiếp tục thực thi các công việc bên dưới.

Tạo một đối tượng XMLHttpRequest có tên là myRequest.
Tạo một chức năng sẽ được thực thi khi phản hồi của máy chủ sẵn sàng.
Gửi yêu cầu đến tập tin process.php trên máy chủ (lưu ý rằng khi gửi yêu cầu thì chúng ta sẽ truyền thêm một tham số có tên là text dùng để chứa các ký tự mà chúng ta nhập trên trường input)

- Dưới đây là nội dung của tập tin process.php (nó sẽ xử lý các ký tự nhận được, xem coi các ký tự này có trùng khớp với các ký tự đầu tiên của những cái tên trong danh sách gợi ý hay không, nếu có thì gửi trả về tên gợi ý, còn không thì trả về thông báo “không có tên nào phù hợp”)

<?php
	$name = array("Quyền", "Nhi", "Quý", "Quyên", "Êm", "Tùng", "Bông", "Thảo", "Yến", "Uyên", "Út", "Phúc", "Phát", "Phương", "Anh", "Sơn", "Dung", "Tình", "Dương", "Khánh", "Giàu", "Hương", "Quỳnh", "Huyền", "Khang", "Thương", "Linh", "Thoa", "Lan", "Xuyến", "Vũ", "Thơm", "Bình", "Quốc", "Nhân", "Thu", "Nhớ", "Mai", "Thanh", "Mạnh", "Hùng", "Duyên", "Cường", "Sang", "Ánh", "Lộc", "Vui", "Bách", "Ngân");
	$text = strtolower($_REQUEST["text"]);
	$hint = "";
	if($text!==""){
		for($i=0; $i<count($name); $i++){
			if(stristr($text, substr($name[$i], 0, strlen($text)))){
				if($hint===""){
					$hint = $name[$i];
				}else{
					$hint = $hint . ", " . $name[$i];
				}
			}
		}
	}
	echo $hint === "" ? "không có tên nào phù hợp" : $hint;
?>