Ajax là gì?
AJAX dạng đầy đủ là JavaScript & XML không đồng bộ. Nó là một công nghệ làm giảm 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 không đồng bộ được khởi tạo bởi JavaScript. 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ợ JavaScript. Mã JavaScript chỉ hoạt động trong các trình duyệt đã bật JavaScript.
XML là từ viết tắt của Ngôn ngữ đánh dấu có thể mở rộng. Nó được sử dụng để mã hóa thông điệp ở cả định dạng người và máy có thể đọc được. Nó giống như HTML nhưng cho phép bạn tạo các thẻ tùy chỉnh của mình. Để biết thêm chi tiết về XML, hãy xem bài viết về XML
Tại sao sử dụng AJAX?
- Nó cho phép phát triển các ứng dụng web tương tác phong phú 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 nó. Điều này có thể đạt được bằng cách sử dụ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ý. Máy chủ phản hồi bằng các từ khóa phù hợp với những gì người dùng đã nhập.
- Nó có thể được sử dụng để điền vào một 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 lấy 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 tải những thứ như
- Tweets
- Commens
- Người dùng truy cập trang web, v.v.
Cách tạo một ứ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 PHP MVC phổ biến.
Ứng dụng của chúng tôi sẽ có một hộp văn bản mà người dùng sẽ nhập tên của khung.
Sau đó, chúng tôi sẽ sử dụng mvc AJAX để tìm kiếm kết quả phù hợp sau đó hiển thị tên đầy đủ của khung công tác ngay bên dưới biểu mẫu tìm kiếm.
Bước 1) Tạo trang chỉ mục
Index.php
PHP MVC Frameworks - Search Engine PHP MVC Frameworks - Search Engine
Type the first letter of the PHP MVC Framework
Matches:
ĐÂY,
-
“Onkeyup =" showName (this.value) "" thực thi hàm JavaScript showName mỗi khi gõ một khóa vào hộp 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
frameworks.php
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 textboxdocument.getElementById("txtName").innerHTML; //clear previous resultsreturn;}if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp=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,
- “If (str.length == 0)” kiểm tra độ dài của chuỗi. Nếu nó là 0, thì phần còn lại của tập lệnh không được thực thi.
- “If (window.XMLHttpRequest)…” Internet Explorer phiên bản 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, FireFox sử dụng XMLHttpRequest. Mã này sẽ đảm bảo rằng ứng dụng của chúng tôi hoạt động trên cả IE 5 & 6 cũng như các phiên bản IE và trình duyệt cao khác.
- “Xmlhttp.onreadystatechange = function…” kiểm tra xem tương tác AJAX đã hoàn tất chưa và trạng thái là 200, sau đó cập nhật khoảng 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 phututs / ajax, hãy duyệt đến URL http: //localhost/phptuts/ajax/index.php
Gõ chữ C vào hộp văn bản Bạn sẽ nhận được kết quả sau.
Ví dụ trên trình bày khái niệm về 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ú.
Tóm lược
- AJAX là từ viết tắt của Asynchronous JavaScript and XML
- AJAX là một công nghệ được sử dụng để tạo ra các ứng dụng tương tác phong phú giúp giảm tương tác giữa máy khách và máy chủ bằng cách chỉ cập nhật các phần của trang web.
- Internet Explorer phiên bản 5 và 6 sử dụng ActiveXObject để triển khai các hoạt động AJAX.
- Internet explorer phiên bản 7 trở lên và các trình duyệt Chrome, Firefox, Opera và Safari sử dụng XMLHttpRequest.