Yêu cầu AJAX và PHP

Yêu cầu AJAX

Trong ví dụ AJAX dưới đây, chúng ta sẽ演示 cách trang web giao tiếp với máy chủ web trực tuyến khi người dùng nhập dữ liệu vào biểu mẫu web.

Nhập tên vào hộp văn bản dưới đây:

Đề xuất:

Ví dụ này bao gồm ba trang:

  • Một biểu mẫu HTML đơn giản
  • Mã nguồn JavaScript
  • Trang PHP

Biểu mẫu HTML

Đây là biểu mẫu HTML. Nó chứa một biểu mẫu HTML đơn giản và liên kết đến mã nguồn JavaScript:

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
Tên đầu tiên:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Đề xuất: <span id="txtHint"></span></p>
</body>
</html>

Giải thích ví dụ - Biểu mẫu HTML

Như bạn đã thấy, trang HTML trên có một biểu mẫu HTML đơn giản với trường nhập liệu có tên là "txt1".

Cách làm việc của biểu mẫu này là:

  1. Khi người dùng nhấn và thả phím trong trường nhập liệu, một sự kiện sẽ được kích hoạt
  2. Khi sự kiện này được kích hoạt, hàm có tên là showHint() sẽ được thực thi
  3. Dưới biểu mẫu là một <span> có tên là "txtHint". Nó được sử dụng làm đại diện cho dữ liệu được trả về bởi hàm showHint().

JavaScript

JavaScript mã nguồn lưu trữ trong tệp "clienthint.js", nó được liên kết vào tài liệu HTML:

var xmlHttp
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Trình duyệt không hỗ trợ yêu cầu HTTP")
  return
  } 
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Trình duyệt Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Ví dụ giải thích:

Hàm showHint()

Mỗi khi nhập một ký tự vào trường nhập, hàm này sẽ được gọi một lần.

Nếu có nội dung trong hộp văn bản (str.length > 0), hàm này sẽ thực hiện như sau:

  1. Định nghĩa URL (tên tệp) cần gửi đến máy chủ
  2. Thêm tham số có nội dung trường nhập vào URL này (q)
  3. Thêm một số ngẫu nhiên để tránh trường hợp máy chủ sử dụng tệp lưu cache
  4. Gọi hàm GetXmlHttpObject để tạo đối tượng XMLHTTP và thông báo cho đối tượng này thực hiện hàm có tên là stateChanged khi sự kiện được kích hoạt
  5. Mở đối tượng XMLHTTP này bằng URL đã cung cấp
  6. Gửi yêu cầu HTTP đến máy chủ

Nếu trường nhập trống, hàm đơn giản sẽ xóa nội dung của占位符 txtHint.

Hàm stateChanged()

Mỗi khi trạng thái của đối tượng XMLHTTP thay đổi, hàm này sẽ được thực thi.

Khi trạng thái trở thành 4 (hoặc "complete"), sử dụng văn bản phản hồi để lấp đầy占位符 txtHint.

Hàm GetXmlHttpObject()

Ứng dụng AJAX chỉ có thể chạy trên trình duyệt web hỗ trợ XML hoàn chỉnh.

Mã trên đã gọi hàm có tên GetXmlHttpObject().

Chức năng của hàm này là giải quyết vấn đề tạo đối tượng XMLHTTP khác nhau cho các trình duyệt khác nhau.

Điểm này đã được giải thích trong phần trước.

Trang web PHP

Trang web server được gọi bởi mã JavaScript là một trang web server đơn giản có tên "gethint.php".

"gethint.php" chứa mã sẽ kiểm tra mảng tên và sau đó trả về tên tương ứng cho client:

<?php
//đổ đầy mảng với các tên
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//lấy tham số q từ URL
$q=$_GET["q"];
//tìm kiếm tất cả các gợi ý từ mảng nếu độ dài của q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}
//Đặt đầu ra thành "no suggestion" nếu không tìm thấy gợi ý
//hoặc để các giá trị chính xác
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//Ghi lại phản hồi
echo $response;
?>

Nếu có văn bản được gửi từ JavaScript (strlen($q) > 0), thì:

  1. Tìm thấy tên phù hợp với ký tự được gửi từ JavaScript
  2. Nếu tìm thấy nhiều tên, bao gồm tất cả các tên trong chuỗi response
  3. Nếu không tìm thấy tên phù hợp, đặt response thành "no suggestion"
  4. Nếu tìm thấy một hoặc nhiều tên, đặt response thành những tên đó
  5. Gửi response đến "txtHint" placeholder