Hướng dẫn PHP Ajax với ví dụ

Ajax là gì?

AJAX dạng đầy đủ là Không đồng bộ JavaScript & XML. Đây là công nghệ làm giảm 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ợ 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 là từ viết tắt của Extensible Markup Language. Nó được sử dụng để mã hóa các thông điệp ở cả định dạng mà con 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 trên XML

Tại sao nên 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 trên 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í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ý. Máy chủ 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 vào hộp thả xuống tùy thuộc vào giá trị của 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 trang web tải những thứ như
Tweets
Bình luận
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 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ủ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 ngay bên dưới biểu mẫu 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 mỗi khi một phím được nhập 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

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,

“if (str.length == 0)” kiểm tra độ dài của chuỗi. Nếu là 0 thì phần còn lại của tập lệnh sẽ 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 cấp 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 file index.php trong phututs/ajax, duyệt đến URL http://localhost/phptuts/ajax/index.php

Nhập chữ C vào hộp văn bản Bạn sẽ nhận được kết quả sau.

Ví dụ trên thể hiện 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ú.

Tổng kết

AJAX là từ viết tắt của Asynchronous JavaScript và XML
AJAX là 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à trình duyệt Chrome, Firefox, Operavà Safari sử dụng XMLHttpRequest.

Bạn có thể thích: