jQuery: $ .ajax() वापस लौटने से पहले पूरा करने के अनुरोध का इंतजार क्यों नहीं करता है?

Question

मैं सिर्फ 3 घंटे खर्च किया है कोड का एक सा डिबगिंग केवल खोजने के लिए यह द्वारा मुझे यह सोचते हैं कि निम्नलिखित कोड का निष्पादन आदेश रैखिक था कारण होता था: -

$.ajax({ajax options}); 
console.log('I was assuming this would execute once the ajax request was complete'); 

यह पहली बार नहीं है कि इससे मुझे समस्याएं आई हैं और मैं बस सोच रहा था कि इस व्यवहार का कारण क्या था?

क्या ऐसा है कि कोई भी AJAX अनुरोध अन्य स्क्रिप्ट निष्पादन को नहीं रखता है जो AJAX अनुरोध से असंबंधित हो सकता है?

Answer 1

अन्य उत्तरों में से अधिकांश उत्तर दे रहे हैं कि इसका समाधान कैसे करें। मैं बहुत संक्षिप्त रूप से देखना चाहता हूं, पर इस मामले में एसिंक्रोनस अच्छा है।

वास्तव में, ब्राउज़र में अधिकांश जावास्क्रिप्ट असीमित है। उदाहरण के लिए, इस कोड को लें:

document.getElementById('foo').onclick = function() { 
    alert('foo clicked'); 
}; 
document.getElementById('bar').onclick = function() { 
    alert('bar clicked'); 
}; 

कौन सा पहले भाग जाएगा? आप ब्राउज़र मॉडल (या वास्तव में अधिकांश घटना-संचालित कोड) के अंतर्निहित असिंक्रोनिटी के कारण नहीं जानते हैं। जब कोई ईवेंट होता है तो आप कोड चलाते हैं। आपने दस्तावेज़ स्थापित किया है, फिर घटना होने की प्रतीक्षा करें, और आपके कोड को सभी प्रकार के विभिन्न आदेशों में निष्पादित किया जा सकता है, इस पर निर्भर करता है कि पहले कौन सी घटनाएं होती हैं। पृष्ठ के पूरे जीवनकाल के दौरान जावास्क्रिप्ट कोड को निष्पादित करने की आवश्यकता होती है, न कि जब यह पहली बार बनाई जाती है।

तो सामान्य जावास्क्रिप्ट प्रोग्रामिंग (या कम से कम, जावास्क्रिप्ट प्रोग्रामिंग सबसे सरल स्तर से परे) अक्सर असीमित होने जा रहा है। इसके अलावा, यह HTTP अनुरोधों के लिए असीमित होने के लिए भी बहुत समझदारी बनाता है।

सबसे पहले, जैसा कि आप अपने प्रश्न में अंतर्निहित करते हैं, कोड सिंक्रोनस निष्पादन को अवरुद्ध कर देगा। ऐसा कहने के लिए, शायद आप एनीमेशन को शुरू करने के लिए दो सेकंड इंतजार नहीं करना चाहते हैं क्योंकि आप एक HTTP अनुरोध दो लाइनों को आगे बढ़ा रहे हैं। सर्वर प्रतिक्रिया समय (ए) अनियमित और (बी) धीमा हो सकता है, इसलिए आपके सर्वर के प्रतिक्रिया की गति पर निर्भर होने के लिए आपके आवेदन के डिज़ाइन के लिए कोई समझ नहीं आता है।

दूसरा, और सबसे महत्वपूर्ण बात यह है कि आपका उपयोगकर्ता पृष्ठ का उपयोग करना बंद नहीं करेगा क्योंकि आपकी स्क्रिप्ट एक AJAX कॉल कर रही है। आपके उपयोगकर्ता परवाह नहीं है। आपका उपयोगकर्ता शायद इस बात की परवाह करेगा कि आपका सामान्य onscroll व्यवहार काम नहीं कर रहा है क्योंकि आपकी स्क्रिप्ट वर्तमान में एक असंबंधित AJAX अनुरोध से जुड़ी हुई है। संपूर्ण ब्राउज़र जावास्क्रिप्ट प्रोग्रामिंग की असीमित प्रकृति के साथ जुड़ने के लिए, HTTP कॉल का विशाल बहुमत गैर-अवरुद्ध, असीमित होना चाहिए।

Answer 2

AJAX के समापन धारण करने के लिए, आप नीचे दिए गए जैसे success: समारोह के अंदर अपना कोड डाल करने के लिए की जरूरत है:

$.ajax({ 
    url: 'ajax/test.html', 
    success: function(data) { 
    // Do something after AJAX is completed. 
    console.log('I was assuming this would execute once the ajax request was complete'); 
    } 
}); 

Answer 3

$.ajax एक अतुल्यकालिक समारोह है और इस तरह के लौटने से पहले पूरा करने के लिए, अनुरोध के लिए प्रतीक्षा नहीं करता है। इसके बजाय, जब अनुरोध समाप्त हो गया है, तो यह कॉलबैक फ़ंक्शंस को कॉल करता है, जिसे आप success और/या error द्वारा निर्दिष्ट करते हैं।

यदि आपको वास्तव में एक सिंक्रोनस बाहवीर की आवश्यकता है तो आप async को गलत पर सेट कर सकते हैं। (docu देखें)। लेकिन उस मामले में जागरूक रहें, कि जब तक अनुरोध समाप्त नहीं हो जाता है तब तक आप पूरा यूआई फ्रीज करते हैं!

Answer 4

क्योंकि AJAX असीमित है। यदि आप ajax कॉल की सफलता पर कुछ पर अमल करना चाहते हैं, सफलता घटना

$.ajax({ 
    url: 'yourserverpage.php', 
    success: function(data) { 

    alert('This will be executed only when ajax call is success /finished'); 
    } 
}); 

Asynchronous साधनों का उपयोग?

अतुल्यकालिक मैं/हे, या गैर अवरुद्ध I/O, इनपुट/आउटपुट प्रसंस्करण का एक रूप है कि अन्य प्रसंस्करण परमिट प्रसारण से पहले जारी रखने के लिए किया गया है finished.Asynchronous आई/ओ सुधार करने के लिए इस्तेमाल किया जाता है थ्रूपुट, विलंबता, और/या प्रतिक्रिया।

Answer 5

आप सफलता कर सकते हैं या आप भी .done();

$.ajax({ajax options}).done(console.log('I was assuming this would execute once the ajax request was complete')); 

Answer 6

उपयोग कर सकते हैं के रूप में अन्य लोगों ने कहा, ajax अतुल्यकालिक जावा स्क्रिप्ट और XML के लिए खड़ा है। कहा जा रहा है, तो आप jquerys ajax समारोह के साथ निम्न में से कोई कर सकते हैं:

1. गलत पर "async" विकल्प सेट करें, यदि आप कॉल तुल्यकालिक होना चाहता हूँ। यह डिफ़ॉल्ट रूप से सच है। दस्तावेज़ देखें। JQuery 1.8 के रूप में, इस संपत्ति का उपयोग बहिष्कृत किया गया है।

2. एक "पूर्ण" कॉलबैक प्रदान करें। यह डिफ़ॉल्ट रूप से असीमित रूप से घटित होगा। यह है:

   अनुरोध समाप्त होने पर एक फ़ंक्शन को कॉल किया जाना चाहिए (सफलता के बाद और त्रुटि कॉलबैक निष्पादित किए जाते हैं)।

3. "सफलता" कॉलबैक प्रदान करें। यह डिफ़ॉल्ट रूप से असीमित रूप से घटित होगा।यह है:

   अनुरोध सफल होने पर एक फ़ंक्शन कॉल किया जाना चाहिए।

Answer 7

पहले एकAJAXके लिए खड़ा है अतुल्यकालिक में; इसका मतलब है कि AJAX कॉल पृष्ठभूमि में निष्पादित की जाती हैं और जब तक वे समाप्त नहीं हो जाते हैं, तब तक स्क्रिप्ट को निष्पादित नहीं करते हैं। यह डिजाइन द्वारा काफी सुंदर है।

$.ajax({ 
    // your other options 

    done: function(data, textStatus, jqXHR) { 
    alert('Success! I got the following data back: ' + data); 
    // this runs when the request has finished successfully 
    }, 

    fail: function(jqXHR, textStatus, errorThrown) { 
    alert('Oops, there was an error :('); 
    // this runs when the request has finished, but with an error 
    }, 

    always: function(jqXHR, textStatus) { 
    alert("OK, I'm done."); 
    // this runs when the call is finished, regardless 
    // of whether it has succeeded or not 
    } 

अधिक जानकारी के लिए, एपीआई की जाँच:

आप जब कॉल खत्म कुछ कोड को चलाने के लिए चाहते हैं, आप एक समारोह में एक या अधिक निम्न पैरामीटर में पारित कर सकते हैं http://api.jquery.com/jQuery.ajax

Answer 8

jQuery $.ajax() 4 (ईवेंट) विकल्प प्रदान करता है जिनका आप उपयोग कर सकते हैं: पहले भेजने, सफलता, त्रुटि, और पूर्ण। मुझे लगता है कि आपके मामले में, पूरा सही उत्तर होगा।

उदाहरण

$.ajax({ 
    url: someUrl, 
    //... 
    beforeSend: function(){ 
    console.log("I'm sending AJAX."); 
    //display loading? 
    }, 
    success: function(data){ 
    console.log('response: '+data); 
    }, 
    error: function(er){ 
    console.log(er.responseText); 
    }, 
    complete: function(){ 
    console.log("I'm done."); 
    //hide loading? 
    } 
}); 

Answer 9

के लिए एक अन्य विकल्प बस स्थापित करने के लिए जब तक $ .ajax बयान समाप्त हो गया है async झूठी

$.ajax({ 
    async : 'false', 
    other options 
}); 

इस तरह करने के लिए अपने अगले बयान निष्पादित नहीं किया जाएगा है।