Tùy chọn jQuery ajax() - xhr

Question

Trong chức năng jQuery ajax có tùy chọn xhr. Có ai đó biết thêm chi tiết, khả năng sử dụng hoặc sử dụng mẫu của tùy chọn này không?

Answer 1

Trong thực tế, someone does know.

Tùy chọn xhr cho phép bạn xác định cuộc gọi lại của riêng bạn để tạo đối tượng XMLHttpRequest sẽ được sử dụng sau hậu trường trong cuộc gọi ajax(). Trong hầu hết mọi trường hợp, bạn không cần phải chỉ định tùy chọn này.

Answer 2

http://api.jquery.com/ là bạn của bạn. Từ trang web đó khi bạn tìm kiếm lệnh ajax():

xhr (Hàm): Gọi lại để tạo đối tượng XMLHttpRequest. Mặc định là ActiveXObject khi có sẵn (IE), XMLHttpRequest nếu không. Ghi đè để cung cấp triển khai của riêng bạn cho XMLHttpRequest hoặc các cải tiến cho factory.It không có sẵn trong jQuery 1.2.6 và trong bất kỳ phiên bản đầu tiên nào.

Nói chung, trừ khi bạn biết mình đang làm gì bạn thực sự sẽ không được sử dụng chức năng này của $ .ajax() chức năng

Answer 3

Tôi biết đây là một câu hỏi cũ, cũ nhưng tôi chỉ đang tìm kiếm và muốn đăng bài này để người tiếp theo hiểu được những gì đang diễn ra.

Đối với chức năng này, bạn muốn trả lại đối tượng XHR thích hợp cho trình duyệt của mình. Hành vi mặc định là sử dụng XMLHTTPRequest hoặc tương đương với IE. Đây là hành vi mặc định:

jQuery.ajaxSettings.xhr = window.ActiveXObject ? 
/* Microsoft failed to properly 
* implement the XMLHttpRequest in IE7 (can't request local files), 
* so we use the ActiveXObject when it is available 
* Additionally XMLHttpRequest can be disabled in IE7/IE8 so 
* we need a fallback. 
*/ 
function() { 
    return !this.isLocal && createStandardXHR() || createActiveXHR(); 
} : 
// For all other browsers, use the standard XMLHttpRequest object 
createStandardXHR; 

Hai phương pháp tạo createStandardXHR và createActiveXHR cơ bản gọi các phương pháp tạo XHR cơ bản tất cả chúng ta đã biết và yêu mến trong nhiều năm. Dưới đây là createStandardXHR:

function createStandardXHR() { 
try { 
    return new window.XMLHttpRequest(); 
} catch(e) {} 
} 

Vì vậy, nếu bạn muốn ghi đè này, bạn có thể chỉ cần vượt qua trong chức năng của riêng bạn mà trả về một đối tượng new XMLHttpRequest().

Tại sao bạn muốn thực hiện việc này? Giả sử bạn cần tạo một yêu cầu HTTP tên miền chéo và đang sử dụng một IFRAME shim để làm cho nó hoạt động bằng cách sử dụng document.domain để hoạt động trong cùng một quy tắc gốc. Đây là một cách tốt để làm cho javascript của bạn tải đối tượng XHR từ khung chính xác dựa trên tên miền bạn muốn nói chuyện.

Twitter.com sử dụng kỹ thuật này.

Chạy JavaScript trên http://twitter.com/ nhưng dữ liệu ở số http://api.twitter.com. Họ tạo ra một IFRAME trỏ tại api.twitter.com mà chỉ đơn giản là đặt document.domain đến "twitter.com". Họ cũng đặt document.domain thành "twitter.com" trong trang chính.

Sau đó, JS của họ, khi thực hiện yêu cầu HTTP, chỉ cần tạo nó từ IFRAME thay vì trang chính. Đưa họ qua chính sách cùng nguồn gốc.

Bạn có thể thực hiện việc này bằng tùy chọn xhr thành $ .ajax(). Dưới đây là một đoạn (tưởng tượng mã này chạy trên một trang tại http://myapp.com):

$.ajax({url: "http://api.myapp.com", xhr: function(){ 
    return new ($('#my_api_iframe')[0].contentWindow.XMLHttpRequest)(); 
}, success: function(html) { 
    // format and output result 
    } 
}); 

Điều đó sẽ làm việc miễn là cả hai trang chính và các iframe thiết document.domain của họ để cùng giá trị.(Đây là một ví dụ hackish: nó sẽ không hoạt động trong một số phiên bản IE vì tôi đã lừa và chỉ sử dụng đối tượng XMLHttpRequest chuẩn - bạn sẽ cần phải sửa.)

Hy vọng điều đó sẽ hữu ích.

(chỉnh sửa để thêm: đây là một kỹ thuật cần thiết cho các trình duyệt cũ - Hỗ trợ CORS trong hầu hết các trình duyệt hiện đại sẽ làm cho điều này không cần thiết)

Sujal

Answer 4

Một câu trả lời muộn, nhưng mã dưới đây là một ví dụ tuyệt vời về những gì bạn có thể làm khi bạn ghi đè tùy chọn xhr. This is taken from Ben Nolan's blog Nó cho phép bạn theo dõi tiến độ của một xhr nhận được. Tôi đã sử dụng điều này để tạo thanh tiến trình khi tải một tập dữ liệu json lớn, chính xác điều mà anh ta đã tạo ra cho nó. Nó đã giúp tôi một tấn.

interval = null 

$.ajax { 
    url : "endpoint.json" 

    dataType : 'json' 

    xhr :() => 
    xhr = jQuery.ajaxSettings.xhr() 

    interval = setInterval(=> 
     if xhr.readyState > 2 
     total = parseInt(xhr.getResponseHeader('Content-length')) 
     completed = parseInt(xhr.responseText.length) 
     percentage = (100.0/total * completed).toFixed(2) 

     console.log "Completed #{percentage}%" 
    , 50) 

    xhr 

    complete: -> 
    clearInterval(interval) 

    success : (data) => 
    alert(data) 
}