Ajax được sử dụng để tạo ra nhiều sự tương tác hơn. Ví dụ sau đây sẽ minh họa cho ta cách một trang web giao tiếp với một máy chủ web. Khi người dùng nhập vào trường nhập thì sẽ hiện ra một số gợi ý về tên được server trả về.

1. File HTML

Ta có thể đặt tên file là index.html . Ví dụ minh họa sẽ như sau:

<!DOCTYPE html>
<html>
<body>

<h2>Ajax và PHP</h2>
<h3>Nhập tên vào đây</h3>

<p>Gợi ý: <span id="txtHint"></span></p> 
<p>Tên: <input type="text" id="txt1" onkeyup="showHint(this.value)"></p>

<script>
function showHint(str) {
  if (str.length == 0) { 
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("txtHint").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "gethint.php?q="+str);
  xhttp.send();   
}
</script>

</body>
</html>

Trong ví dụ này khi người dùng nhập vào hàm showHint() sẽ được thực thi. Chức năng sẽ được kích hoạt bởi sự kiện onkeyup

Giải thích ví dụ chi tiết hơn:

Đầu tiên, ta kiểm tra xem trường đầu vào có trống không ( str.length == 0 ). Nếu đúng như vậy, xóa nội dung của trình giữ chỗ txtHint và thoát khỏi hàm.

Tuy nhiên nếu trường đầu vào không trống ta sẽ bắt đầu làm như sau:

  • Tạo một đối tượng XMLHttpRequest
  • Tạo chức năng được thực thi khi phản hồi của máy chủ đã sẵn sàng
  • Gửi yêu cầu tới tệp PHP ( gethint.php ) trên máy chủ – Ta sẽ tạo ngay sau đây
  • Lưu ý rằng tham số q được thêm gethint.php? Q = “+ str
  • Biến str chứa nội dung của trường đầu vào

2. File PHP

Như ví dụ trên ta sẽ tạo một file PHP là gethint.php . Với nội dung file như sau:

<?php
// Mảng chứ tên gợi ý. Mình viết thế này cho các bạn dễ nhìn nhé
$a[] = "An";
$a[] = "Bình";
$a[] = "Công";
$a[] = "Dung";
$a[] = "Even";
$a[] = "Fiora";
$a[] = "Guam";
$a[] = "Hà";
$a[] = "Itachi";
$a[] = "JonhWeed";
$a[] = "Khang";
$a[] = "Linh";
$a[] = "Nam";
$a[] = "Oceli";
$a[] = "Phở";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Thành";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vinh";

// lấy tham số Q từ URL
$q = $_REQUEST["q"];

$hint = "";

// tra cứu tất cả các gợi ý từ mảng nếu $ q khác với ""
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";
      }
    }
  }
}

// Đầu ra "không có gợi ý" nếu không tìm thấy gợi ý hoặc xuất giá trị chính xác
echo $hint === "" ? "Không có gợi ý" : $hint;
?>1

Đây là một bài khá là đơn giản. Các bạn chưa nắm vững về PHP có thể tham khảo khóa học PHP của laptrinhtudau.com nhé!