jQuery ajax - phương thức ajax()

jQuery Ajax Tham khảo

Mô hình

Tải văn bản một đoạn bằng AJAX:

jQuery code:}

$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});

Mã HTML:

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Thay đổi Nội dung</button>

Thử nghiệm trực tiếp

Định nghĩa và cách sử dụng

Phương thức ajax() tải dữ liệu từ xa thông qua yêu cầu HTTP.

Phương thức này là thực hiện Ajax ở lớp底层 của jQuery. Thực hiện ở lớp cao hơn và dễ sử dụng hơn có thể thấy ở $.get, $.post v.v. Phương thức $.ajax() trả về đối tượng XMLHttpRequest mà nó tạo ra. Trong hầu hết các trường hợp, bạn không cần phải thực hiện trực tiếp vào hàm này, trừ khi bạn cần thao tác vào các tùy chọn không thường xuyên để có thêm sự linh hoạt.

Trong trường hợp đơn giản nhất, $.ajax() có thể được sử dụng trực tiếp mà không cần bất kỳ tham số nào.

Lưu ý:Tất cả các tùy chọn đều có thể được thiết lập toàn cục bằng hàm $.ajaxSetup().

Cú pháp

jQuery.ajax([settings])
Tham số Mô tả
settings

Tùy chọn. Bó các cặp khóa giá trị để cấu hình yêu cầu Ajax.

Có thể thiết lập giá trị mặc định cho bất kỳ tùy chọn nào bằng cách sử dụng hàm $.ajaxSetup().

Tham số

options

Loại: Object

Tùy chọn. Thiết lập yêu cầu Ajax. Tất cả các tùy chọn đều là tùy chọn.

async

Loại: Boolean

Giá trị mặc định: true. Trong thiết lập mặc định, tất cả các yêu cầu đều là yêu cầu đồng bộ. Nếu cần gửi yêu cầu đồng bộ, hãy đặt tùy chọn này là false.

Lưu ý, yêu cầu đồng bộ sẽ khóa trình duyệt, các hoạt động khác của người dùng phải chờ yêu cầu hoàn thành mới có thể thực hiện.

beforeSend(XHR)

Loại: Function

Trước khi gửi yêu cầu có thể thay đổi hàm của đối tượng XMLHttpRequest, chẳng hạn như thêm tiêu đề HTTP tùy chỉnh.

Đối tượng XMLHttpRequest là tham số duy nhất.

Đây là sự kiện Ajax. Nếu trả về false có thể hủy bỏ yêu cầu ajax này.

cache

Loại: Boolean

Giá trị mặc định: true, dataType là script và jsonp thì mặc định là false. Đặt giá trị là false sẽ không cache trang này.

Tính năng mới của jQuery 1.2.

complete(XHR, TS)

Loại: Function

Hàm hồi gọi sau khi yêu cầu hoàn thành (được gọi sau khi yêu cầu thành công hoặc thất bại).

Tham số: đối tượng XMLHttpRequest và một chuỗi mô tả loại yêu cầu.

Đây là sự kiện Ajax.

contentType

Loại: String

Giá trị mặc định: "application/x-www-form-urlencoded". Loại mã hóa nội dung khi gửi thông tin đến máy chủ.

Giá trị mặc định phù hợp với hầu hết các trường hợp. Nếu bạn truyền một content-type rõ ràng cho $.ajax(), nó sẽ được gửi đến máy chủ (dù không có dữ liệu nào cần gửi).

context

Loại: Object

Đối tượng này được sử dụng để thiết lập上下 context cho các hàm hồi gọi liên quan đến Ajax. Nghĩa là, để hàm hồi gọi này trong scope này trỏ đến đối tượng này (nếu không thiết lập tham số này, then this sẽ trỏ đến tham số options được truyền vào khi gọi AJAX này). Ví dụ, nếu chỉ định một phần tử DOM làm tham số context, thì success callback sẽ được thiết lập context là phần tử DOM này.

Như vậy:

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});
data

Loại: String

Dữ liệu gửi đến máy chủ. Sẽ tự động chuyển đổi thành định dạng chuỗi yêu cầu. Trong yêu cầu GET, nó sẽ được附加 sau URL. Xem mô tả tùy chọn processData để ngăn chặn việc tự động chuyển đổi này. Định dạng bắt buộc là Key/Value. Nếu là mảng, jQuery sẽ tự động gán cùng một tên cho các giá trị khác nhau. Ví dụ: {foo:["bar1", "bar2"]} sẽ được chuyển đổi thành '&foo=bar1&foo=bar2'.

dataFilter

Loại: Function

Hàm tiền xử lý dữ liệu nguyên bản mà Ajax trả về. Cung cấp hai tham số: data là dữ liệu nguyên bản mà Ajax trả về, type là tham số dataType được cung cấp khi gọi jQuery.ajax. Giá trị trả về bởi hàm sẽ được jQuery xử lý tiếp theo.

dataType

Loại: String

Dự đoán loại dữ liệu mà máy chủ sẽ trả về. Nếu không chỉ định, jQuery sẽ tự động nhận biết thông tin MIME của gói HTTP để quyết định thông minh, ví dụ như loại MIME XML sẽ được nhận biết là XML. Trong phiên bản 1.4, JSON sẽ tạo ra một đối tượng JavaScript, trong khi script sẽ thực thi đoạn mã này. Sau đó, dữ liệu mà máy chủ trả về sẽ được phân tích dựa trên giá trị này và truyền tải đến hàm hồi gọi. Các giá trị có thể là:

  • "xml": Trả về tài liệu XML, có thể được jQuery xử lý.
  • "html": Trả về thông tin HTML thuần. Các thẻ script sẽ được thực hiện khi chèn vào DOM.
  • "script": Trả về mã JavaScript thuần. Không tự động lưu trữ kết quả. Chỉ khi thiết lập tham số "cache".
  • "json": Trả về dữ liệu JSON .
  • "jsonp": Định dạng JSONP. Khi gọi hàm với định dạng JSONP, ví dụ "myurl?callback=?", jQuery sẽ tự động thay thế ? bằng tên hàm chính xác để thực hiện hàm gọi lại.
  • "text": Trả về chuỗi văn bản thuần.
error

Loại: Function

Giá trị mặc định: tự động xác định (xml hoặc html). Gọi hàm này khi yêu cầu thất bại.

Có ba tham số: đối tượng XMLHttpRequest, thông tin lỗi, (tùy chọn) đối tượng ngoại lệ được bắt.

Nếu xảy ra lỗi, thông tin lỗi (tham số thứ hai) ngoài null có thể là "timeout", "error", "notmodified" và "parsererror".

Đây là sự kiện Ajax.

global

Loại: Boolean

Có nên kích hoạt sự kiện AJAX toàn cục hay không. Giá trị mặc định: true. Đặt thành false sẽ không kích hoạt sự kiện AJAX toàn cục, chẳng hạn như ajaxStart hoặc ajaxStop có thể được sử dụng để kiểm soát các sự kiện Ajax khác.

ifModified

Loại: Boolean

Chỉ lấy dữ liệu mới khi dữ liệu trên máy chủ thay đổi. Giá trị mặc định: false. Sử dụng thông tin đầu HTTP Last-Modified để xác định. Trong jQuery 1.4, nó cũng sẽ kiểm tra 'etag' được chỉ định bởi máy chủ để xác định dữ liệu không bị thay đổi.

jsonp

Loại: String

Chỉnh sửa tên hàm gọi lại trong yêu cầu jsonp. Giá trị này được sử dụng để thay thế phần "callback" trong URL tham số của yêu cầu GET hoặc POST với định dạng "callback=?", ví dụ {jsonp:'onJsonPLoad'} sẽ truyền "onJsonPLoad=?" đến máy chủ.

jsonpCallback

Loại: String

Đặt tên hàm gọi lại cho yêu cầu jsonp. Giá trị này sẽ được sử dụng để thay thế tên hàm ngẫu nhiên được jQuery tạo ra. Điều này chủ yếu được sử dụng để cho phép jQuery tạo ra tên hàm duy nhất, giúp quản lý yêu cầu dễ dàng hơn, cũng như cung cấp hàm gọi lại và xử lý lỗi. Bạn cũng có thể đặt tên hàm gọi lại này để cho phép trình duyệt lưu trữ yêu cầu GET.

password

Loại: String

Sử dụng để phản hồi mật khẩu cho yêu cầu xác thực truy cập HTTP.

processData

Loại: Boolean

Giá trị mặc định: true. Mặc định, dữ liệu được truyền qua tùy chọn data, nếu là đối tượng (技术上 nói là không phải chuỗi), sẽ được xử lý chuyển đổi thành một chuỗi tìm kiếm, để phù hợp với loại nội dung mặc định "application/x-www-form-urlencoded". Nếu muốn gửi thông tin cây DOM hoặc thông tin khác không muốn chuyển đổi, hãy đặt thành false.

scriptCharset

Loại: String

Chỉ khi dataType của yêu cầu là "jsonp" hoặc "script", và type là "GET" thì mới sử dụng để buộc thay đổi charset. Thường chỉ sử dụng trong trường hợp nội dung mã hóa của nội dung cục bộ và từ xa khác nhau.

success

Loại: Function

Hàm gọi lại sau khi yêu cầu thành công.

Tham số: Dữ liệu được trả về bởi máy chủ và được xử lý dựa trên tham số dataType; chuỗi mô tả trạng thái.

Đây là sự kiện Ajax.

traditional

Loại: Boolean

Nếu bạn muốn sử dụng cách truyền dữ liệu truyền thống, hãy đặt thành true. Hãy tham khảo phương pháp jQuery.param trong mục công cụ.

timeout

Loại: Number

Đặt thời gian chờ yêu cầu (miliseconds). Cài đặt này sẽ thay thế cài đặt toàn cục.

type

Loại: String

Giá trị mặc định: "GET")). Cách thức yêu cầu ("POST" hoặc "GET"), mặc định là "GET". Lưu ý: Các phương thức yêu cầu HTTP khác, như PUT và DELETE, cũng có thể được sử dụng, nhưng chỉ một số trình duyệt hỗ trợ.

url

Loại: String

Giá trị mặc định: Địa chỉ trang hiện tại. Địa chỉ gửi yêu cầu.

username

Loại: String

Sử dụng để phản hồi tên người dùng cho yêu cầu xác thực truy cập HTTP.

xhr

Loại: Function

Cần trả về một đối tượng XMLHttpRequest. Mặc định trong IE là ActiveXObject còn trong các trường hợp khác là XMLHttpRequest. Sử dụng để ghi đè hoặc cung cấp một đối tượng XMLHttpRequest được nâng cao. Tham số này không có sẵn trong jQuery 1.3.

Hàm callback

Nếu muốn xử lý dữ liệu được nhận từ $.ajax(),则需要 sử dụng hàm callback: beforeSend, error, dataFilter, success, complete.

beforeSend

Khi gọi trước khi gửi yêu cầu, truyền đối tượng XMLHttpRequest làm tham số.

error

Khi yêu cầu gặp lỗi, gọi hàm này. Truyền đối tượng XMLHttpRequest, chuỗi mô tả loại lỗi và đối tượng ngoại lệ (nếu có).

dataFilter

Khi yêu cầu thành công, gọi hàm này. Truyền dữ liệu trả về và giá trị của tham số dataType. Và phải trả về dữ liệu mới (thậm chí có thể được xử lý) để truyền cho hàm success.

success

Khi gọi sau yêu cầu, truyền dữ liệu trả về và chuỗi chứa mã thành công.

complete

Khi yêu cầu hoàn thành, gọi hàm này, bất kể thành công hay thất bại. Truyền đối tượng XMLHttpRequest và một chuỗi chứa mã thành công hoặc lỗi.

Loại dữ liệu

Hàm $.ajax() phụ thuộc vào thông tin được cung cấp bởi máy chủ để xử lý dữ liệu trả về. Nếu máy chủ báo cáo rằng dữ liệu trả về là XML, kết quả có thể được duyệt bằng các phương pháp XML thông thường hoặc bằng các chọn lọc của jQuery. Nếu thấy các loại khác, ví dụ như HTML, dữ liệu sẽ được đối xử như văn bản.

Bằng cách chọn dataType, bạn có thể chỉ định nhiều cách xử lý dữ liệu khác nhau. Ngoài XML đơn thuần, bạn có thể chỉ định html, json, jsonp, script hoặc text.

Trong đó, dữ liệu loại text và xml sẽ không được xử lý. Dữ liệu chỉ đơn giản được truyền qua thuộc tính responseText hoặc responseHTML của XMLHttpRequest để chuyển cho hàm success.

Lưu ý:Chúng ta phải đảm bảo rằng loại MIME được báo cáo bởi máy chủ web phải khớp với dataType mà chúng ta chọn. Ví dụ, nếu là XML, máy chủ phải khai báo text/xml hoặc application/xml để có kết quả nhất quán.

Nếu được chỉ định là loại html, bất kỳ JavaScript nào được chèn trong HTML sẽ được thực thi trước khi được trả về như một chuỗi. Tương tự, nếu chỉ định loại script, mã JavaScript được tạo trên máy chủ cũng sẽ được thực thi trước khi được trả về dưới dạng dữ liệu văn bản.

Nếu chỉ định là loại json, dữ liệu được lấy sẽ được phân tích như một đối tượng JavaScript và đối tượng đã được xây dựng sẽ được trả về làm kết quả. Để thực hiện mục đích này, nó sẽ thử sử dụng JSON.parse(). Nếu trình duyệt không hỗ trợ, sẽ sử dụng một hàm để xây dựng.

Dữ liệu JSON là một loại dữ liệu cấu trúc có thể dễ dàng được phân tích bằng JavaScript. Nếu tệp dữ liệu được lưu trữ trên máy chủ từ xa (địa chỉ miền khác, tức là lấy dữ liệu qua域),则需要 sử dụng loại jsonp. Khi sử dụng loại này, sẽ tạo ra một tham số chuỗi truy vấn callback=? và thêm vào URL yêu cầu. Máy chủ cần thêm tên hàm gọi lại trước dữ liệu JSON để hoàn thành một yêu cầu JSONP hợp lệ. Nếu muốn chỉ định tên tham số hàm gọi lại thay vì giá trị mặc định callback, có thể thiết lập tham số jsonp của $.ajax().

Lưu ý:JSONP là một mở rộng của định dạng JSON. Nó yêu cầu một số mã máy chủ để kiểm tra và xử lý các tham số chuỗi truy vấn.

Nếu đã chỉ định loại script hoặc jsonp, thì khi nhận dữ liệu từ máy chủ, thực tế là đã sử dụng thẻ <script> thay vì đối tượng XMLHttpRequest. Trong trường hợp này, $.ajax() sẽ không trả về đối tượng XMLHttpRequest và cũng không truyền các hàm xử lý sự kiện, chẳng hạn như beforeSend.

Gửi dữ liệu đến máy chủ

Mặc định, yêu cầu Ajax sử dụng phương pháp GET. Nếu muốn sử dụng phương pháp POST, có thể thiết lập giá trị của tham số type. Tùy chọn này cũng ảnh hưởng đến cách nội dung của tùy chọn data được gửi đến máy chủ.

Tùy chọn data có thể chứa một chuỗi truy vấn, chẳng hạn như key1=value1&key2=value2, hoặc là một ánh xạ, chẳng hạn như {key1: 'value1', key2: 'value2'}. Nếu sử dụng hình thức sau, dữ liệu sẽ được chuyển đổi thành chuỗi truy vấn khi gửi. Quá trình này cũng có thể được tránh bằng cách thiết lập tùy chọn processData thành false. Nếu chúng ta muốn gửi một đối tượng XML cho máy chủ, việc này có thể không phù hợp. Trong trường hợp này, chúng ta cũng nên thay đổi giá trị của tùy chọn contentType, sử dụng các loại MIME phù hợp thay vì mặc định application/x-www-form-urlencoded.

Tùy chọn cao cấp

Tùy chọn global được sử dụng để ngăn chặn các hàm hồi gọi được đăng ký để phản hồi, chẳng hạn như .ajaxSend, hoặc ajaxError, và các phương thức tương tự. Điều này rất hữu ích trong một số trường hợp, chẳng hạn như khi gửi yêu cầu rất thường xuyên và ngắn, có thể tắt này trong hàm ajaxSend.

Nếu máy chủ cần xác thực HTTP, có thể sử dụng tên người dùng và mật khẩu để thiết lập qua tùy chọn username và password.

Yêu cầu Ajax có thời gian giới hạn, vì vậy sau khi cảnh báo lỗi được bắt và xử lý, có thể sử dụng để cải thiện trải nghiệm người dùng. Tham số timeout thường giữ nguyên giá trị mặc định, hoặc thiết lập toàn cục thông qua jQuery.ajaxSetup, rất ít khi thiết lập lại tùy chọn timeout cho yêu cầu cụ thể.

Mặc định, yêu cầu sẽ luôn được gửi đi, nhưng trình duyệt có thể lấy dữ liệu từ bộ nhớ cache của nó. Để không sử dụng kết quả từ bộ nhớ cache, có thể đặt tham số cache thành false. Nếu muốn kiểm tra xem dữ liệu có thay đổi kể từ lần yêu cầu trước hay không và báo lỗi nếu có, có thể đặt ifModified thành true.

scriptCharset cho phép đặt một tập hợp ký tự đặc biệt cho yêu cầu của thẻ <script>, được sử dụng cho script hoặc dữ liệu jsonp. Khi tập hợp ký tự của script và trang khác nhau, điều này rất hữu ích.

Chữ cái đầu tiên của Ajax là chữ cái đầu của từ asynchronous, điều này có nghĩa là tất cả các hoạt động đều chạy song song, không có mối quan hệ về thứ tự hoàn thành. Tùy chọn async của $.ajax() luôn được đặt thành true, điều này đánh dấu rằng sau khi yêu cầu bắt đầu, mã khác vẫn có thể thực thi. Rất không khuyến khích đặt tùy chọn này thành false, điều này có nghĩa là tất cả các yêu cầu không còn là đồng bộ, điều này cũng có thể dẫn đến trình duyệt bị khóa.

$.ajax hàm trả về đối tượng XMLHttpRequest mà nó tạo ra. Thường thì jQuery chỉ xử lý và tạo ra đối tượng này trong nội bộ, nhưng người dùng cũng có thể truyền đối tượng xhr tự tạo của mình qua tùy chọn xhr. Đối tượng trả về thường đã bị bỏ đi, nhưng vẫn cung cấp một giao diện cốt lõi để quan sát và kiểm soát yêu cầu. Ví dụ, gọi phương thức .abort() trên đối tượng có thể ngừng yêu cầu trước khi hoàn thành.

jQuery Ajax Tham khảo