jQuery đã không dùng XMLHTTPRequest đồng bộ nữa

Giống như nhiều người khác, trang web của tôi đang sử dụng jQuery. Khi tôi mở các công cụ dành cho nhà phát triển, tôi thấy một cảnh báo cho biết rằng XMLHTTPRequest là

không được dùng nữa vì những tác động bất lợi của nó đối với trải nghiệm của người dùng cuối.

Tôi đã tiếp tục và đọc một phần của tài liệu , nhưng nó khá kỹ thuật. Ai đó có thể giải thích hậu quả của việc chuyển từ XMLHTTPRequest sang WHATWG bằng các thuật ngữ đơn giản không? Nó nói rằng nó đã xảy ra vào năm 2012.

Ngoài ra, tài liệu nói rằng Synchronous XMLHttpRequest bên ngoài worker đang trong quá trình bị xóa khỏi nền tảng web, khi điều đó xảy ra, nếu tác nhân người dùng có họ trong một dịch vụ, họ có cần sửa đổi mã hiện có của mình không?

Để tránh cảnh báo này, không sử dụng:

async: false

trong bất kỳ $.ajax()cuộc gọi nào của bạn . Đây là tính năng duy nhất XMLHttpRequestkhông được dùng nữa.

Mặc định là async: true, vì vậy nếu bạn không bao giờ sử dụng tùy chọn này, mã của bạn sẽ an toàn nếu tính năng thực sự bị xóa.

Tuy nhiên, có lẽ sẽ không - nó có thể bị xóa khỏi các tiêu chuẩn, nhưng tôi cá rằng các trình duyệt sẽ tiếp tục hỗ trợ nó trong nhiều năm. Vì vậy, nếu bạn thực sự cần AJAX đồng bộ vì lý do nào đó, bạn có thể sử dụng async: falsevà chỉ cần bỏ qua các cảnh báo. Nhưng có những lý do chính đáng khiến AJAX đồng bộ bị coi là kém phong cách, vì vậy có lẽ bạn nên cố gắng tìm cách tránh nó. Và những người viết ứng dụng Flash có lẽ cũng không bao giờ nghĩ rằng nó sẽ biến mất, nhưng nó đang trong quá trình loại bỏ dần.

Lưu ý rằng FetchAPI thay thế XMLHttpRequestthậm chí không cung cấp tùy chọn đồng bộ.

Câu trả lời được chấp nhận là đúng, nhưng tôi đã tìm thấy một nguyên nhân khác nếu bạn đang phát triển theo ASP.NET với Visual Studio 2013 trở lên và chắc chắn rằng bạn không thực hiện bất kỳ yêu cầu ajax đồng bộ nào hoặc xác định bất kỳ tập lệnh nào không đúng chỗ.

Giải pháp là tắt tính năng "Liên kết trình duyệt" bằng cách bỏ chọn "Bật liên kết trình duyệt" trong menu thả xuống của thanh công cụ VS được biểu thị bằng biểu tượng làm mới nhỏ trỏ theo chiều kim đồng hồ. Ngay sau khi bạn làm điều này và tải lại trang, các cảnh báo sẽ dừng lại!

Điều này chỉ xảy ra trong khi gỡ lỗi cục bộ, nhưng vẫn tốt để biết nguyên nhân của các cảnh báo.

Điều này đã xảy ra với tôi bằng cách có một liên kết đến js bên ngoài bên ngoài phần đầu ngay trước khi kết thúc phần nội dung. Bạn biết đấy, một trong những điều này:

<script src="http://somesite.net/js/somefile.js">

Nó không liên quan gì đến JQuery.

Bạn có thể sẽ thấy tương tự khi làm điều gì đó như thế này:

var script = $("<script></script>");
script.attr("src", basepath + "someotherfile.js");
$(document.body).append(script);

Nhưng tôi chưa thử nghiệm ý tưởng đó.

Nó đã được đề cập như một bình luận của @ henri-chan , nhưng tôi nghĩ nó đáng được quan tâm hơn:

Khi bạn cập nhật nội dung của một phần tử bằng html mới bằng jQuery / javascript và html mới này chứa <script>các thẻ, các thẻ đó được thực thi đồng bộ và do đó gây ra lỗi này. Tương tự với các bảng định kiểu.

Bạn biết điều này đang xảy ra khi bạn thấy (nhiều) tập lệnh hoặc biểu định kiểu đang được tải như XHRtrong cửa sổ bảng điều khiển. (firefox).

Không có câu trả lời nào trước đó (tất cả đều đúng) phù hợp với tình huống của tôi: Tôi không sử dụng asynctham số trong jQuery.ajax()và tôi không bao gồm thẻ tập lệnh như một phần của nội dung được trả về như:

<div> 
     SOME CONTENT HERE
</div>
<script src="/scripts/script.js"></script> 

Tình huống của tôi là tôi đang gọi hai yêu cầu AJAX liên tiếp với mục đích cập nhật hai div cùng một lúc:

function f1() {
     $.ajax(...); // XMLHTTP request to url_1 and append result to div_1
}

function f2() {
     $.ajax(...); // XMLHTTP request to url_2 and append result to div_2
}

function anchor_f1(){
$('a.anchor1').click(function(){
     f1();
})
}

function anchor_f2(){
$('a.anchor2').click(function(){
     f2();
});
}

// the listener of anchor 3 the source of problem
function anchor_problem(){
$('a.anchor3').click(function(){
     f1();
     f2();
});
}

anchor_f1();
anchor_f2();
anchor_problem();

Khi tôi nhấp vào a.anchor3, nó sẽ nâng cờ cảnh báo. Tôi đã giải quyết vấn đề bằng cách thay thế f2 gọi bằng click()hàm:

function anchor_problem(){
$('a.anchor_problem').click(function(){
     f1();
     $('a.anchor_f2').click();
});
}

Nơi làm việc của tôi: Tôi sử dụng các yêu cầu không đồng bộ kết xuất mã vào bộ đệm. Tôi có một vòng lặp kiểm tra bộ đệm mỗi giây. Khi kết xuất đã đến bộ đệm, tôi thực thi mã. Tôi cũng sử dụng thời gian chờ. Đối với người dùng cuối, trang hoạt động như thể các yêu cầu đồng bộ sẽ được sử dụng.

Nếu chúng tôi tải tập lệnh ở chế độ xem một phần thì vấn đề này sẽ xảy ra

1. Tôi đã xóa tập lệnh ở chế độ xem một phần và chuyển sang chế độ xem chính.

Giải pháp này hoạt động tốt đối với tôi