JavaScript console.log hataya neden oluyor: “Ana iş parçasındaki zaman uyumlu XMLHttpRequest kullanımdan kaldırıldı…”

Firefox hata ayıklayıcısını kullanmadan farklı değişkenlerin durumunu kontrol etmek için konsola günlükler ekliyorum.

Ancak, dosyama bir console.logyer eklediğim birçok yerde main.js, kendime sevimli küçük el yazısı mesajlarım yerine aşağıdaki hatayı alıyorum:

Ana iş parçasındaki zaman uyumlu XMLHttpRequest, son kullanıcının deneyimine zararlı etkileri nedeniyle kullanımdan kaldırılmıştır. Daha fazla yardım için http://xhr.spec.whatwg.org/

console.logBu hataya neden olmayacak kod kullanımıma hangi alternatifleri veya paketleyicileri ekleyebilirim?

"Yanlış mı yapıyorum"?

Tembel olduğumda ve bana iade edilen içeriğin bir parçası olarak bir komut dosyası etiketi eklediğimde bu oldu. Gibi:

Kısmi HTML İçeriği:

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

En azından benim durumumda, böyle HTML içeriğini xhr aracılığıyla döndürürseniz, jQuery'nin bu komut dosyasını almak için bir çağrı yapmasına neden olacağı anlaşılıyor. Bu çağrı, yüklemeye devam etmek için komut dosyasına ihtiyacınız olduğunu varsaydığı için yanlış bir zaman uyumsuz bayrağıyla gerçekleşir.

Bunun gibi durumlarda, bir tür bağlayıcı çerçeveye bakarak ve sadece bir JSON nesnesi döndürerek veya arka ucunuza ve templating'e bağlı olarak komut dosyalarınızı yükleme şeklinizi değiştirerek daha iyi hizmet edersiniz.

Ayrıca kullanabilirsiniz jQuery engetScript() alakalı komut kapmak için. İşte bir keman, jQuery örneğinin sadece düz bir kopyasıdır, ancak komut dosyaları bu şekilde yüklendiğinde atılan uyarıları görmüyorum.

Misal

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

http://jsfiddle.net/49tkL0qd/

Uyarı iletisi, zaman uyumsuz bayrağı false olarak ayarlanmış ana iş parçacığındaki XMLHttpRequest isteğinden kaynaklanıyor olabilir.

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

Senkron XMLHttpRequest, işçilerin dışındaki son kullanıcının deneyimine zararlı etkileri olduğu için web platformundan kaldırılma sürecindedir. (Bu uzun yıllar süren uzun bir süreçtir.) JavaScript genel ortamı bir belge ortamı olduğunda geliştiriciler zaman uyumsuz argüman için yanlış iletmemelidir. Kullanıcı aracıları, geliştirici araçlarında bu tür kullanım konusunda uyarmaya şiddetle teşvik edilir ve gerçekleştiğinde bir InvalidAccessError istisnası atmayı deneyebilir.

Gelecekteki yön, yalnızca çalışan iş parçacıklarında XMLHttpRequest öğelerine izin vermektir. Mesajın bu konuda bir uyarı olması amaçlanmıştır.

Ben de aynı sorunla karşı karşıya kaldım ama async: true koyarak düzeltebiliyordum. Varsayılan olarak doğru olduğunu biliyorum ama açıkça yazdığımda işe yarıyor

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

Visual Studio 2015 / 2017'nin canlı hata ayıklayıcısı kullanımdan kaldırılmış çağrıyı içeren kodu enjekte ediyor.

Bazen bir komut dosyası ajax yüklemek, ancak komut dosyası yüklenene kadar hazır olan belgeyi geciktirmek gerekir .

jQuery bunu holdReady()işlevle destekler .

Örnek kullanım:

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

Gerçek komut dosyası yüklemesi eşzamansızdır ( hata yok ), ancak JavaScript'inizin geri kalanı belge hazır olduktan sonra çalışırsa efekt eşzamanlıdır .

Bu gelişmiş özellik , DOM hazır olsa bile hazır olayın gerçekleşmesine izin vermeden önce jQuery eklentileri gibi ek JavaScript yüklemek isteyen dinamik komut dosyası yükleyicileri tarafından kullanılır.

Belgeler:
https://api.jquery.com/jquery.holdready

GÜNCELLEME 7 Ocak 2019

JQMIGRATE tarihinden itibaren :

jQuery.holdReady () kullanımdan kaldırıldı

Neden:jQuery.holdReady() yöntem sayfanın küresel performansı üzerindeki olumsuz etkisi nedeniyle kaldırılmıştır. Bu yöntem, sayfadaki tüm kodların uzun süre başlatılmasını önleyebilir.

Çözüm: Sayfayı, tüm jQuery hazır işleyicilerinin geciktirilmesini gerektirmeyecek şekilde yeniden yazın. Bu, örneğin, yalnızca çalıştırılması güvenli olduğunda gecikmeyi gerektiren kodun geç yüklenmesi ile gerçekleştirilebilir. Bu yöntemin karmaşıklığı nedeniyle, jQuery Migrate işlevselliği doldurmaya çalışmaz. JQuery Migrate ile kullanılan temel jQuery sürümü artık jQuery.holdReady()bu uyarı görüntülendikten kısa bir süre sonra kod başarısız olur.

Bu uyarıyı önlemek için şunları kullanmayın:

async: false

$ .ajax () çağrılarınızdan herhangi birinde. Bu, kullanımdan kaldırılan tek XMLHttpRequest özelliğidir.

Varsayılan değer

async: true

jQuery senkron XMLHTTPRequest'i kullanımdan kaldırdı

@Webgr kısmi cevap aslında bu uyarı @ konsol günlüğünde hata ayıklama yardımcı oldu, utanç bu cevabın diğer kısmı çok sayıda aşağı oy getirdi :(

Her neyse, işte bu uyarının nedeninin ne olduğunu nasıl öğrendim:

1. DevTools'u getirmek için Chrome Tarayıcı> F12'ye basın
2. Çekmece menüsünü açın (sağ üstteki Chrome 3 dikey noktalarında)
3. Konsol altında > Log XMLHttpRequests seçeneğini işaretleyin
4. Hata veren sayfanızı yeniden yükleyin ve konsol günlüğündeki her ajax isteğinde neler olduğunu gözlemleyin.

Benim durumumda, başka bir eklenti yükleniyordu 2 her ajax çağrısından sonra .js kütüphanesi , bu kesinlikle gerekli değildi. Rogue eklentisinin devre dışı bırakılması uyarıyı günlükten kaldırdı. Bu noktadan sonra, sorunu kendiniz çözmeye çalışabilirsiniz (örneğin, komut dosyalarının yüklenmesini belirli sayfalara veya etkinliklere sınırlayın - bu, burada bir cevap için çok spesifiktir) veya çözmek için 3. taraf eklenti geliştiricisiyle iletişime geçin.

Umarım bu birine yardımcı olur.

Tüm etkileyici cevaplara bakıyordum. Bence ona problem veren kodu vermeli. Aşağıdaki örnek göz önüne alındığında, page.php içindeki jquery'ye bağlanacak bir komut dosyanız varsa, bu bildirimi alırsınız.

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

Aşağıdaki durumda böyle bir uyarı alıyorum:

1) içeren dosya1 <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. Sayfada giriş alanları var. Giriş alanına bir değer girip butonuna tıklıyorum. Jquery harici php dosyasına girdi gönderir.

2) harici php dosyası da jquery içerir ve harici php dosyasında ben de dahil <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. Çünkü bu uyarıyı alırsam.

<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>Harici php dosyasından kaldırıldı ve uyarı olmadan çalışır.

İlk dosyayı (dosya1) yüklemede anladığım gibi, ben yüklerim jquery-1.10.2.jsve sayfa yeniden yüklenmez (jquery kullanarak harici php dosyasına veri gönderir $.post), sonra var jquery-1.10.2.jsolmaya devam eder. Bu yüzden tekrar yüklemek gerekmez.

"Example.com/files/text.txt" gibi sorguda URL ayarladığımda bu istisnayı aldım. URL’yi " http://example.com/files/text.txt " olarak değiştirdim ve bu kural dışı durum kayboldu.

Ve bir can.js betiğini diğerine dahil etmek için bu istisnayı aldım, örneğin,

{{>anotherScript}}

Bir MVC uygulamasında, bir Kendal Penceresini PartialView () yerine View () döndüren bir yöntemle açtığım için bu uyarıyı aldım. Görünüm (), sayfanın tüm komut dosyalarını yeniden kurtarmaya çalışıyordu.

ZF2'de başıma geliyordu. Modal içeriğini yüklemeye çalışıyordum, ancak düzeni daha önce devre dışı bırakmayı unuttum.

Yani:

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

@Nycen gibi, Cloudfare bağlantısı nedeniyle de bu hatayı aldım. Benimki Select2 içindi eklentisi .

düzeltmek için kaldırdım

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

ve hata giderildi.

1. Chrome'da, press F12
2. Geliştirme araçları-> basın F1.
3. Ayarlar-> genel-> Görünüm: "Don't show chrome Data Saver warning"- bu onay kutusunu ayarlayın.
4. Ayarlar-> genel-> Konsol: "Log XMLHTTPRequest"- bu onay kutusunu da ayarlayın.

Zevk almak

Bu benim durumumda çözüldü.

JS

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

Bu cevap bu bağlantıya eklendi

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

Benim durumumda bu neden oldu flexie tarafından sunulan "CDNJS Seçimleri" uygulamanın parçasıydı senaryo Cloudflare .

Cloudflare göre "Bu uygulama Mart 2015'te kullanımdan kaldırılıyor". Kapattım ve mesaj anında kayboldu.

Uygulamalara https://www.cloudflare.com/a/cloudflare-apps/alanadiniz.com.tr adresini ziyaret ederek erişebilirsiniz.

Not: Bu bu konu benim cevap bir kopyasıdır Eşzamanlı XMLHttpRequest uyarı ve <script> (Her ikisi de bir çözüm ararken ziyaret etti)

Bunu aşağıdaki adımlarla düzelttim:

1. CDN komut dosyalarınızı kontrol edin ve yerel olarak ekleyin.
2. Komut dosyası içeriklerinizi başlık bölümüne taşıyın.

Benim durumumda, bir Rails'i kısmi render layout: falseolarak oluşturuyordum, bu da <head>etiketteki tüm komut dosyaları da dahil olmak üzere tüm düzeni yeniden oluşturuyordu . render layout: falseDenetleyici eylemine eklemek sorunu çözdü.

Benim için sorun, bir OK isteğinde, ajax yanıtının tablo gibi iyi biçimlendirilmiş bir HTML dizesi olmasını bekliyordum, ancak bu durumda, sunucunun bir hata sayfasına yönlendirerek istekle ilgili bir sorun yaşıyordu, ve bu nedenle hata sayfasının HTML kodunu (bir <scriptyerde bir etiketi vardı .

Soru 2014'te gündeme geldi ve 2019, bu yüzden daha iyi bir seçenek aramanın iyi olduğunu düşünüyorum.

fetchJavascript'te size daha fazla esneklik sağlayan api'yi kullanabilirsiniz .

örneğin, bu koda bakın

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