Sự kiện onreadystatechange trong AJAX

Khi bạn đã gửi một Request tới một Server, có thể bạn muốn thực hiện một số hoạt động nào đó trên phần Response được trả về. Điều này có thể thực hiện thông qua sự giúp đỡ của sự kiện onreadystatechange trong AJAX.

Sự kiện onreadystatechange này sẽ được kích hoạt mỗi khi trạng thái readyState thay đổi. Mà thuộc tính readyState này giữ phần biểu diễn status của đối tượng XMLHttpRequest, do đó dựa vào từng giá trị của readyState thì bạn có thể cung cấp hoạt động tương ứng nào đó.

Các thuộc tính quan trọng của đối tượng XMLHttpRequest trong AJAX:

Thuộc tính Miêu tả
onreadystatechange Một Event Handler lắng nghe và xử lý một sự kiện khi có thay đổi về trạng thái nào diễn ra.
readyState Thuộc tính này định nghĩa trạng thái hiện tại của đối tượng XMLHttpRequest.
  • 0: Requet chưa được khởi tạo

  • 1: Request đã được thiết lập

  • 2: Request đã được gửi

  • 3: Request đang được xử lý

  • 4: Kết thúc Request

status Trả về trạng thái dưới dạng một số (ví dụ: 404 cho "Not Found", 200 cho "OK")

Trong sự kiện onreadystatechange, ta sẽ xác định xem điều gì sẽ xảy ra khi Response từ Server đã sẵn sàng để được xử lý.

Khi readyState là 4 và status là 200 thì tức là Response đã sẵn sàng

Trong ví dụ này sẽ hướng dãn sử dụng kỹ thuật Ajax trong PHP để tạo 1 ứng dụng nhỏ: Khi người dùng nhập vào sẽ hiển thị ra các gợi ý với dữ liệu nguồn được định nghĩa sẵn.

Trước vào ví dụ ta sẽ

Tạo file index.php có mã như sau:

    <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> 
    First name: <input type="text" onkeyup="showHint(this.value)">
    </form>
    <p>Suggestions: <span id="txtHint"></span></p>
    </body>
    </html>

Giải thích:

  • Trước tiên, kiểm tra xem trường đầu vào có rỗng không (str.length == 0)
  • Tiếp theo, Tạo một đối tượng XMLHttpRequest
  • Sử dụng hàm onreadystatechange để lắng nghe các sự kiện từ máy chủ
  • 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 chứa nội dung của trường đầu vào

Tệp PHP (gethint.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:

    // 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;
Xem ví dụ »