XMLHttpRequest में रेडीस्टेट == 4 के बराबर ऑनलोड है?

Question

मैं xhr रिटर्न इवेंट के बारे में भ्रमित हूं, जैसा कि मैं बता सकता हूं, onreadystatechange -> readyState == 4 और onload के बीच इतना अंतर नहीं है , क्या यह सच है?

var xhr = new XMLHttpRequest();
xhr.open("Get", url, false);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4)
    {
        /* do some thing*/
    }
};

xhr.send(null);

या

xhr.onload = function() { /* do something */ }

Comments

अगर कोई इसे एक उदाहरण के रूप में देख रहा है कि यह async = false (xhr.open का तीसरा तर्क) का उपयोग कर रहा है - जो सामान्य रूप से वह नहीं है जो आप चाहते हैं।

— eddiewould

Answer 1

यह एक ही बात होनी चाहिए। onloadXMLHttpRequest 2 में जोड़ा गया था, जबकि onreadystatechangeमूल कल्पना के बाद से आसपास है।

Comments

लगता है, कि मोबाइल सफारी ऑनलोड का उपयोग करते समय वापस नहीं आता है। onreadystatechange काम करता है, यद्यपि।

— काई हार्टमैन

XHR 1 और XHR 2 के बीच अब कोई वास्तविक स्पष्ट अलगाव नहीं है, वे एक मानक में विलीन हो गए हैं। सबसे आम विशेषता जो XHR 2 का प्रतिनिधित्व करती है, तो वह समर्थन है जो उस दृष्टिकोण से XHR 2 IE में दिखाई नहीं देता है IE 10 तक लेकिन XHR.onload IE 9 में समर्थित था जिसे आमतौर पर XHR 1 माना जाता है

— चेस

Answer 2

यह लगभग हमेशा सच होता है। हालांकि, एक महत्वपूर्ण अंतर यह है कि onreadystatechangeइवेंट हैंडलर readyState==4उन मामलों में भी ट्रिगर हो जाता है जहां onerrorहैंडलर आमतौर पर ट्रिगर होता है (आमतौर पर नेटवर्क कनेक्टिविटी समस्या)। इस मामले में इसे 0 का दर्जा प्राप्त है। मैंने सत्यापित किया है कि यह नवीनतम क्रोम, फ़ायरफ़ॉक्स और IE पर होता है।

इसलिए यदि आप उपयोग कर रहे हैं onerrorऔर आधुनिक ब्राउज़रों को लक्षित कर रहे हैं, तो आपको इसका उपयोग नहीं करना चाहिए, onreadystatechangeबल्कि इसका उपयोग करना चाहिए onload, जिसे केवल तभी गारंटी दी जा सकती है जब HTTP अनुरोध सफलतापूर्वक पूरा हो गया हो (वास्तविक प्रतिक्रिया और स्थिति कोड के साथ)। अन्यथा आप त्रुटियों के मामले में दो घटना संचालकों को समाप्त कर सकते हैं (जो कि इस मामले के बारे में मुझे अनुभवजन्य रूप से कैसे पता चला है।)

यहाँ एक प्लंकर परीक्षण कार्यक्रम की एक कड़ी है जो मैंने लिखा था कि आप विभिन्न URL का परीक्षण कर सकते हैं और readyStateविभिन्न मामलों में जावास्क्रिप्ट ऐप द्वारा देखे गए घटनाओं और मूल्यों के वास्तविक अनुक्रम को देख सकते हैं । जेएस कोड भी नीचे सूचीबद्ध है:

var xhr;
function test(url) {
    xhr = new XMLHttpRequest();
    xhr.addEventListener("readystatechange", function() { log(xhr, "readystatechange") });
    xhr.addEventListener("loadstart", function(ev) { log(xhr, "loadstart", ev.loaded + " of " + ev.total) });
    xhr.addEventListener("progress", function(ev) { log(xhr, "progress", ev.loaded + " of " + ev.total) });
    xhr.addEventListener("abort", function() { log(xhr, "abort") });
    xhr.addEventListener("error", function() { log(xhr, "error") });
    xhr.addEventListener("load", function() { log(xhr, "load") });
    xhr.addEventListener("timeout", function(ev) { log(xhr, "timeout", ev.loaded + " of " + ev.total) });
    xhr.addEventListener("loadend", function(ev) { log(xhr, "loadend", ev.loaded + " of " + ev.total) });
    xhr.open("GET", url);
    xhr.send();
}

function clearLog() {
    document.getElementById('log').innerHTML = '';
}

function logText(msg) {
    document.getElementById('log').innerHTML += msg + "<br/>";
}

function log(xhr, evType, info) {
    var evInfo = evType;
    if (info)
        evInfo += " - " + info ;
    evInfo += " - readyState: " + xhr.readyState + ", status: " + xhr.status;
    logText(evInfo);
}

function selected(radio) {
    document.getElementById('url').value = radio.value;
}

function testUrl() {
    clearLog();
    var url = document.getElementById('url').value;
    if (!url)
        logText("Please select or type a URL");
    else {
        logText("++ Testing URL: " + url);
        test(url);
    }
}

function abort() {
    xhr.abort();
}

Comments

स्पष्ट करने के लिए, अंदर @Fernando onload, readyState === 4सच सही होने की गारंटी है?

— kgf3JfUtW

@ ससम हां, यह हमेशा मामला लगता है, हालांकि विपरीत स्पष्ट रूप से सच नहीं है, जैसा readyStateकि 4 पर भी हो सकता है errorया abortमामले भी हो सकते हैं। यह राज्य मूल रूप से मतलब है कि लोड प्रक्रिया समाप्त हो गई है, चाहे सफलतापूर्वक या नहीं। एक सामान्य, सफल लोड के लिए, घटनाओं के अंतिम दृश्य है: progress(सभी डेटा लोड के साथ), readystatechange(साथ readyState == 4), load, loadend।

— फर्नांडो एचेवरिया

ध्यान रखें कि onloadअगर यह भी ट्रिगर नहीं होगाNo 'Access-Control-Allow-Origin' header is present on the requested resource.

— deathangel908

यह सच है। यह उन मामलों में से एक है जो onerrorहैंडलर को ट्रिगर करता है ।

— फर्नांडो एचेवरिया

@ स्पेसर: हाँ, कृपया यहाँ देखें: plnkr test

— फर्नांडो

Answer 3

नहीं, वे एक समान नहीं हैं। यदि आप एक नेटवर्क त्रुटि का सामना करते हैं या ऑपरेशन को रोकते हैं, onloadतो कॉल नहीं किया जाएगा। वास्तव में, निकटतम घटना readyState === 4होगी loadend। प्रवाह इस तरह दिखता है:

     onreadystatechange
      readyState === 4
             ⇓
 onload / onerror / onabort
             ⇓
         onloadend