Ajax trong PHP - Tìm hiểu về Ajax trong PHP
24/08/2021 00:57
AJAX là công cụ giúp cập nhật các phần của trang web mà không cần tải lại toàn bộ trang. Đây là một tính năng hữu ích giúp người dùng có trải nghiệm tốt hơn khi sử dụng web. Sử dụng AJAX trong việc tạo trang web sẽ giúp lập trình viên tạo ra các trang web động với hiệu suất cao hơn. Trong bài viết dưới đây, chúng ta sẽ tìm hiểu về AJAX và cách làm việc với AJAX trong PHP.
Khái niệm AJAX trong PHP
AJAX = JavaScript và XML không đồng bộ.
AJAX là một kỹ thuật để tạo 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. Điều này có nghĩa là bạn có thể cập nhật được các phần của trang web mà không cần tải lại 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 thay đổi, việc này vô hình chung làm giảm hiệu suất và trải nghiệm người dùng.
Một số ví dụ về các ứng dụng sử dụng AJAX: Google Maps, Gmail, Youtube, các tab Facebook,...
Cách hoạt động của AJAX
Cách hoạt động của AJax trong PHP
AJAX trong PHP 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 các yếu tố sau:
- Đố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 (để định kiểu dữ liệu)
- XML (thường được sử dụng làm định dạng để truyền dữ liệu)
*, Lưu ý: Các ứng dụng AJAX độc lập với trình duyệt và nền tảng.
Đề xuất của Google
AJAX đã được Goolge đề xuất phổ biến vào năm 2005 với Google Suggest.
Google Suggest đang sử dụng AJAX để tạo một giao diện web động: Khi bạn bắt đầu nhập vào hộp tìm kiếm của Google, JavaScript sẽ gửi các ký tự tới một máy chủ và máy chủ sẽ trả về danh sách các đề xuất.
>>> Đọc thêm: Top Framework PHP lập trình viên nên dùng
Lập trình PHP với AJAX
Như đã đề cập trước đó, AJAX được sử dụng để tạo nhiều ứng dụng tương tác hơn. Với PHP, ngôn ngữ được sử dụng để phát triển web, chắc chắn AJAX là một công cụ hỗ trợ không thể thiếu. Dưới đây là hình ảnh một ví về về sử dụng AJAX trong PHP:
Trong ví dụ trên, khi người dùng nhập một ký tự vào trường nhập, một hà có tên “showHint()” sẽ được thực thi. Chức năng sẽ được kích hoạt bởi onkeyup. Dưới đây là mã HTML:
<html>
<head>
<script>
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();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the input field below:</b></p>
<form action="">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Giải thích đoạn mã trên,
Trước tiên, hãy kiểm tra xem trường nhập 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 khỏi hàm.
Tuy nhiên, nếu trường nhập không trống, hãy 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ủ
- 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
Sử dụng tệp PHP - “gethint.php” AJAX trong PHP
Tệp PHP kiểm tra một mảng tên và trả về (các) tên tương ứng cho trình duyệt:
<?php
// 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";
// get the q parameter from URL
$q = $_REQUEST["q"];
$hint = "";
// lookup all hints from array if $q is different from ""
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";
}
}
}
}// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>Kết luận: Bài viết trên đã giới thiệu tới bạn về AJAX cách sử dụng AJAX trong PHP và một số ví dụ của việc sử dụng AJAX trong ứng dụng. Với tính năng tạo web động với hiệu suất nhanh và không cần tải lại, sự kết hợp giữa AJAX và PHP chắc chắn sẽ là lựa chọn hoàn hảo cho bạn. Tìm hiểu thêm về PHP và các ngôn ngữ lập trình khác qua các khóa học lập trình tại Viện công nghệ thông tin T3H bạn nhé!
