Jquery Ajax-phương thức Ajax()

Đã lâu lắm rồi mới có thời gian viết bài cho blog@@. Mình xin tiếp tục với series bài về jquery đang dang dở. Bài viết trước mình có giới thiệu cho các bạn về Jquery Ajax là gì. Để hiểu được hết Jquery Ajax thì cần phải có thời gian và sự thực hành chăm chỉ, nên mình quyết định sẽ tách các phương thức trong Jquery Ajax thành một bài nhỏ cho các bạn dễ nhớ và tập thực hành dễ hơn. Bài hôm nay mình sẽ giới thiệu phương thức Ajax().

Phương thức Ajax() dùng để thực thi một Ajax request. Đây là phương thức được sử dụng khá nhiều trong Jquery Ajax và nó có thể được dùng để thay thế một số phương thức khác trong Jquery Ajax như get(),post()...

Cú pháp: $.ajax({name:value, name:value, ... })

Phương thức này nhận vào các cặp giá trị tham số gồm tên và giá trị. Dưới đây là bảng các tham số:

async: Xác định việc request có nên được thao tác bất đồng bộ hay không. Giá trị nhận vào và true hoặc false. Mặc định là true.

beforeSend(xhr): Hàm được thực thi trước khi request được gửi đi.

cache: Xác định việc trình duyệt có nên cache trang được request hay không. Nhận vào giá trị true hoặc false. Mặc định là true.

complete(xhr,status): Hàm được thực thi khi request đã hoàn thành. Thường lại chạy sau status là success hoặc error.

contentType: Chỉ ra loại nội dùng mà được dùng để gửi tới server. Mặc định là application/x-www-form-urlencoded, ngoài ra bạn có thể xác định 1 số loại khác như application/xml, application/js, application/json,text/xml...

context: Chỉ ra giá trị cho các hàm gọi lại liên quan của Ajax.

data: dữ liệu được gửi đến server.

dataFilter(data,type): thao tác và lọc dữ liệu thô được trả về của XmlHttpRequest.

dataType: chỉ ra loại dữ liệu mong muốn được trả về từ server. Các loại dữ liệu đó có thể là text, html, xml, js...

error(xhr,status,error): Hàm được thực thi nếu request bị thất bại.

global: Xác định việc có bẫy các sự kiện toàn cục trong Ajax hay không. Nhận vào giá trị true hoặc false. Mặc định là true.

ifModified: Chỉ ra rằng request chỉ thành công nếu response trả về đã thay đổi so với request cuối cùng được gửi. Mặc định là false.

jsonp: là chuỗi viết lại hàm callback trong request jsonp.

jsonpCallback: hàm được gọi lại trong request jsonp.

mime: chỉ ra loại mime được sử dụng để thay cho XHR mime.

password: chỉ ra password để xác minh người dùng trong HTTP access authentication request.

processData: chỉ ra việc có chuyển đổi dữ liệu được gửi kèm với request thành chuỗi query string hay không. Mặc định true.

scriptCharset: chỉ ra charset cho request.

success(result,status,xhr): Hàm được thực thi nếu request thành công.

timeout: chỉ ra thời gian timeout cho request tính bằng milli giây.

traditional: chỉ ra việc có sử dụng kiểu traditional của tuần tự hóa tham số.

type: chỉ ra loại request "GET" hoặc "POST".

url: chỉ ra địa chỉ url request được gửi tới. Mặc định là trang hiện tại.

username: chỉ ra tên của người dùng trong HTTP access authentication request.

xhr: Hàm sử dụng để tạo đối tượng XmlHttpRequest.

Bên trên chỉ là một số tham số hay thấy. Trong mỗi phiên bản jquery thì đều nâng cấp thêm 1 số tham số khác nữa. Bạn có thể xem thêm tại đây: http://api.jquery.com/jQuery.ajax/.

Bây giờ chúng ta sẽ làm 1 ví dụ đơn giản để xem cách hoạt động của phương thức Ajax().

Giả sử chúng ta có 1 file content.txt như sau:

<h1>Webzoomz-tự học thiết kế web</h1>

Và một body html gồm :

<button id="btnDisplay">Display</button>
<div id="status"></div>
<div id="content"></div>

div status: sẽ in ra trạng thái của ajax.

div content: sẽ in ra nội dung lúc success hoặc lúc error:

Còn đây là đoạn script jquery ajax:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnDisplay").click(function () {$("#status").empty();

$.ajax(
{
//url của file
url: "content.txt",
// loại request
type: "get",
// Loại dữ liệu được trả về
dataType: "text",
error: function () {
$("#status").prepend("Ajax Error<br/>");
$("#content").html("404-Not found!!!");
},
beforeSend: function () {
$("#status").prepend("Ajax Before<br/>");
},
complete: function () {
$("#status").prepend("Ajax Complete<br/>");
},
success: function (result) {
$("#status").prepend("Ajax Success<br/>");
$("#content").html(result);
}
});
});
});
</script>