Hướng dẫn PHP Ajax với ví dụ
Fiona Nâu
⚡ Tóm tắt thông minh
Ajax trong PHP cho phép trang web trao đổi một lượng nhỏ dữ liệu với máy chủ và cập nhật một phần trang mà không cần tải lại toàn bộ. Hướng dẫn này xây dựng một công cụ tìm kiếm trực tiếp, giải thích cách tiếp cận XMLHttpRequest cổ điển và giải pháp thay thế Fetch API hiện đại.
Ajax là gì?
AJAX viết tắt của Asynchronous (bất đồng bộ) JavaScript & XML. Đây là một công nghệ giúp giảm thiểu sự tương tác giữa máy chủ và máy khách. Nó thực hiện điều này bằng cách chỉ cập nhật một phần của trang web thay vì toàn bộ trang. Các tương tác bất đồng bộ được khởi tạo bởi JavaĐoạn mã. Mục đích của AJAX là trao đổi một lượng nhỏ dữ liệu với máy chủ mà không cần làm mới trang.
JavaScript là một ngôn ngữ kịch bản phía máy khách. Nó được thực thi ở phía máy khách bởi các trình duyệt web hỗ trợ JavaKịch bản. JavaMã lệnh chỉ hoạt động trong các trình duyệt có JavaĐã bật tập lệnh.
XML XML là viết tắt của Extensible Markup Language (Ngôn ngữ đánh dấu mở rộng). Nó được sử dụng để mã hóa thông điệp ở cả định dạng con người và máy tính. Nó giống như HTML nhưng cho phép bạn tạo các thẻ tùy chỉnh của riêng mình. Để biết thêm chi tiết về XML, hãy xem bài viết về... XML.
Tại sao nên sử dụng AJAX?
- Nó cho phép phát triểnping Các ứng dụng web phong phú, tương tác cao, giống như các ứng dụng máy tính để bàn.
- Việc xác thực có thể được thực hiện khi người dùng điền vào biểu mẫu mà không cần gửi đi. Điều này có thể đạt được bằng cách sử dụng tính năng tự động hoàn thành. Các từ mà người dùng nhập vào sẽ được gửi đến máy chủ để xử lý, và máy chủ sẽ phản hồi bằng các từ khóa khớp với những gì người dùng đã nhập.
- Nó có thể được sử dụng để điền dữ liệu vào hộp thả xuống tùy thuộc vào giá trị của một hộp thả xuống khác.
- Dữ liệu có thể được truy xuất từ máy chủ và chỉ một phần nhất định của trang được cập nhật mà không cần tải toàn bộ trang. Điều này rất hữu ích cho các phần của trang web cần tải những thứ như:
- Tweets
- Nhận xét
- Số người dùng truy cập trang web và các dữ liệu trực tiếp tương tự.
Cách tạo ứng dụng PHP Ajax
Chúng tôi sẽ tạo một ứng dụng đơn giản cho phép người dùng tìm kiếm các khung công tác PHP MVC phổ biến.
Ứng dụng của chúng tôi sẽ có một hộp văn bản để người dùng nhập tên các framework.
Sau đó, chúng ta sẽ sử dụng AJAX để tìm kiếm kết quả phù hợp, rồi hiển thị tên đầy đủ của framework ngay bên dưới ô tìm kiếm.
Bước 1) Tạo trang chỉ mục
index.php
<html> <head> <title>PHP MVC Frameworks - Search Engine</title> <script type="text/javascript" src="auto_complete.js"></script> </head> <body> <h2>PHP MVC Frameworks - Search Engine</h2> <p><b>Type the first letter of the PHP MVC Framework</b></p> <form method="POST" action="index.php"> <p><input type="text" size="40" id="txtHint" onkeyup="showName(this.value)"></p> </form> <p>Matches: <span id="txtName"></span></p> </body> </html>
ĐÂY,
- “onkeyup=”showName(this.value)”” thực thi JavaHàm script showName sẽ hiển thị tên mỗi khi người dùng nhập một phím vào ô văn bản. Tính năng này được gọi là tự động hoàn thành.
Bước 2) Tạo trang khung
framework.php
<?php $frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ; $name = $_GET["name"]; if (strlen($name) > 0) { $match = ""; for ($i = 0; $i < count($frameworks); $i++) { if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) { if ($match == "") { $match = $frameworks[$i]; } else { $match = $match . " , " . $frameworks[$i]; } } } } echo ($match == "") ? 'no match found' : $match; ?>
Bước 3) Tạo tập lệnh JS
auto_complete.js
function showName(str){ if (str.length == 0){ // exit function if nothing has been typed in the textbox document.getElementById("txtName").innerHTML=""; // clear previous results return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById("txtName").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","frameworks.php?name="+str,true); xmlhttp.send(); }
ĐÂY,
- Câu lệnh “if (str.length == 0)” kiểm tra độ dài của chuỗi. Nếu độ dài bằng 0, thì phần còn lại của kịch bản sẽ không được thực thi.
- “if (window.XMLHttpRequest)…” Các phiên bản Internet Explorer 5 và 6 sử dụng ActiveXObject để triển khai AJAX. Các phiên bản và trình duyệt khác như Chrome và Firefox Sử dụng XMLHttpRequest. Đoạn mã này đảm bảo ứng dụng của chúng ta hoạt động trên cả IE 5 & 6 và các trình duyệt hiện đại.
- “xmlhttp.onreadystatechange=function…” kiểm tra xem tương tác AJAX đã hoàn tất và trạng thái là 200 hay chưa, sau đó cập nhật span txtName với kết quả trả về.
Bước 4) Kiểm tra ứng dụng PHP Ajax của chúng tôi
Giả sử bạn đã lưu tệp index.php trong thư mục phptuts/ajax, hãy truy cập vào đường dẫn sau: URL http://localhost/phptuts/ajax/index.php
Nhập chữ C vào ô văn bản. Bạn sẽ nhận được kết quả sau.
Ví dụ trên minh họa khái niệm AJAX và cách nó có thể giúp chúng ta tạo ra các ứng dụng tương tác phong phú.
AJAX hiện đại với Fetch API
Đối tượng XMLHttpRequest ở trên vẫn hoạt động, nhưng nhánh ActiveXObject của nó dành cho các phiên bản Internet Explorer cũ không còn cần thiết nữa. Các trình duyệt hiện đại cung cấp API Fetch dựa trên Promise, thực hiện cùng một yêu cầu với ít mã hơn nhiều.
function showName(str) { if (str.length === 0) { document.getElementById("txtName").innerHTML = ""; return; } fetch("frameworks.php?name=" + encodeURIComponent(str)) .then(response => response.text()) .then(text => { document.getElementById("txtName").innerHTML = text; }); }
Phiên bản này thực hiện cùng một công việc: nó gửi văn bản đã nhập đến frameworks.php và đặt phản hồi vào thẻ span txtName. Nó cũng sử dụng encodeURIComponent để mã hóa an toàn dữ liệu đầu vào, và chuỗi promise của nó dễ dàng mở rộng với việc xử lý lỗi bằng cách sử dụng khối catch.
