JavaScript console.log gây ra lỗi: XML đồng bộ XMLHttpRequest trên luồng chính bị phản đối

Tôi đã thêm nhật ký vào bảng điều khiển để kiểm tra trạng thái của các biến khác nhau mà không cần sử dụng trình gỡ lỗi Firefox.

Tuy nhiên, ở nhiều nơi tôi thêm một tệp console.logtrong main.jstệp của mình , tôi nhận được lỗi sau thay vì các tin nhắn viết tay nhỏ bé đáng yêu của mình gửi cho chính mình:

XMLHttpRequest đồng bộ trên luồng chính bị phản đối 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. Để được trợ giúp thêm http://xhr.spec.whatwg.org/

Những lựa chọn thay thế hoặc trình bao bọc console.lognào tôi có thể thêm vào mã sử dụng của mình sẽ không gây ra lỗi này?

Tôi có "làm sai" không?

Điều này xảy ra với tôi khi tôi lười biếng và bao gồm một thẻ script như là một phần của nội dung được trả lại. Như vậy:

Nội dung HTML một phần:

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

Ít nhất, trong trường hợp của tôi, có vẻ như nếu bạn trả lại nội dung HTML như thế qua xhr, bạn sẽ khiến jQuery thực hiện cuộc gọi để nhận tập lệnh đó. Cuộc gọi đó xảy ra với cờ async sai vì nó giả sử bạn cần tập lệnh để tiếp tục tải.

Trong những tình huống như thế này, bạn sẽ được phục vụ tốt hơn bằng cách xem xét một khung ràng buộc nào đó và chỉ cần trả về một đối tượng JSON, hoặc tùy thuộc vào phụ trợ và tạo khuôn mẫu của bạn, bạn có thể thay đổi cách bạn tải tập lệnh của mình.

Bạn cũng có thể sử dụng jQuerygetScript() để lấy các tập lệnh có liên quan. Đây là một câu đố, Nó chỉ là một bản sao thẳng của ví dụ jQuery, nhưng tôi không thấy bất kỳ cảnh báo nào được đưa ra khi các tập lệnh được tải theo cách đó.

Thí dụ

<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>

http://jsfiddle.net/49tkL0qd/

Thông báo cảnh báo CÓ THỂ do yêu cầu XMLHttpRequest trong luồng chính với cờ async được đặt thành false.

https://xhr.spec.whatwg.org/#synyncous-flag :

XMLHttpRequest bên ngoài công nhân đang trong quá trình xóa khỏi nền tảng web vì nó có ảnh hưởng bất lợi đến trải nghiệm của người dùng cuối. (Đây là một quá trình dài phải mất nhiều năm.) Các nhà phát triển không được chuyển sai cho đối số async khi môi trường toàn cầu JavaScript là môi trường tài liệu. Các tác nhân người dùng được khuyến khích mạnh mẽ để cảnh báo về việc sử dụng như vậy trong các công cụ dành cho nhà phát triển và có thể thử nghiệm ném ngoại lệ UnlimitedAccessError khi xảy ra.

Định hướng trong tương lai là chỉ cho phép XMLHttpRequests trong các luồng công nhân. Thông điệp được dự định là một cảnh báo cho hiệu ứng đó.

Tôi cũng gặp phải vấn đề tương tự nhưng có thể khắc phục bằng cách đặt async: true. Tôi biết nó là mặc định đúng nhưng nó hoạt động khi tôi viết nó rõ ràng

$.ajax({
   async: true,   // this will solve the problem
   type: "POST",
   url: "/Page/Method",
   contentType: "application/json",
   data: JSON.stringify({ ParameterName: paramValue }),
});

Trình gỡ lỗi trực tiếp của Visual Studio 2015/2017 đang tiêm mã chứa cuộc gọi không dùng nữa.

Đôi khi, cần phải tải ajax một tập lệnh nhưng trì hoãn tài liệu sẵn sàng cho đến khi tập lệnh được tải.

jQuery hỗ trợ điều này với holdReady()chức năng.

Ví dụ sử dụng:

$.holdReady(true);                              //set hold
function releaseHold() { $.holdReady(false); }  //callback to release hold
$.getScript('script.js', releaseHold);          //load script then release hold

Tải tập lệnh thực tế là không đồng bộ ( không có lỗi ), nhưng hiệu ứng là đồng bộ nếu phần còn lại của JavaScript chạy sau khi tài liệu sẵn sàng .

Đây tính năng tiên tiến thường sẽ được sử dụng bởi bộ tải script động mà muốn tải JavaScript bổ sung như plugin jQuery trước khi cho phép sự kiện đã sẵn sàng để xảy ra, mặc dù DOM có thể sẵn sàng.

Tài liệu:
https://api.jquery.com/jquery.keep yet

CẬP NHẬT ngày 7 tháng 1 năm 2019

Từ JQMIGRATE :

jQuery.keepReady () không dùng nữa

Nguyên nhân: Các jQuery.holdReady()phương pháp đã bị phản đối do ảnh hưởng bất lợi của nó đối với việc thực hiện toàn cầu của trang. Phương pháp này có thể ngăn tất cả các mã trên trang khởi tạo trong thời gian dài.

Giải pháp: Viết lại trang để nó không yêu cầu tất cả các trình xử lý sẵn sàng của jQuery bị trì hoãn. Điều này có thể được thực hiện, ví dụ, bằng cách tải muộn chỉ mã yêu cầu độ trễ khi chạy an toàn. Do sự phức tạp của phương thức này, jQuery Migrate không cố gắng lấp đầy chức năng. Nếu phiên bản cơ bản của jQuery được sử dụng với jQuery Migrate không còn chứa jQuery.holdReady()mã sẽ bị lỗi ngay sau khi cảnh báo này xuất hiện.

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

async: false

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

Mặc định là

async: true

jQuery đã phản đối XMLHTTPRequest đồng bộ

@Webgr câu trả lời một phần thực sự đã giúp tôi gỡ lỗi cảnh báo này @ bảng điều khiển bảng điều khiển, xấu hổ phần khác của câu trả lời đó đã mang lại rất nhiều downvote :(

Dù sao, đây là cách tôi tìm ra nguyên nhân của cảnh báo này trong trường hợp của tôi:

1. Sử dụng Trình duyệt Chrome> Lượt F12 để mang DevTools
2. Mở menu ngăn kéo (trong Chrome 3 chấm dọc ở phía trên bên phải)
3. Trong Bảng điều khiển > kiểm tra tùy chọn Nhật ký XMLHttpRequests
4. Tải lại trang của bạn đã báo lỗi cho bạn và quan sát những gì xảy ra trên mỗi yêu cầu ajax trong nhật ký giao diện điều khiển.

Trong trường hợp của tôi, một plugin khác đang tải 2 thư viện .js sau mỗi cuộc gọi ajax, điều đó hoàn toàn không bắt buộc cũng không cần thiết. Vô hiệu hóa plugin lừa đảo đã loại bỏ cảnh báo khỏi nhật ký. Từ thời điểm đó, bạn có thể cố gắng tự khắc phục sự cố (ví dụ: giới hạn tải tập lệnh vào các trang hoặc sự kiện nhất định - đây là cách quá cụ thể cho câu trả lời tại đây) hoặc liên hệ với nhà phát triển plugin bên thứ 3 để giải quyết.

Hy vọng điều này sẽ giúp được ai đó.

Tôi đã nhìn vào tất cả các câu trả lời ấn tượng. Tôi nghĩ rằng anh ta nên cung cấp mã cho anh ta một vấn đề. Cho ví dụ dưới đây, Nếu bạn có một tập lệnh để liên kết đến jquery trong page.php thì bạn sẽ nhận được thông báo đó.

$().ready(function () {
    $.ajax({url: "page.php",
        type: 'GET',
        success: function (result) {
        $("#page").html(result);
   }});
 });

Tôi nhận được cảnh báo như vậy trong trường hợp sau:

1) tập tin1 chứa <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. Trang có các trường đầu vào. Tôi nhập một số giá trị trong trường đầu vào và nhấp vào nút. Jquery gửi đầu vào cho tập tin php bên ngoài.

2) tập tin php bên ngoài cũng chứa jquery và trong tập tin php bên ngoài tôi cũng bao gồm <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. Bởi vì nếu điều này tôi nhận được cảnh báo.

Đã xóa <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>khỏi tệp php bên ngoài và hoạt động mà không có cảnh báo.

Theo tôi hiểu khi tải tệp đầu tiên (file1), tôi tải jquery-1.10.2.jsvà vì trang không tải lại (nó sẽ gửi dữ liệu đến tệp php bên ngoài bằng jquery $.post), sau đó jquery-1.10.2.jstiếp tục tồn tại. Vì vậy, không cần thiết một lần nữa để tải nó.

Tôi đã có ngoại lệ này khi tôi đặt url trong truy vấn như "example.com/files/text.txt". Ive đã thay đổi url thành " http://example.com/files/text.txt " và ngoại lệ này đã biến mất.

Và tôi đã có ngoại lệ này để bao gồm một tập lệnh can.js bên trong một tập lệnh khác, ví dụ:

{{>anotherScript}}

Trong một ứng dụng MVC, tôi đã nhận được cảnh báo này vì tôi đang mở Cửa sổ Kendo với phương thức trả về View (), thay vì PartialView (). Chế độ xem () đã cố gắng tải lại tất cả các tập lệnh của trang.

Nó đã xảy ra với tôi trong ZF2. Tôi đã cố tải nội dung Modal nhưng tôi quên tắt bố cục trước đó.

Vì thế:

$viewModel = new ViewModel();
$viewModel->setTerminal(true);
return $viewModel;

Giống như @Nycen tôi cũng gặp lỗi này vì liên kết đến Cloudfare. Của tôi là cho plugin Chọn2 .

để sửa nó tôi mới gỡ

 src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"

và lỗi đã biến mất.

1. Trong Chrome, press F12
2. Công cụ phát triển-> nhấn F1.
3. Xem cài đặt-> chung-> Xuất hiện: "Don't show chrome Data Saver warning"- đặt hộp kiểm này.
4. Xem cài đặt-> chung-> Bảng điều khiển: "Log XMLHTTPRequest"- cũng đặt hộp kiểm này.

Thưởng thức

Điều này được giải quyết trong trường hợp của tôi.

Mã não

$.ajaxPrefilter(function( options, original_Options, jqXHR ) {
    options.async = true;
});

Câu trả lời này đã được chèn vào liên kết này

/programming/28322636/synyncous-xmlhttprequest-warning-and-script

Trong trường hợp của tôi, điều này được gây ra bởi tập lệnh flexie , một phần của ứng dụng "Lựa chọn CDNJS" do Cloudflare cung cấp .

Theo Cloudflare "Ứng dụng này đang bị phản đối vào tháng 3 năm 2015". Tôi tắt nó đi và tin nhắn biến mất ngay lập tức.

Bạn có thể truy cập các ứng dụng bằng cách truy cập https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com

Lưu ý: đây là bản sao câu trả lời của tôi về chủ đề này Cảnh báo XMLHttpRequest đồng bộ và <script> (Tôi đã truy cập cả khi tìm giải pháp)

Tôi đã sửa lỗi này với các bước dưới đây:

1. Kiểm tra tập lệnh CDN của bạn và thêm chúng cục bộ.
2. Di chuyển tập lệnh của bạn bao gồm vào phần tiêu đề.

Trong trường hợp cụ thể của tôi, tôi đã kết xuất một phần Rails mà không render layout: falsehiển thị lại toàn bộ bố cục, bao gồm tất cả các tập lệnh trong <head>thẻ. Thêm render layout: falsevào hành động điều khiển đã khắc phục vấn đề.

Đối với tôi, vấn đề là trong một yêu cầu OK, tôi mong đợi phản hồi ajax là một chuỗi HTML được định dạng tốt như bảng, nhưng trong trường hợp này, máy chủ đã gặp sự cố với yêu cầu, chuyển hướng đến trang lỗi, và do đó đã trả lại mã HTML của trang lỗi (có <scriptthẻ ở đâu đó. Tôi điều khiển đã ghi lại phản hồi ajax và đó là khi tôi nhận ra đó không phải là điều tôi mong đợi, sau đó tiến hành gỡ lỗi.

Câu hỏi được đặt ra vào năm 2014 và đó là năm 2019 vì vậy tôi đoán thật tốt khi tìm kiếm lựa chọn tốt hơn.

Bạn chỉ có thể sử dụng fetchapi trong Javascript để cung cấp cho bạn sự linh hoạt hơn.

ví dụ, xem mã này

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });