Cho đến giờ chúng ta có thể tạo cuộc gọi đến phương thức AJAX và kiên nhẫn chờ đợi được trả lời. Nhưng cũng có lúc chúng ta muốn biết thêm một chút nữa về lệnh truy vấn HTTP khi nó được thực hiện. jQuery cho bạn một số hàm có thể được sử dụng để đăng ký hàm truy hồi khi nhiều sự kiện liên quan đến AJAX xảy ra.
Hai phương thức .ajaxStart() và .ajaxStop() là những ví dụ điển hình về chức năng quan sát, và có thể được gán với bất kỳ đối tượng jQuery nào. Khi lệnh gọi AJAX bắt đầu mà không có gì đang được tải, hàm truy hồi .ajaxStart() sẽ khởi động. Ngược lại, khi lệnh truy vấn cuối cùng kết thúc, hàm truy hồi được gắn với .ajaxStop() sẽ bắt đầu. Tất cả những hàm quan sát là dạng hàm toàn cục, chúng được gọi m i khi sự giao tiếp AJAX xảy ra, mà không quan tâm đến mã nào gọi nó.
Chúng ta có thể sử dụng những phương thức này để thông báo cho người dùng biết trong trường hợp mạng của họ không được nhanh. Đoạn mã HTML sẽ có một đoạn thông báo “đang tải dữ liệu”:
<div id="loading"> Loading...
30 www.izwebz.com Demon Warlock </div> </div>
Thông báo này chỉ là một đoạn mã HTML bình thường, nhưng bạn cũng có thể thêm vào một hình GIF động kiểu xoay xoay cho nó chu n. Chúng ta sẽ chỉnh sửa CSS một chút để khi thông báo được đưa ra nó được hiển thị như hình dưới.
Bởi vì đây chỉ là tính năng làm cho trang thêm đ p cho những người dùng có trình duyệt hiện đại, do vậy chúng ta sẽ không chèn đoạn mã HTML này trực tiếp vào trang. Bởi vì chúng ta chỉ muốn nó hiển thị với những ai có bật JavaScript, cho nên chúng ta sẽ chèn nó bằng jQuery.
$(document).ready(function() {
$('<div id="loading">Loading...</div>') .insertBefore('#dictionary')
});
Chúng ta sẽ khai báo trong CSS cho thẻ div này có display: none để cho khi trang được tải, thì thông báo sẽ bị n đi. Để nó hiển thị đúng lúc mình cần, chúng ta chỉ cần đăng ký nó với chức năng quan sát với .ajaxStart():
$(document).ready(function() { $('<div id="loading">Loading...</div>') .insertBefore('#dictionary') .ajaxStart(function() { $(this).show(); }); });
Chúng ta kết hợp phương thức .hide() luôn vào đây $(document).ready(function() {
31 www.izwebz.com Demon Warlock $('<div id="loading">Loading...</div>') $('<div id="loading">Loading...</div>') .insertBefore('#dictionary') .ajaxStart(function() { $(this).show(); }).ajaxStop(function() { $(this).hide(); }); });
Như vậy chúng ta đã có bảng thông báo.
Một lần nữa bạn cũng nên lưu ý rằng những phương thức này không liên quan gì đến cách mà giao tiếp AJAX bắt đầu. Chính phương thức .load() được gán cho chữ A và .getJSON() được gán cho chữ B đã làm cho giao tiếp AJAX xảy ra.
Trong trường hợp này, tập tính toàn cục là điều chúng ta muốn. Tuy nhiên nếu chúng ta muốn cụ thể hơn nữa, chúng ta có vài lựa chọn để sử dụng. Một vài chức năng quan sát
như, .ajaxError(), nó sẽ gửi cho hàm truy hồi một tham chiếu đến đối tượng XMLHttpRequest. Cái này có thể dùng để phân biệt giữa các lệnh truy vấn với nhau, và cung cấp những tập tính khác nhau. Để có những cách xử lý cụ thể hơn bạn có thể sử dụng hàm $.ajax() cấp thấp, mà chúng ta sẽ bàn tới ở phần dưới.
Tuy nhiên cách phổ biến nhất để giao tiếp với lệnh truy vấn là hàm truy hồi thành công, mà chúng ta đã nói đến ở trên. Chúng ta đã sử dụng nó trong một vài những ví dụ trên để xử lý dữ liệu quay lại từ server và cho hiển thị kết quả lên trang web. Tất nhiên nó cũng có thể được sử dụng cho những thông tin phản hổi khác. Hãy xem lại ví dụ về .load():
$(document).ready(function() { $('#letter-a a').click(function() { $('#dictionary').load('a.html'); return false; }); });
Chúng ta có thể cải tiến một chút ở đây bằng cách làm cho nội dung từ từ hiện ra thay vì ầm một phát. Phương thức .load() có thể lấy vào một hàm truy hồi và kích hoạt nó khi đã hoàn thành.
$(document).ready(function() { $('#letter-a a').click(function() {