Jquery Ajax- các phương thức trạng thái

Tiếp theo loạt bài về Jquery Ajax nào ^_^ !  Hôm qua mình có giới thiệu sơ qua một chút về phương thức post trong jquery ajax. Hôm nay mình xin tiếp tục với một vài các phương thức trạng thái ajax. Các phương thức này bao gồm có: ajaxComplete(), ajaxError(), ajaxSend(), ajaxStart(), ajaxStop(), ajaxSuccess().

Chúng ta sẽ cùng tìm hiểu một chút về chức năng của các phương thức này.

ajaxStart(): chỉ ra hàm được thực thi khi ajax request được bắt đầu.

ajaxStop(): chỉ ra hàm được thực thi khi tất cả các ajax request đã hoàn thành.

ajaxComplete(): chỉ ra hàm được thực thi khi ajax request hoàn thành.

ajaxError(): chỉ ra hàm được thực thi khi ajax request có lỗi.

ajaxSend(): chỉ ra hàm được thực thi trước khi ajax request được gửi đi.

ajaxSuccess(): chỉ ra hàm được thực thi khi ajax request hoàn thành thành công.

Bây giờ mình sẽ làm một ví dụ để tổng hợp tất cả những phương thức trên.

Giả sử chúng ta có một body gồm các phần tử sau:

<div id="main"></div>

<button id="click">Go To Ajax</button>

<div id="start" style="display:none"><strong style="color:#0055A8">Loading... please wait!</strong></div>

<div id="stop" style="display:none"><strong style="color:#A80007">Stopped!</strong></div>

<div id="success" style="display:none"><strong style="color:#00A803">Success!!!</strong></div>

<div id="error" style="display:none"><strong style="color:#A80010">Error!!!</strong></div>

<div id="complete" style="display:none"><strong  style="color:#9D00A8">Completed ajax!</strong></div>

<div id="send" style="display:none"><strong style="color:#A86400">Prepare to send!!!</strong></div>

Một div main để chứa thông tin load được. Một button để kích hoạt event. Và các div để hiện thị trạng thái, mình đã đặt tên theo nội dung trạng thái mà chúng sẽ trải qua.

Còn đây là phần script mà chúng ta sẽ sử dụng:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

    <script language="javascript" type="text/javascript">

        $(document).ready(function () {

            

            $("#main").ajaxStart(function () {

                $("#start").css("display", "block");

            });

            $("#main").ajaxComplete(function () {

                

                $("#complete").css("display", "block");

            });

            $("#main").ajaxSend(function () {

                $("#send").css("display", "block");

            });

            $("#main").ajaxStop(function () {

                $("#stop").css("display", "block");

            });

            $("#main").ajaxSuccess(function () {

                $("#success").css("display", "block");

            });

            

            $("#main").ajaxError(function () {

                $("#error").css("display", "block");

            });

            $("#click").click(function () {

                $("#main").load("content.txt");

            });

        });

    </script>

Đây là đoạn script để chúng ta hiển thị các div trên. Khi chúng ta bắt đầu chạy thì các trạng thái của ajax sẽ lần lượt được hiện ra, để thấy rõ quá trình này thì bạn nên để file content.txt có kích thước lớn một chút để làm chậm lại quá trình đó để chúng ta có thể nhìn thấy rõ hơn. Đây chỉ là một ví dụ mang tính chất demo cho các bạn hiểu. Hi vọng là các bạn có thể hiểu thêm một chút về các phương thức này trong ajax. Chúc các bạn thành công!