jQuery tidak lagi menggunakan XMLHTTPRequest sinkron

119

Seperti banyak lainnya, situs web saya menggunakan jQuery. Ketika saya membuka alat pengembang, saya melihat peringatan yang mengatakan bahwa XMLHTTPRequest adalah

tidak digunakan lagi karena efeknya yang merugikan bagi pengalaman pengguna akhir.

Saya melanjutkan dan membaca sebagian dari dokumentasinya , tetapi cukup teknis. Bisakah seseorang menjelaskan konsekuensi pengalihan dari XMLHTTPRequest ke WHATWG secara sederhana? Dikatakan itu terjadi pada 2012.

Selain itu, dokumentasi mengatakan bahwa Synchronous XMLHttpRequest di luar pekerja sedang dalam proses dihapus dari platform web, ketika itu terjadi, jika agen pengguna memilikinya dalam layanan, apakah mereka perlu mengubah kode yang ada?

Edd
sumber
2
Anda pasti berbicara tentang permintaan XMLHTTPR yang sinkron, bukan yang asinkron, bukan? Permintaan sinkron sangat buruk untuk pengalaman pengguna akhir (mereka mengunci browser selama permintaan) dan biasanya tidak boleh digunakan.
jfriend00
2
berikan beberapa kode yang memicu ini
charlietfl
3
Apakah ini teks lengkap yang dimaksud? XMLHttpRequest sinkron di utas utama tidak digunakan lagi karena efeknya yang merugikan bagi pengalaman pengguna akhir.
Qantas 94 Heavy
1
jQuery hanya memberikan peringatan itu untuk permintaan sinkron, bukan? Apakah Anda sengaja membuat permintaan sinkron? Jika demikian, solusinya adalah menyusun kode Anda agar berfungsi dengan permintaan asinkron, yang tetap harus Anda lakukan karena mereka jauh lebih baik dari sudut pandang pengguna.
nnnnnn
1
Saya telah melihat bendera itu tidak hanya di situs web saya, saya juga telah melihatnya di beberapa orang lain, misalnya Youtube. Mengenai spesifikasi, dengan spesifikasi apa kode saya harus sesuai, W3C atau WHATWG? , referensi Saya tidak ingin menanyakannya di utas utama karena saya rasa akan ditandai sebagai masalah opini. @ Qantas94Heavy
Edd

Jawaban:

136

Untuk menghindari peringatan ini, jangan gunakan:

async: false

dalam setiap $.ajax()panggilan Anda . Ini adalah satu-satunya fitur XMLHttpRequestyang tidak digunakan lagi.

Standarnya adalah async: true, jadi jika Anda tidak pernah menggunakan opsi ini sama sekali, kode Anda akan aman jika fitur tersebut benar-benar dihapus.

Namun, mungkin tidak akan - itu mungkin dihapus dari standar, tapi saya yakin browser akan terus mendukungnya selama bertahun-tahun. Jadi jika Anda benar-benar membutuhkan AJAX sinkron karena alasan tertentu, Anda dapat menggunakan async: falsedan mengabaikan peringatannya. Tetapi ada alasan bagus mengapa AJAX sinkron dianggap gaya yang buruk, jadi Anda mungkin harus mencoba mencari cara untuk menghindarinya. Dan orang-orang yang menulis aplikasi Flash mungkin tidak pernah mengira itu akan hilang, tapi sekarang sedang dalam proses untuk dihapus.

Perhatikan bahwa FetchAPI yang menggantikan XMLHttpRequestbahkan tidak menawarkan opsi sinkron.

Barmar
sumber
9
Ini adalah peringatan jQuery. Saya bisa mengabaikannya? Saya tidak menggunakan panggilan sinkron ke server. Sisi perfeksionis saya tidak suka peringatan sama sekali.
Jordan
2
@ Jordan Saya rasa peringatan itu datang dari browser, bukan jQuery. Ini akan terjadi setiap kali Anda mencoba menggunakan AJAX sinkron. Jika Anda menggunakan jQuery, itu hanya akan terjadi jika Anda menentukan opsi itu $.ajax.
Barmar
2
Saya menggunakan jquery.i18n.properties.jstetapi tidak ada panggilan eksplisit di sisi saya ke $.ajax.Mungkin secara internal, tetapi tidak yakin.
Manuel Jordan
1
Plugin itu memuat paket sumber daya dari .propertiesfile. Ini mungkin menggunakan AJAX sinkron untuk melakukannya, menyebabkan peringatan ini.
Barmar
1
@ManuelJordan menyetel async: true di i18n dapat menyebabkan penundaan dalam menampilkan string yang ditampilkan di halaman Anda pada koneksi lambat. Tunjukkan sebagai gantinya kode string
Siyon DP
62

Jawaban yang diterima benar, tetapi saya menemukan penyebab lain jika Anda mengembangkan di bawah ASP.NET dengan Visual Studio 2013 atau lebih tinggi dan yakin Anda tidak membuat permintaan ajax sinkron atau menentukan skrip di tempat yang salah.

Solusinya adalah menonaktifkan fitur "Tautan Peramban" dengan menghapus centang "Aktifkan Tautan Peramban" di tarik-turun bilah alat VS yang ditunjukkan dengan ikon penyegaran kecil yang menunjuk searah jarum jam. Segera setelah Anda melakukan ini dan memuat ulang halaman, peringatan akan berhenti!

Nonaktifkan Tautan Browser

Ini seharusnya hanya terjadi saat men-debug secara lokal, tetapi masih bagus untuk mengetahui penyebab peringatan.

Sam
sumber
Seseorang dapat menonaktifkan web.configdengan menambahkan <add key="vs:EnableBrowserLink" value="false" />di dalam <appSettings>seperti yang dijelaskan di sini: poconosystems.com/software-development/… .
Beel
3
Saya pikir ini adalah saran yang buruk hanya untuk mendapatkan pesan peringatan di konsol. Nonaktifkan tautan browser dan singkirkan peningkatan produktivitas yang ditambahkan tautan browser agar Anda tidak melihat pesan peringatan di konsol browser? Lebih baik mengajukan bug dengan microsoft dan itu diperbaiki.
coding4fun
4
@ coding4un Terima kasih atas pendapat Anda; Anda dapat melaporkan bug dengan Microsoft. Saya tidak mengatakan Anda harus menonaktifkan Tautan Peramban. Jawaban saya akurat mengenai penyebab peringatan ini dalam beberapa kasus dan berguna untuk mengesampingkan sesuatu dalam kode Anda sendiri. Saya secara pribadi merasa lebih baik setelah saya menyadari itu bukan sesuatu yang saya lakukan salah dan berpikir orang lain mungkin akan merasa terbantu juga.
Sam
Ini memperbaiki lebih dari sekedar peringatan ajax. Saya mendapat semua jenis kekacauan tautan browser di konsol javascript menggunakan inti asp.
JoeBass
Adakah yang tahu apa itu tautan browser dan mengapa akhirnya memberi peringatan seperti itu?
gideon
15

Ini terjadi pada saya dengan memiliki tautan ke js eksternal di luar kepala tepat sebelum akhir bagian tubuh. Anda tahu, salah satunya:

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

Itu tidak ada hubungannya dengan JQuery.

Anda mungkin akan melihat hal yang sama melakukan hal seperti ini:

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

Tapi saya belum menguji ide itu.

Dave Friend
sumber
Peringatan itu hilang saat saya menghapus baris seperti ini, yang sebenarnya tidak saya gunakan: @ Html.Script ("~ / scripts / apps / appname.js")
MsTapp
10

Itu disebutkan sebagai komentar oleh @ henri-chan , tapi saya pikir itu perlu lebih diperhatikan:

Saat Anda memperbarui konten elemen dengan html baru menggunakan jQuery / javascript, dan html baru ini berisi <script>tag, tag tersebut dijalankan secara sinkron dan memicu kesalahan ini. Hal yang sama berlaku untuk stylesheet.

Anda tahu ini terjadi ketika Anda melihat (beberapa) skrip atau stylesheet dimuat seperti XHRdi jendela konsol. (firefox).

Hugo Delsing
sumber
3

Tidak ada satu pun dari jawaban sebelumnya (yang semuanya benar) yang sesuai dengan situasi saya: Saya tidak menggunakan asyncparameter in jQuery.ajax()dan saya tidak menyertakan tag skrip sebagai bagian dari konten yang dikembalikan seperti:

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

Situasi saya adalah bahwa saya memanggil dua permintaan AJAX secara berurutan dengan tujuan untuk memperbarui dua div secara bersamaan:

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();

Ketika saya mengklik a.anchor3, itu memunculkan bendera peringatan. Saya menyelesaikan masalah dengan mengganti pemanggilan f2 dengan click()fungsi:

function anchor_problem(){
$('a.anchor_problem').click(function(){
     f1();
     $('a.anchor_f2').click();
});
}
Adib Aroui
sumber
5
Skrip tidak dijalankan jika Anda langsung memasukkannya ke DOM melalui innerHTML. Jadi ketika Anda memanggil .html (), jQuery mengambil dan menjalankan skrip apa pun yang disertakan dalam respons html secara sinkron.
Henry Chan
@HenryChan, saya mencoba untuk memahami Anda tetapi tidak berhasil. Bisakah Anda menjelaskan kepada saya dengan kata-kata yang lebih sederhana. Saya tidak memasukkan skrip ke DOM, saya hanya memasukkan HTML dan masih solusi ini adalah satu-satunya solusi yang berfungsi untuk saya. Terima kasih sebelumnya
Adib Aroui
2
@whitelettersinblankpapers Saya rasa maksudnya: di dalam callback ajax Anda, jika konten yang Anda tambahkan ke "div" berisi tag skrip, maka ini akan dipanggil secara sinkron.
Haitham Sweilem
1

Latihan saya: Saya menggunakan permintaan asynchronous yang membuang kode ke buffer. Saya memiliki loop yang memeriksa buffer setiap detik. Ketika dump telah sampai ke buffer, saya mengeksekusi kodenya. Saya juga menggunakan waktu tunggu. Untuk pengguna akhir, halaman tersebut berfungsi seolah-olah permintaan sinkron akan digunakan.

lari kembali
sumber
apakah Anda memiliki sedikit kode untuk saya ketahui bagaimana mencapai ini?
ZerOne
5
@ runback, tidak bisakah callback janji done () digunakan? $.ajax({ url : "example.com", async : true /* default is true */ }).done(function(response){ // Process the dump }) Semoga saya tidak salah membaca apa pun.
pravin
0

Jika kita memuat skrip dalam tampilan parsial maka masalah ini datang

  1. Saya menghapus skrip dalam tampilan sebagian dan pindah ke tampilan utama.

Solusi ini berfungsi dengan baik untuk saya

A. Chandrashekar shekar
sumber