Bạn đang xem : Yêu cầu ajax với jquery

Mô tả: Thực hiện yêu cầu HTTP không đồng bộ (Ajax). < / p>

Trong jQuery 1.5, thuộc tính withCredentials không được truyền tới XHR gốc và do đó các yêu cầu CORS yêu cầu nó sẽ bỏ qua cờ này. Vì lý do này, chúng tôi khuyên bạn nên sử dụng jQuery 1.5.1+ nếu bạn yêu cầu sử dụng nó.

Một đối tượng của các cặp fieldName-fieldValue để đặt trên đối tượng XHR gốc. Ví dụ: bạn có thể sử dụng nó để đặt withCredentials thành true cho các yêu cầu tên miền chéo nếu cần.

Gọi lại để tạo đối tượng XMLHttpRequest. Mặc định là ActiveXObject khi có sẵn (IE), nếu không thì XMLHttpRequest. Ghi đè để cung cấp triển khai của riêng bạn cho XMLHttpRequest hoặc các cải tiến cho nhà máy.

Tên người dùng sẽ được sử dụng với XMLHttpRequest để đáp ứng yêu cầu xác thực quyền truy cập HTTP.

Một chuỗi chứa URL tới mà yêu cầu được gửi.

Một bí danh cho phương thức. Bạn nên sử dụng type nếu bạn đang sử dụng các phiên bản jQuery trước 1.9.0.

Đặt bạn này nếu bạn muốn sử dụng kiểu truyền thống của tuần tự hóa tham số

Đặt thời gian chờ (trong mili giây) cho yêu cầu. Giá trị 0 có nghĩa là sẽ không có thời gian chờ. Điều này sẽ ghi đè bất kỳ bộ thời gian chờ chung nào bằng $ .ajaxSetup (). Khoảng thời gian chờ bắt đầu tại thời điểm cuộc gọi được thực hiện; nếu một số yêu cầu khác đang được thực hiện và trình duyệt không có kết nối nào, có thể yêu cầu hết thời gian chờ trước khi nó có thể được gửi. đối tượng XMLHttpRequest sẽ ở trạng thái không hợp lệ nếu yêu cầu hết thời gian chờ; truy cập bất kỳ thành viên đối tượng nào có thể ném ra một exception.script và các yêu cầu JSONP không thể bị hủy sau thời gian chờ; tập lệnh sẽ chạy ngay cả khi nó đến sau khoảng thời gian chờ.

Một hàm sẽ được gọi nếu yêu cầu thành công. Hàm được truyền ba đối số: Dữ liệu trả về từ máy chủ, được định dạng theo tham số đo hoặc hàm gọi lại, nếu được chỉ định; một chuỗi mô tả trạng thái; và đối tượng (trong jQuery 1.4.x, XMLHttpRequest)., cài đặt thành công có thể chấp nhận một mảng các hàm. Lần lượt từng hàm sẽ được gọi. Đây là một Sự kiện Ajax

Nếu yêu cầu thành công, các hàm mã trạng thái nhận các tham số giống như lệnh gọi lại thành công; nếu nó dẫn đến lỗi (bao gồm cả chuyển hướng 3xx), chúng sẽ nhận các tham số giống như lệnh gọi lại lỗi.

Một đối tượng gồm các mã HTTP số và các hàm sẽ được gọi khi phản hồi có mã tương ứng. Ví dụ: phần sau sẽ cảnh báo khi trạng thái phản hồi là 404:

Chỉ áp dụng khi sử dụng phương thức truyền tải “tập lệnh”. Đặt thuộc tính bộ ký tự trên thẻ script được sử dụng trong yêu cầu. Được sử dụng khi ký tự được đặt trên trang cục bộ không giống với ký tự trên tập lệnh từ xa. Ngoài ra, thuộc tính bộ ký tự có thể được chỉ định trong scriptAttrs, điều này cũng sẽ đảm bảo việc sử dụng phương tiện truyền tải “script”.

Xác định một đối tượng có các thuộc tính bổ sung sẽ được sử dụng trong “script” hoặc “jsonp” lời yêu cầu. Khóa đại diện cho tên của thuộc tính và giá trị là giá trị của thuộc tính. Nếu đối tượng này được cung cấp, nó sẽ buộc sử dụng phương thức truyền thẻ script. Ví dụ: điều này có thể được sử dụng để thiết lập, phản công nhằm đáp ứng các yêu cầu của Chính sách bảo mật nội dung.

Theo mặc định, dữ liệu được chuyển vào tùy chọn dữ liệu dưới dạng một đối tượng (về mặt kỹ thuật, bất kỳ thứ gì khác ngoài chuỗi) sẽ được xử lý và được chuyển đổi thành một chuỗi truy vấn, phù hợp với loại nội dung mặc định “application / x-www-form-urlencoded”. Nếu bạn muốn gửi DOMDocument hoặc dữ liệu không được xử lý khác, hãy đặt tùy chọn này thành false.

Mật khẩu được sử dụng với XMLHttpRequest để phản hồi yêu cầu xác thực quyền truy cập HTTP.

Chỉ định tên hàm gọi lại cho một yêu cầu JSONP. Giá trị này sẽ được sử dụng thay cho tên ngẫu nhiên được tạo tự động bởi jQuery. Tốt hơn là để jQuery tạo một tên duy nhất vì nó sẽ giúp quản lý các yêu cầu và cung cấp các lệnh gọi lại và xử lý lỗi dễ dàng hơn. Bạn có thể muốn chỉ định lệnh gọi lại khi bạn muốn kích hoạt bộ nhớ đệm của trình duyệt tốt hơn đối với các yêu cầu GET. Kể từ jQuery 1.5, bạn cũng có thể sử dụng một hàm cho cài đặt này, trong trường hợp đó, giá trị của jsonpCallback được đặt thành giá trị trả về của hàm đó.

Ghi đè tên hàm gọi lại trong một yêu cầu JSONP. Giá trị này sẽ được sử dụng thay vì ‘callback’ trong ‘callback =?’ một phần của chuỗi truy vấn trong url. Vì vậy, {jsonp: ‘onJSONPLoad’} sẽ dẫn đến ‘onJSONPLoad =?’ được chuyển đến máy chủ. Kể từ jQuery 1.5, việc đặt tùy chọn jsonp thành false sẽ ngăn jQuery thêm chuỗi “? Callback” vào URL hoặc cố gắng sử dụng “=?” để chuyển đổi. Trong trường hợp này, bạn cũng nên đặt cài đặt jsonpCallback một cách rõ ràng. Ví dụ: {jsonp: false, jsonpCallback: “callbackName”}. Nếu bạn không tin tưởng mục tiêu của các yêu cầu Ajax của mình, hãy cân nhắc đặt thuộc tính jsonp thành false vì lý do bảo mật.

Cho phép môi trường hiện tại được công nhận là “cục bộ” (ví dụ: hệ thống tệp), thậm chí nếu jQuery không nhận ra nó như vậy theo mặc định. Các giao thức sau hiện được công nhận là cục bộ:, và. Nếu thiết lập cần sửa đổi, bạn nên thực hiện việc này một lần trong themethod.

Chỉ cho phép yêu cầu thành công nếu phản hồi đã thay đổi so với yêu cầu cuối cùng. Điều này được thực hiện bằng cách kiểm tra tiêu đề Last-Modified. Giá trị mặc định là false, bỏ qua tiêu đề. Trong jQuery 1.4, kỹ thuật này cũng kiểm tra ‘etag’ được máy chủ chỉ định để bắt dữ liệu chưa được sửa đổi.

Một đối tượng gồm các cặp khóa / giá trị tiêu đề bổ sung để gửi cùng với các yêu cầu bằng cách sử dụng phương thức truyền tải XMLHttpRequest. Dấu hoa thị luôn được thêm vào, nhưng giá trị mặc định của nó có thể được thay đổi tại đây. Các giá trị trong cài đặt cũng có thể được ghi đè từ bên trong chức năng.

Có kích hoạt trình xử lý sự kiện Ajax toàn cầu cho yêu cầu này hay không. Giá trị mặc định là. Đặt để ngăn việc kích hoạt các trình xử lý toàn cầu nhưorfrom. Điều này có thể được sử dụng để kiểm soát các Sự kiện Ajax khác nhau

Một hàm sẽ được gọi nếu yêu cầu không thành công. Hàm nhận ba đối số: Đối tượng jqXHR (trong jQuery 1.4.x, XMLHttpRequest), một chuỗi mô tả loại lỗi đã xảy ra và một đối tượng ngoại lệ tùy chọn, nếu một lỗi xảy ra. Các giá trị có thể có cho đối số thứ hai (bên cạnh) là, và. Khi lỗi HTTP xảy ra, hãy nhận phần văn bản của trạng thái HTTP, chẳng hạn như “Không tìm thấy” hoặc “Lỗi máy chủ nội bộ”. (trong HTTP / 2 thay vào đó nó có thể là một chuỗi trống), việc thiết lập có thể chấp nhận một mảng các hàm. Lần lượt từng hàm sẽ được gọi, trình xử lý này không được gọi cho các yêu cầu JSONP miền chéo và miền chéo. Đây là một Sự kiện Ajax

Loại dữ liệu mà bạn đang mong đợi từ máy chủ. Nếu không có gì được chỉ định, jQuery sẽ cố gắng suy ra nó dựa trên kiểu MIME của phản hồi (kiểu MIME XML sẽ mang lại XML, trong 1.4 JSON sẽ mang lại một đối tượng JavaScript, trong 1.4 script sẽ thực thi script và bất kỳ thứ gì khác sẽ trả về dưới dạng một chuỗi). Các loại có sẵn (và kết quả được chuyển làm đối số đầu tiên cho lệnh gọi lại thành công của bạn) là:

Xem Thêm  Hình ảnh HTML - cách thêm hình ảnh trong html

Một hàm được sử dụng để xử lý dữ liệu phản hồi thô của XMLHttpRequest. Đây là một chức năng lọc trước để làm sạch phản hồi. Bạn nên trả lại dữ liệu đã làm sạch. Hàm chấp nhận hai đối số: Dữ liệu thô được trả về từ máy chủ và tham số ‘dataType’.

Trong các yêu cầu với dataType: “json” hoặc dataType: “jsonp”, nếu chuỗi chứa dấu chấm hỏi kép (??) ở bất kỳ vị trí nào trong URL hoặc một dấu chấm hỏi (?) trong chuỗi truy vấn, nó được thay thế bằng một giá trị do jQuery tạo ra, giá trị duy nhất cho mỗi bản sao của thư viện trên trang (ví dụ: jQuery21406515378922229067_1479880736745).

Khi dữ liệu được chuyển dưới dạng một chuỗi, nó phải được mã hóa bằng cách sử dụng mã hóa chính xác cho contentType, theo mặc định là application / x-www-form-urlencoded.

Khi dữ liệu là một đối tượng, jQuery tạo chuỗi dữ liệu từ các cặp khóa / giá trị của đối tượng trừ khi tùy chọn processData được đặt thành false. Ví dụ: {a: “bc”, d: “e, f”} được chuyển đổi thành chuỗi “a = bc & amp; d = e% 2Cf”. Nếu giá trị là một mảng, jQuery sắp xếp nhiều giá trị với cùng một khóa dựa trên giá trị của cài đặt truyền thống (mô tả bên dưới). Ví dụ: {a: [1,2]} trở thành chuỗi “a% 5B% 5D = 1 & amp; a% 5B% 5D = 2” với cài đặt truyền thống mặc định: false.

Dữ liệu được được gửi đến máy chủ. Nếu phương thức HTTP là phương thức không thể có phần thân thực thể, chẳng hạn như GET, thì dữ liệu sẽ được nối vào URL.

Nếu bạn muốn buộc yêu cầu crossDomain (chẳng hạn như JSONP) trên cùng một miền, đặt giá trị của crossDomain thành. Ví dụ: điều này cho phép chuyển hướng phía máy chủ sang một miền khác.

Một đối tượng chứa các bộ chuyển đổi dataType-to-dataType. Mỗi giá trị của bộ chuyển đổi là một hàm trả về giá trị đã biến đổi của phản hồi.

Đối tượng này sẽ là ngữ cảnh của tất cả các lệnh gọi lại liên quan đến Ajax. Theo mặc định, ngữ cảnh là một đối tượng đại diện cho cài đặt Ajax được sử dụng trong cuộc gọi (được hợp nhất với cài đặt được chuyển đến). Ví dụ: việc chỉ định một phần tử DOM làm ngữ cảnh sẽ làm cho ngữ cảnh đó trở thành ngữ cảnh của một yêu cầu, như sau:

Khi gửi dữ liệu đến máy chủ, hãy sử dụng loại nội dung này. Mặc định là “application / x-www-form-urlencoded; charset = UTF-8”, phù hợp với hầu hết các trường hợp. Nếu bạn chuyển một cách rõ ràng kiểu nội dung đến $ .ajax (), thì nó luôn được gửi đến máy chủ (ngay cả khi không có dữ liệu nào được gửi). Kể từ jQuery 1.6, bạn có thể chuyển false để yêu cầu jQuery không đặt bất kỳ tiêu đề loại nội dung nào. Lưu ý: Đặc tả W3C XMLHttpRequest ra lệnh rằng bộ ký tự luôn là UTF-8; việc chỉ định một bộ ký tự khác sẽ không buộc trình duyệt thay đổi bảng mã. Lưu ý: Đối với các yêu cầu tên miền chéo, việc đặt loại nội dung thành bất kỳ thứ gì khác ngoài application / x-www-form-urlencoded, multiart / form-data hoặc text / pure sẽ kích hoạt trình duyệt gửi yêu cầu TÙY CHỌN trước đến máy chủ.

Một đối tượng của các cặp chuỗi / biểu thức chính quy xác định cách jQuery sẽ phân tích cú pháp phản hồi, dựa trên loại nội dung của nó.

Một hàm sẽ được gọi khi yêu cầu kết thúc (sau khi thực thi ). Hàm được truyền hai đối số: Đối tượng jqXHR (trong jQuery 1.4.x, XMLHTTPRequest) và một chuỗi phân loại trạng thái của yêu cầu (hoặc)., Việc thiết lập có thể chấp nhận một mảng hàm. Lần lượt từng hàm sẽ được gọi. Đây là Sự kiện Ajax

Nếu được đặt thành false, nó sẽ buộc các trang được yêu cầu không được trình duyệt lưu vào bộ nhớ cache. Lưu ý: Đặt bộ nhớ cache thành false sẽ chỉ hoạt động chính xác với các yêu cầu HEAD và GET. Nó hoạt động bằng cách thêm “_ = {timestamp}” vào các tham số GET. Tham số này không cần thiết cho các loại yêu cầu khác, ngoại trừ trong IE8 khi POST được thực hiện tới một URL đã được GET yêu cầu.

Có thể sử dụng hàm gọi lại yêu cầu trước để sửa đổi đối tượng jqXHR (trong jQuery 1.4.x, XMLHTTPRequest) trước khi nó được gửi đi. Sử dụng điều này để đặt tiêu đề tùy chỉnh, v.v. Các đối tượng jqXHR và cài đặt được chuyển dưới dạng đối số. Đây là một sự kiện Ajax. Quay lại chức năng sẽ hủy yêu cầu., Tùy chọn sẽ được gọi bất kể loại yêu cầu nào.

Theo mặc định, tất cả các yêu cầu được gửi không đồng bộ (nghĩa là tùy chọn này được đặt thành true theo mặc định). Nếu bạn cần các yêu cầu đồng bộ, hãy đặt tùy chọn này thành false. Yêu cầu tên miền chéo và dataType: Yêu cầu “jsonp” không hỗ trợ hoạt động đồng bộ. Lưu ý rằng các yêu cầu đồng bộ có thể tạm thời khóa trình duyệt, vô hiệu hóa bất kỳ hành động nào trong khi yêu cầu đang hoạt động. Kể từ jQuery 1.8, việc sử dụng async: false với jqXHR ($ .Deferred) không được dùng nữa; bạn phải sử dụng các tùy chọn gọi lại thành công / lỗi / hoàn thành thay vì các phương thức tương ứng của đối tượng jqXHR, chẳng hạn như jqXHR.done ().

Một tập hợp các cặp khóa / giá trị ánh xạ một givento kiểu MIME của nó, được gửi trong tiêu đề yêu cầu. Tiêu đề này cho máy chủ biết loại phản hồi mà nó sẽ chấp nhận để đổi lại. Ví dụ: phần sau xác định một kiểu đánh máy tùy chỉnh được gửi cùng với yêu cầu: Bạn sẽ cần chỉ định một mục bổ sung cho loại này để thông tin này hoạt động bình thường.

Một tập hợp các cặp khóa / giá trị định cấu hình Ajax lời yêu cầu. Tất cả các cài đặt là tùy chọn. Bạn có thể đặt mặc định cho bất kỳ tùy chọn nào với $ .ajaxSetup ()

Một tập hợp các cặp khóa / giá trị định cấu hình yêu cầu Ajax. Tất cả các cài đặt là tùy chọn. Bạn có thể đặt mặc định cho bất kỳ tùy chọn nào với $ .ajaxSetup (). Xem jQuery.ajax (cài đặt) bên dưới để biết danh sách đầy đủ tất cả các cài đặt.

Một chuỗi chứa URL mà yêu cầu được gửi đến.

$ .ajax ( ) hàm làm cơ sở cho tất cả các yêu cầu Ajax được gửi bởi jQuery. Thường không cần gọi trực tiếp hàm này vì một số lựa chọn thay thế cấp cao hơn như $ .get () .load () có sẵn và dễ sử dụng hơn. Tuy nhiên, nếu cần các tùy chọn ít phổ biến hơn, thì $ .ajax () có thể được sử dụng linh hoạt hơn.

Đơn giản nhất, hàm $ .ajax () có thể được gọi mà không có đối số:

1

 

$ .ajax ();

Lưu ý: Bạn có thể đặt cài đặt mặc định trên toàn cầu bằng cách sử dụng hàm $ .ajaxSetup () .

Ví dụ này, không sử dụng tùy chọn nào, tải nội dung của trang hiện tại, nhưng không làm gì với kết quả. Để sử dụng kết quả, bạn có thể triển khai một trong các hàm gọi lại.

Đối tượng jqXHR

Đối tượng jQuery XMLHttpRequest (jqXHR) được trả về bởi $ .ajax () kể từ jQuery 1.5 là một tập hợp siêu đối tượng XMLHttpRequest gốc của trình duyệt. Ví dụ: nó chứa các thuộc tính responseText responseXML , cũng như phương thức getResponseHeader () . Khi cơ chế truyền tải không phải là XMLHttpRequest (ví dụ: thẻ tập lệnh cho một yêu cầu JSONP) thì đối tượng jqXHR sẽ mô phỏng chức năng XHR gốc nếu có thể.

Kể từ jQuery 1.5.1 , đối tượng jqXHR cũng chứa phương thức overrideMimeType () (nó có sẵn trong jQuery 1.4.x , nhưng đã tạm thời bị xóa trong jQuery 1.5). .overrideMimeType ()Ví dụ: phương thức có thể được sử dụng trong hàm gọi lại beforeSend () để sửa đổi tiêu đề loại nội dung phản hồi:

1

2

3

4

5

6

7

8

9

10

11

 

$ .ajax ({

url < / p>:

"https://fiddle.jshell.net/favicon.png"

,

beforeSend

:

function

(

xhr

)

{

xhr.overrideMimeType (

" text / trơn; charset = x-do người dùng xác định "

);

}

})

.done (

function

(

data

)

{

if

(

console

& amp; & amp;

console

.log) {

console

.log (

"Mẫu của dữ liệu: "

, data.slice (

0

,

100

));

}

});

Các đối tượng jqXHR được trả về bởi $ .ajax () kể từ khi jQuery 1.5 triển khai giao diện Promise, cung cấp cho chúng tất cả các thuộc tính, phương thức và hành vi của Promise (xem Đối tượng được hoãn lại < / span> để biết thêm thông tin). Các phương thức này nhận một hoặc nhiều đối số hàm được gọi khi yêu cầu $ .ajax () kết thúc. Điều này cho phép bạn chỉ định nhiều lệnh gọi lại trên một yêu cầu và thậm chí chỉ định lệnh gọi lại sau khi yêu cầu có thể đã hoàn thành. (Nếu yêu cầu đã hoàn tất, lệnh gọi lại sẽ được kích hoạt ngay lập tức.) Các phương thức Promise có sẵn của đối tượng jqXHR bao gồm:

  • jqXHR.done (hàm (dữ liệu, textStatus, jqXHR) {});

    Một cấu trúc thay thế cho tùy chọn gọi lại thành công, hãy tham khảo deferred.done () để biết chi tiết triển khai.

  • jqXHR.fail (function (jqXHR, textStatus, errorThrown) {});

    Một cấu trúc thay thế cho tùy chọn gọi lại lỗi, phương thức .fail () thay thế phương thức .error () không dùng nữa. Tham khảo deferred.fail () để biết chi tiết triển khai.

  • jqXHR.always (hàm (dữ liệu | jqXHR, textStatus, jqXHR | errorThrown) {}); (được thêm vào jQuery 1.6)

    Một cấu trúc thay thế cho tùy chọn gọi lại hoàn chỉnh, phương thức .always () thay thế phương thức .complete () không dùng nữa.

    Để phản hồi một yêu cầu thành công, các đối số của hàm giống với các đối số của .done () : data, textStatus và đối tượng jqXHR. Đối với các yêu cầu không thành công, các đối số giống như đối số của .fail () : đối tượng jqXHR, textStatus và errorThrown. Tham khảo deferred.always () để biết chi tiết triển khai.

  • jqXHR.then (function (data, textStatus, jqXHR) {}, function (jqXHR, textStatus, errorThrown) {});

    Kết hợp chức năng của các phương thức .done () .fail () , cho phép (kể từ jQuery 1.8) thao tác Promise cơ bản. Tham khảo deferred.then () để biết chi tiết triển khai.

Thông báo ngừng sử dụng: jqXHR.success () , jqXHR.error () jqXHR.complete () < / code> callbacks bị loại bỏ kể từ jQuery 3.0. Thay vào đó, bạn có thể sử dụng jqXHR.done () , jqXHR.fail () jqXHR.always () .

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

 

< mã>

var

jqxhr = $ .ajax (

"example.php"

)

.done (

function

(

)

{

alert (

"thành công"

) ;

})

.fail (

function

(

)

{

alert (

"error"

);

})

.always (

function

(

)

{

alert (

"complete"

);

}) ;

jqxhr.always (

function

(

)

{

alert (

"thứ hai hoàn thành"

);

});

Tham chiếu this trong tất cả các lệnh gọi lại là đối tượng trong tùy chọn context được chuyển đến $ .ajax trong cài đặt; nếu context không được chỉ định, thì this là một tham chiếu đến chính cài đặt Ajax.

Để tương thích ngược với XMLHttpRequest , đối tượng jqXHR sẽ hiển thị các thuộc tính và phương thức sau:

  • readyState
  • responseXML và / hoặc responseText khi yêu cầu cơ bản được phản hồi bằng xml và / hoặc văn bản, tương ứng
  • trạng thái
  • statusText (có thể là một chuỗi trống trong HTTP / 2)
  • hủy bỏ ([statusText])
  • getAllResponseHeaders () dưới dạng một chuỗi
  • getResponseHeader (tên)
  • overrideMimeType (mimeType)
  • setRequestHeader (name, value) rời khỏi tiêu chuẩn bằng cách thay thế giá trị cũ bằng giá trị mới thay vì nối giá trị mới với giá trị cũ
  • statusCode (callbacksByStatusCode)

Không có cơ chế onreadystatechange nào được cung cấp, tuy nhiên, vì done , fail , always statusCode bao gồm tất cả các yêu cầu có thể hình dung được.

Hàng đợi Hàm Gọi lại

Tất cả các tùy chọn beforeSend , error , dataFilter , success complete chấp nhận các hàm gọi lại được gọi vào những thời điểm thích hợp.

Kể từ jQuery 1.5 , fail done và kể từ jQuery 1.6, luôn luôn gọi lại hook là các hàng đợi được quản lý đầu vào, ra trước, cho phép nhiều hơn một lần gọi lại cho mỗi hook. Xem Các phương thức đối tượng được hoãn lại , được triển khai nội bộ cho các móc gọi lại $ .ajax () này.

Các móc gọi lại được cung cấp bởi $ .ajax () như sau:

  1. Tùy chọn gọi lại beforeSend được gọi; nó nhận đối tượng jqXHR và đối tượng settings dưới dạng tham số.
  2. Tùy chọn gọi lại error được gọi nếu yêu cầu không thành công. Nó nhận được jqXHR , một chuỗi chỉ ra loại lỗi và một đối tượng ngoại lệ nếu có. Một số lỗi tích hợp sẽ cung cấp một chuỗi làm đối tượng ngoại lệ: "abort", "timeout", "No Transport".
  3. Tùy chọn gọi lại dataFilter được gọi ngay sau khi nhận thành công dữ liệu phản hồi. Nó nhận dữ liệu trả về và giá trị của dataType , đồng thời phải trả về dữ liệu (có thể bị thay đổi) để chuyển sang thành công .
  4. Tùy chọn gọi lại thành công được gọi, nếu yêu cầu thành công. Nó nhận dữ liệu trả về, một chuỗi chứa mã thành công và đối tượng jqXHR .
  5. Hứa hẹn gọi lại - .done () , .fail () , .always () .then () - được gọi, theo thứ tự chúng được đăng ký.
  6. Tùy chọn gọi lại hoàn thành kích hoạt khi yêu cầu kết thúc, dù thất bại hay thành công. Nó nhận đối tượng jqXHR , cũng như một chuỗi chứa mã thành công hoặc mã lỗi.

Loại dữ liệu

Các kiểu phản hồi khác nhau đối với lệnh gọi $ .ajax () phải trải qua các kiểu xử lý trước khác nhau trước khi được chuyển đến trình xử lý thành công. Theo mặc định, loại xử lý trước phụ thuộc vào Loại nội dung của phản hồi, nhưng có thể được đặt rõ ràng bằng cách sử dụng tùy chọn dataType . Nếu tùy chọn dataType được cung cấp, tiêu đề Loại-Nội dung của phản hồi sẽ bị bỏ qua.

Các kiểu dữ liệu có sẵn là text , html , xml , json , jsonp script .

If text hoặc html được chỉ định, không xảy ra quá trình xử lý trước. Dữ liệu chỉ được chuyển tới trình xử lý thành công và được cung cấp thông qua thuộc tính responseText của đối tượng jqXHR .

Nếu xml được chỉ định, phản hồi sẽ được phân tích cú pháp bằng jQuery.parseXML trước khi được chuyển, dưới dạng XMLDocument , tới trình xử lý thành công. Tài liệu XML được cung cấp thông qua thuộc tính responseXML của đối tượng jqXHR .

Nếu json được chỉ định, phản hồi sẽ được phân tích cú pháp bằng jQuery.parseJSON trước khi được chuyển, dưới dạng một đối tượng, tới trình xử lý thành công. Đối tượng JSON được phân tích cú pháp được cung cấp thông qua thuộc tính responseJSON của đối tượng jqXHR .

Nếu script được chỉ định, $ .ajax () sẽ thực thi JavaScript nhận được từ máy chủ trước khi chuyển nó đến trình xử lý thành công dưới dạng một chuỗi. < / p>

Nếu jsonp được chỉ định, $ .ajax () sẽ tự động nối tham số chuỗi truy vấn của (theo mặc định) callback =? vào URL. Thuộc tính jsonp jsonpCallback của cài đặt được chuyển đến $ .ajax () có thể được sử dụng để chỉ định tên của chuỗi truy vấn tương ứng và tên của hàm gọi lại JSONP. Máy chủ phải trả về JavaScript hợp lệ chuyển phản hồi JSON vào hàm gọi lại. $ .ajax () sẽ thực thi JavaScript được trả về, gọi hàm gọi lại JSONP, trước khi chuyển đối tượng JSON có trong phản hồi tới trình xử lý thành công $ .ajax () .

Để biết thêm thông tin về JSONP, hãy xem bài đăng gốc nêu chi tiết việc sử dụng JSONP.

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

Theo mặc định, các yêu cầu Ajax được gửi bằng phương thức GET HTTP. Nếu phương thức POST là bắt buộc, phương thức này có thể được chỉ định bằng cách đặt giá trị cho tùy chọn type . Tùy chọn này ảnh hưởng đến cách nội dung của tùy chọn data được gửi đến máy chủ. Dữ liệu POST sẽ luôn được truyền tới máy chủ bằng cách sử dụng bộ ký tự UTF-8, theo tiêu chuẩn W3C XMLHTTPRequest.

Tùy chọn data có thể chứa chuỗi truy vấn có dạng key1 = value1 & amp; key2 = value2 hoặc đối tượng có dạng {key1: ' value1 ', key2:' value2 '} . Nếu biểu mẫu thứ hai được sử dụng, dữ liệu sẽ được chuyển đổi thành một chuỗi truy vấn bằng cách sử dụng jQuery.param () trước khi được gửi đi. Quá trình xử lý này có thể được tránh bằng cách đặt processData thành false . Việc xử lý có thể không mong muốn nếu bạn muốn gửi một đối tượng XML đến máy chủ; trong trường hợp này, hãy thay đổi tùy chọn contentType từ application / x-www-form-urlencoded sang loại MIME thích hợp hơn.

Tùy chọn nâng cao

Tùy chọn global ngăn các trình xử lý được đăng ký bằng .ajaxSend () , .ajaxError () và các phương pháp tương tự để kích hoạt khi yêu cầu này kích hoạt chúng. Điều này có thể hữu ích, chẳng hạn như loại bỏ chỉ báo tải được triển khai với .ajaxSend () nếu các yêu cầu thường xuyên và ngắn gọn. Với tập lệnh tên miền chéo và các yêu cầu JSONP, tùy chọn chung được tự động đặt thành false . Xem mô tả về các phương pháp này bên dưới để biết thêm chi tiết.

Nếu máy chủ thực hiện xác thực HTTP trước khi cung cấp phản hồi, thì cặp tên người dùng và mật khẩu có thể được gửi qua các tùy chọn tên người dùng mật khẩu .

Các yêu cầu Ajax có giới hạn thời gian, do đó, lỗi có thể được phát hiện và xử lý để mang lại trải nghiệm người dùng tốt hơn. Thời gian chờ yêu cầu thường được để ở chế độ mặc định hoặc được đặt làm mặc định chung bằng cách sử dụng $ .ajaxSetup () thay vì bị ghi đè cho các yêu cầu cụ thể với timeout tùy chọn.

Theo mặc định, các yêu cầu luôn được đưa ra, nhưng trình duyệt có thể cung cấp kết quả từ bộ nhớ cache của nó. Để không cho phép sử dụng kết quả đã lưu trong bộ nhớ cache, hãy đặt cache thành false . Để yêu cầu báo cáo không thành công nếu nội dung không được sửa đổi kể từ lần yêu cầu cuối cùng, hãy đặt ifModified thành true .

Thẻ scriptCharset cho phép bộ ký tự được chỉ định rõ ràng cho các yêu cầu sử dụng thẻ & lt; script & gt; (nghĩa là một loại script hoặc jsonp ). Điều này rất hữu ích nếu tập lệnh và trang lưu trữ có các bộ ký tự khác nhau.

Chữ cái đầu tiên trong Ajax là viết tắt của "asynchronous", nghĩa là hoạt động diễn ra song song và thứ tự hoàn thành không được đảm bảo. Tùy chọn async thành $ .ajax () mặc định thành true , cho biết rằng việc thực thi mã có thể tiếp tục sau khi yêu cầu được thực hiện. Đặt tùy chọn này thành false (và do đó làm cho cuộc gọi không còn là không đồng bộ nữa) không được khuyến khích vì nó có thể khiến trình duyệt không phản hồi.

Hàm $ .ajax () trả về đối tượng XMLHttpRequest mà nó tạo. Thông thường jQuery xử lý việc tạo đối tượng này trong nội bộ, nhưng một hàm tùy chỉnh để sản xuất có thể được chỉ định bằng cách sử dụng tùy chọn xhr . Đối tượng trả về thường có thể bị loại bỏ, nhưng cung cấp giao diện cấp thấp hơn để quan sát và thao tác yêu cầu. Đặc biệt, việc gọi .abort () trên đối tượng sẽ tạm dừng yêu cầu trước khi hoàn tất.

Mở rộng Ajax

Kể từ jQuery 1.5 , việc triển khai Ajax của jQuery bao gồm prefilters , transport và các bộ chuyển đổi cho phép bạn mở rộng Ajax với rất nhiều tính linh hoạt.

Sử dụng Trình chuyển đổi

Bộ chuyển đổi

​​ $ .ajax () hỗ trợ ánh xạ các loại dữ liệu sang các loại dữ liệu khác. Tuy nhiên, nếu bạn muốn ánh xạ một loại dữ liệu tùy chỉnh sang một loại đã biết (ví dụ: json ), bạn phải thêm sự tương ứng giữa Content-Type phản hồi và loại dữ liệu thực tế bằng cách sử dụng nội dung tùy chọn :

1

2

3

4

5

6

7

8

9

10

11

 

$ .ajaxSetup ({

nội dung < / p>: {

mycustomtype

:

/ mycustomtype /

},

trình chuyển đổi

: {

"mycustomtype json" :

function

(

result

)

{< / code>

return newresult;

}

}

});

Đối tượng bổ sung này là cần thiết vì phản hồi Loại nội dung và kiểu dữ liệu không bao giờ có sự tương ứng chặt chẽ với một đối một (do đó là biểu thức chính quy).

Để chuyển đổi từ một loại được hỗ trợ (ví dụ: text , json ) sang một loại dữ liệu tùy chỉnh và quay lại một lần nữa, hãy sử dụng một công cụ chuyển đổi truyền qua khác:

1

2

3

4

5

6

7

8

9

10

11

12

 

$ .ajaxSetup ({

nội dung < / p>: {

mycustomtype

:

/ mycustomtype /

},

trình chuyển đổi

: {

"text mycustomtype" :

true

,

"mycustomtype json "

:

function

(

result

) {

return

newresult;

}

}

});

Hiện tại, phần mềm ở trên cho phép chuyển từ text sang mycustomtype và sau đó mycustomtype sang json .


Xem thêm những thông tin liên quan đến chủ đề yêu cầu ajax với jquery

jQuery 47 - Ajax 4 - Get, Post and Load ajax methods

  • Tác giả: Ankpro Training
  • Ngày đăng: 2017-02-17
  • Đánh giá: 4 ⭐ ( 5391 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: jQuery get() , post() and load().
    Below methods perform more common type of Ajax requests in less code :

    jQuery.get() or $.get() : Load data from the server using a HTTP GET request.
    jQuery.post() or $.post() : Load data from the server using a HTTP POST request.
    jQuery.load() or $.load() : Load data from the server and place the returned HTML into the matched element.

    ankpro
    ankpro training
    Asp.net MVC
    C
    C sharp
    Bangalore
    Rajajinagar
    Selenium
    Coded UI
    Mobile automation testing
    Mobile testing
    JQuery
    JavaScript
    .Net
    Components of the .Net framework
    Hello World

Cách sử dụng hàm "ajax" của jQuery

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 3 ⭐ ( 3854 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu đã theo dõi ba bài hướng dẫn trước, thì bạn chắc đã hiểu rõ về AJAX. Trong bài cuối cùng này, chúng ta sẽ tổng hợp mọi thứ bằng cách làm việc với một ví dụ phức tạp hơn.
    Mã HTML Để có được...

Bạn Đã Biết Sử Dụng AJAX Với jQuery Chưa?

  • Tác giả: hocspringmvc.net
  • Đánh giá: 5 ⭐ ( 7759 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: AJAX không còn xa lạ và đã trở thành một phần không thể thiếu trong thiết kế website và là một trong các module thành công nhất từ trước đến giờ

Hiểu thêm JQuery Ajax và kiến thức cơ bản

  • Tác giả: topdev.vn
  • Đánh giá: 3 ⭐ ( 5174 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: AJAX - "Asynchronous JavaScript and XML" - là một bộ công cụ cho phép load dữ liệu từ server mà không yêu cầu tải lại trang. Nó sử dụng chức năng sẵn có XMLHttpRequest(XHR) của trình duyệt để thực hiện một yêu cầu đến server và xử lý dữ liệu server trả về.

Jquery Ajax là gì và cách sử dụng Ajax tối ưu

  • Tác giả: freelancervietnam.vn
  • Đánh giá: 3 ⭐ ( 9844 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

JQuery Ajax và kiến thức cơ bản

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 7429 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới Thiệu AJAX - "Asynchronous JavaScript and XML" - là một bộ công cụ cho phép load dữ liệu từ server mà không yêu cầu tải lại trang. Nó sử dụng chức năng sẵn có XMLHttpRequest(XHR) của trình duyệt...

AJAX là gì? Cách sử dụng Ajax tối ưu nhất cho website - Trung tâm hỗ trợ kỹ thuật

  • Tác giả: wiki.matbao.net
  • Đánh giá: 3 ⭐ ( 2746 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: AJAX là gì? Là chữ viết tắt của Asynchronous JavaScript and XML, AJAX = Asynchronous JavaScript and XML giúp tạo web động mà không cần reload

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php