AJAX được sử dụng để tạo ra các ứng dụng tương tác nhiều hơn.
Ví dụ AJAX PHP
Ví dụ sau đây sẽ chứng minh cách một trang web có thể giao tiếp với máy chủ web trong khi một nhân vật kiểu người dùng trong trường đầu vào:
Thí dụ
Bắt đầu nhập tên trong trường đầu vào bên dưới:
Đề xuất:
Ví dụ giải thích
Trong ví dụ trên, khi người dùng nhập ký tự trong trường đầu vào, một hàm gọi là "showhint []" được thực thi.
Hàm được kích hoạt bởi sự kiện Onkeyup.
Đây là mã HTML:
Thí dụ
Bắt đầu nhập tên trong trường đầu vào bên dưới:
function showHint[str] {
if [str.length == 0] {
document.getElementById["txtHint"].innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest[];
xmlhttp.onreadystatechange = function[] {
if [this.readyState == 4 && this.status == 200] {
document.getElementById["txtHint"].innerHTML = this.responseText;
}
};
xmlhttp.open["GET", "gethint.php?q=" + str, true];
xmlhttp.send[];
}
}
Đề xuất:
First name:
Suggestions:
Ví dụ giải thích
Trong ví dụ trên, khi người dùng nhập ký tự trong trường đầu vào, một hàm gọi là "showhint []" được thực thi.
Hàm được kích hoạt bởi sự kiện Onkeyup.
Đây là mã HTML:
- hàm showHint [str] {& nbsp; if [str.length == 0] {& nbsp; & nbsp; & nbsp; & nbsp; document.getEuityById ["txthint"]. ; & nbsp; & nbsp; var xmlHttp = new xmlhttprequest []; & nbsp; & nbsp; & nbsp; xmlHttp.onReadyStateChange = function [] {& nbsp; & nbsp; & nbsp; & nbsp; if [this.ReadyState == 4 && this.status == 200] {& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; document.getEuityById ["txthint"]. Internhtml = this.responsetext; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;} & nbsp; & nbsp; & nbsp; & nbsp;}; & nbsp; xmlhttp.open ["get", "gethint.php? q =" + str, true]; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;}}
- Bắt đầu nhập tên trong trường đầu vào bên dưới: & nbsp; Tên đầu tiên: & nbsp; Đề xuất:
- Chạy ví dụ »
- Giải thích mã:
- Đầu tiên, kiểm tra xem trường đầu vào có trống không [str.length == 0]. Nếu có, hãy xóa nội dung của trình giữ chỗ TXTHINT và thoát chức năng.
Tuy nhiên, nếu trường đầu vào không trống, hãy làm như sau:
Tạo đối tượng XMLHTTPREQUEST
Tạo chức năng sẽ được thực thi khi phản hồi máy chủ đã sẵn sàng
// Array with names
$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";
Gửi yêu cầu đến tệp PHP [gethint.php] trên máy chủ
$q = $_REQUEST["q"];
Lưu ý rằng tham số Q được thêm vào URL [gethint.php? Q = "+str]
Và biến STR giữ nội dung của trường đầu vào
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";
}
}
}
}
Tệp PHP - "gethint.php"
echo $hint === "" ? "no suggestion" : $hint;
?>
Ajax là về việc cập nhật các phần của trang web, mà không tải lại toàn bộ trang.
Ajax là gì?
Ajax = JavaScript không đồng bộ và XML.
AJAX là một kỹ thuật để tạo các trang web nhanh và năng động.
AJAX cho phép các trang web được cập nhật không đồng bộ bằng cách trao đổi một lượng nhỏ dữ liệu với máy chủ phía sau hậu trường. Điều này có nghĩa là có thể cập nhật các phần của trang web, mà không tải lại toàn bộ trang.
Các trang web cổ điển, [không sử dụng AJAX] phải tải lại toàn bộ trang nếu nội dung sẽ thay đổi.
Ví dụ về các ứng dụng sử dụng AJAX: Google Maps, Gmail, YouTube và Facebook Tab.
Cách hoạt động của Ajax
Ajax dựa trên các tiêu chuẩn Internet
AJAX dựa trên các tiêu chuẩn Internet và sử dụng kết hợp:
- Đối tượng XMLHTTPREQUEST [để trao đổi dữ liệu không đồng bộ với máy chủ]
- JavaScript/Dom [để hiển thị/tương tác với thông tin]
- CSS [để tạo kiểu dữ liệu]
- XML [thường được sử dụng làm định dạng để truyền dữ liệu]
Các ứng dụng AJAX là độc lập với trình duyệt và nền tảng!
Google đề xuất
Ajax đã được Google đề xuất phổ biến vào năm 2005, với Google gợi ý.
Google đề xuất đang sử dụng AJAX để tạo giao diện web rất năng động: Khi bạn bắt đầu nhập hộp tìm kiếm của Google, JavaScript sẽ gửi các chữ cái đến máy chủ và máy chủ trả về danh sách các đề xuất.
Bắt đầu sử dụng Ajax ngay hôm nay
Trong hướng dẫn PHP của chúng tôi, chúng tôi sẽ chứng minh cách AJAX có thể cập nhật các phần của trang web, mà không tải lại toàn bộ trang. Tập lệnh máy chủ sẽ được viết bằng PHP.
Nếu bạn muốn tìm hiểu thêm về Ajax, hãy truy cập hướng dẫn Ajax của chúng tôi.