2 XMLHttpRequest bir diğerine bağımlı olarak nasıl çalışır? Ben() nesneleri 2 XMLHttpRequest var bir proje üzerinde çalışıyorum

Question

demek A ve B

Ne başarmak istediğiniz veri öğeleri listesini getirilirken bir bitiş, B bazı almaya tetiklenecek zaman olduğu Önceki verilere göre daha fazla öğe A. tarafından alınma

Şu anda benim problemim, iki nesnenin birbirinden bağımsız çalışmasıdır.

Benim kod aşağıda: Ne tamamlamadan önce evertime B devam bulmak için bu kod çalışmıyor

  var A = new XMLHttpRequest(); 

      var B = new XMLHttpRequest(); 

      A.open("GET", directory, true); 
      A.onreadystatechange = function() { 

       if (A.readyState === 4) { 
        if (A.status === 200 || A.status == 0) { 
        //does... something 
        } 
       } 

      } 
      A.send(null); 
      while(true){ 

       B.open("GET", another_directory, false); 
       B.overrideMimeType("application/document"); 
       B.send(null); 
       if (B.status == "404") 
       continue; 

       //does... something else 
      } 

. Temel olarak hangi olayı kullanacağımı bilmiyorum.

Hedefimi nasıl sağlayabilirim? İşlemi A ile tamamladıktan sonra B'yi senkronize edebilmem için hangi etkinlikleri kullanabilirim?

Answer 1

(Uzun bir düzenleme yaptıktan sonra) JavaScript'in içindeki zaman uyumsuz çağrıların yapısını anlamak için zaman ayırmanızı öneririz. İşte biraz okuma önerilir. Asynchronous Programming in JavaScript Sanırım, neler olduğunu anlamak için yeterince basit. Not: "Mobl girin" de okumayı bırakın.

Bir işlev çağırdığınızda JavaScript'te, sistem, devam etmek ve mümkün olan en kısa sürede çalıştırmak için örtülü bir talimatı olan bir "kuyruk" a bu işlevi yerleştirir. Her fonksiyon çağrısında bunu yapar. Durumunuzda sistemin A'yı çalıştırmasını söylüyorsunuz, sonra B'yi çalıştırın. A, sıraya girer, B sıraya girer. Bireysel işlevler olarak sunulurlar. B önce koşuyor.

Normal işlevler için, sırayı kontrol etmek isterseniz, A işlev çağrısını B işlev çağrısı içine yerleştirebilirsiniz. Ama oops. XMLHttpRequest kullanıyorsunuz, bu sayede işlevleri kişiselleştirme yeteneğinizi sınırlar. Okumaya devam etmek. Ajax Patterns on the subject'a bakın "Asenkronize Çağrılar" paragrafına bakın.

A.onreadystatechange = function() { 
    if (A.readyState === 4) { 
     if (A.status === 200 || A.status == 0) { 
      //does... something 
      (RUN ALL THE B.methods right here...) 
     } 
    } 
} 

Ben size bir hayır jQuery çözüm istiyoruz varsayarak sizi hedefinize alacak düşünüyorum ... senin koda bakın.

Sadece işleyen bir sistem isteyen ve dili daha iyi anlamak istemeyen kişi için burada bir çözüm var ... B işlev çağrısının A işlev çağrısı içinde nasıl yuvalandığını not alın. Bu yuvalamanın sırasının jQuery başarı etiketinin varlığına bağlı olduğunu unutmayın. JQuery kullanmıyorsanız, işlevleri uygun şekilde el ile yerleştirmeniz gerekir.

var special_value; 
$("button").click(function(){ 
    $.ajax({url: "demo_testA.html", 
      type: 'GET', 
      success: function(resultA){ 
       special_value = resultA; 
       $.ajax({url: "demo_testB.html", 
         type: 'GET', 
         data: special_value, 
         success: function(resultB){ 
          $("#div1").html(resultB); 
       }}); 
    }); 
}); 

Daha iyi iletişim kullanımı konusunda kendinize yardımcı olmanıza yardımcı olmak çok daha kolay olurdu. Eğer bir şeyden hoşlanmıyorsan, o zaman devlet. Bir şey anlamadıysanız daha fazla açıklama isteyin veya sorun bildirinizi düzenleyin. Geribildirim iyi bir şeydir.

Answer 2

Tamam, hadi kodunuzla başlayalım. Şimdi Sorunun kaynağını görebilirsiniz umut

var A = new XMLHttpRequest(); //You create an XMLHttpRequest object 
var B = new XMLHttpRequest(); //And an another 

A.open("GET", directory, true); 

/* Now you open a GET request to DIRECTORY, with async TRUE. The third parameter can 
make a request sync or async, but sync is not recommended as described below. */ 

A.onreadystatechange = function() { 
    if (A.readyState === 4) { 
     if (A.status === 200 || A.status == 0) { 

     /* So you registered an event listener. It runs when the readyState changes. 
     You can use it to detect if the request is finished or not. If the readyState is 
     4, then the request is finished, if the status code is 200, then the response is 
     OK. Here you can do everythin you want after the request. */ 

     } 
    } 

} 

A.send(null); //Now you send the request. When it finishes, the event handler will 
// do the processing, but the execution won't stop here, it immediately goes to the 
// next function 

while(true){ // Infinite loop 
    B.open("GET", another_directory, false); //Open request B to ANOTHER_DIRECTORY, 
    // but now, request B will be synchronous 

    B.overrideMimeType("application/document"); // Configure mime type 

    B.send(null); // Send the request 

    if (B.status == "404") 
     continue; 
     // If it's not found, then go to the next iteration 

    // and do something else 
} 

: şimdi Sorunun kaynağını anlayabiliyorum yüzden, buna birkaç yorum ekledik. Bu komut dosyasını çalıştırdığınızda, bir uyumsuzluk isteğini başlatır ve hemen ardından bir sonraki başlatır. Şimdi 2 yoldan birini seçebilirsiniz.callback'inde gelen

Run sonraki isteği daha iyi bir yol

(önerilir). Yani ilk (async) isteğinizi başlatın ve olay dinleyicide (işlemi yaptığınız yerde) bir sonraki isteği başlatabilirsiniz. Burada bir yorumladı örnek yaptık: http://jsfiddle.net/5pt6j1mo/1/

(Sen diziler olmadan yapabilirsiniz - sadece bir örnekti) kadar bekletilir Bu şekilde kullanırsanız

sonra GUI donma olmaz cevap için Eğer sayfa etkileşim kurabilmek için ana iş parçacığı üzerinde "Senkron XMLHttpRequest kullanımdan kaldırılmıştır çünkü her şeyi, bu, iptal düğmesi vb

Senkron AJAX (önerilmez)

bunu önermiyoruz oluşturabilir sorumlu olacak "Chrome'da, ancak gerçekten istiyorsan bu çözümü kullanmaya çalışabilirsin.

• YÖNTEMİ: Asenkron isteği:
• ASYNC istemek için URL: http methid
• URL kullanmak üzere Yani bir XMLHttpRequest açık fonksiyon 3 argümanları vardır? Eğer false ise o zaman senkronize olacaktır, çünkü .send() işlevini çağırdıktan sonra, yanıt geri gelene kadar yürütmeyi duraklatacaktır.

Böylece kolayca yapabilir sonra FALSE üçüncü parametre ayarlarsanız ... ama yapmamalısın!

Answer 3

İşte the fetch API veya promisify native XHR kullanmak ya alternatif bir çözümdür ve bu sorun daha basit hale gelir:

fetch(directory).then(function(response){ 
    // some processing 
    return fetch(another_directory); // can change content type too, see the mdn docs 
}).then(function(responseTwo){ 
     // all processing is done 
}).catch(function(err){ 
     // handle errors from all the steps above at once 
}); 

Bu XHR'nin kadar yerli ve çok daha basit vaatlerle yönetmektir.