Jquery AJAX अनुरोध,

Question

को पूरा करने के लिए नवीनतम अनुरोध की प्रतीक्षा करें मेरे पास एक टेक्स्टबॉक्स है कि प्रत्येक बार जब कोई उपयोगकर्ता एक पत्र इनपुट करता है तो मैं एक AJAX अनुरोध के साथ एक खोज करता हूं और उपयोगकर्ता के लिए परिणाम "लाइव" दिखाता हूं। अक्सर जब उपयोगकर्ता अक्षरों को टाइप करता है तो उपयोगकर्ता को एक नया पत्र इनपुट करने के लिए अनुरोध करने के लिए अधिक समय लगता है, इसलिए पहले व्यक्ति को समाप्त होने से पहले एक नया अनुरोध किया जाता है। अगर मैं अगला अनुरोध करने से पहले पहला व्यक्ति समाप्त कर सकता तो यह बेहतर होगा। क्या नवीनतम अनुरोध समाप्त होने पर केवल एक नया अनुरोध करने का कोई अच्छा तरीका है?

यह मेरा jQuery कोड है:

$("#MyTextBox").change(function() { 
    if (this.value.length > 2) { 
     $.ajax({ 
      type: "GET", 
      url: "http://www.domain.com/Service.svc/Search?keyword=" + this.value, 
      dataType: "json", 
      success: function(data) { 
       //here I have some code that shows the result for the user 
      } 
     }); 
    } 
}); 

Answer 1

आप एक बूलियन बना सकते हैं जो कि पहले से ही हो रहा है या नहीं, इस पर निर्भर करता है कि सही या गलत होगा। जब आप कोई अनुरोध शुरू करते हैं और इसे अपने कॉलबैक फ़ंक्शन में गलत पर सेट करते हैं तो इसे सही पर सेट करें।

var request_in_process = false; 
$("#MyTextBox").change(function() { 
    if (this.value.length > 2 && !request_in_process) { 
     request_in_process = true; 
     $.ajax({ 
      type: "GET", 
      url: "http://www.domain.com/Service.svc/Search?keyword=" + this.value, 
      dataType: "json", 
      success: function(data) { 
       request_in_process = false; 
       //here I have some code that shows the result for the user 
      } 
     }); 
    } 
}); 

Answer 2

आप ajaxComplete उपयोग कर सकते हैं ताकि आपको पता है जब एक अनुरोध एक नया अनुरोध करने से पहले समाप्त हो गया है।

आप इसे बाध्य/अनबिंड के साथ जोड़ सकते हैं ताकि परिवर्तन ईवेंट मैन्युअल रूप से जोड़ा जा सके, फिर अजाक्स अनुरोध शुरू होने पर अनबाउंड हो, और AJAX अनुरोध समाप्त होने पर रीबाउंड हो।

Answer 3

आप एक AJAX अनुरोध को रोक सकते हैं। अनुरोध को एक चर के रूप में ट्रैक रखें, और अनुरोध को फिर से शुरू करने से पहले इसे निरस्त करें।

var request = $.ajax({ ... }); 
request.abort(); 

इसमें उपयोगकर्ता इनपुट के लिए अधिक उत्तरदायी होने का अतिरिक्त लाभ है। यदि पहले अनुरोध शुरू होने के बाद उपयोगकर्ता ने कुछ और टाइप किया है, तो शायद वह अब परिणामों के पहले सेट की परवाह नहीं करता है। AJAX अनुरोध को निरस्त करना और पुन: प्रयास करना मतलब है कि उपयोगकर्ता को परिणामों का बेहतर सेट मिल जाता है।

Answer 4

जैसा कि पहले से ही ceejayoz का उल्लेख किया गया है, आपको पिछले अनुरोध को निरस्त करना चाहिए। (अनुरोध अगर वे टाइप नहीं कर सकते उन पागल कर देगा के लिए प्रतीक्षा कर के रूप में वे चाहते हैं और नए लोगों से अधिक पुराने अनुरोधों पसंद की परिणाम पुराना बना देता है।।) तो क्या हुआ के बारे में:

var request = null; 
//...  
$("#MyTextBox").change(function() { 
    if (this.value.length > 2) { 
     if (request && request.abort) 
      request.abort(); 
     request = $.ajax({ 
      type: "GET", 
      url: "http://www.domain.com/Service.svc/Search?keyword=" + this.value, 
      dataType: "json", 
      success: function(data) { 
      //here I have some code that shows the result for the user 
      request = null;     
     }); 
    }    
}); 

Answer 5

यहाँ है थोड़ा और अधिक मजबूत कार्यान्वयन। असल में हम AJAX ऑब्जेक्ट (यानी वादा ऑब्जेक्ट) को बंद करने के लिए सहेजते हैं ताकि बाद की कॉल इसे देख सकें। अगर अगली कॉलें पाती हैं कि अनुरोध की स्थिति लंबित है तो यह नए अनुरोध के बजाय उस लंबित अनुरोध पर कॉलबैक जोड़ देगा। jQuery सभी कॉलबैक को उसी अनुक्रम में आग लगा देगा जो उन्हें जोड़ा गया था। हालांकि संभावना है कि एक ही कॉलर बार-बार अनुरोध करने का प्रयास कर रहा है। इसके खिलाफ सुरक्षा के लिए मैंने कॉलर आईडी पैरामीटर जोड़ा है। यदि पिछले कॉलर अभी भी लंबित था, तो उसी कॉलर ने फिर से अनुरोध किया है, तो हम उस अनुरोध को अनदेखा करते हैं। पूर्णता के लिए मैंने कैश्ड वैल्यू भी जोड़ा है। तो अगर AJAX अनुरोध पहले से ही बनाया गया था, तो हम इसे फिर से नहीं बनाते हैं।

var ajaxRequestor = function ($) { 
    "use strict"; 

    //privates 
    var cahedValues = {}; 
    var currentAjaxRequest, callers; 

    //public interface 
    return { 
     getData: function (callerId, onGet, onFail, forceRefresh) { 
      if (forceRefresh || !cahedValues.myData) { 

       //If there is a pending request, don't start new one 
       if (!currentAjaxRequest || currentAjaxRequest.state() != "pending") { 
        currentAjaxRequest = $.getJSON("data/MyData.json"); 
        callers = {}; //list of callers waiting for request 
       } 

       //if this caller is not in the list, add it and queue up its callbacks to existing request 
       if (!callers[callerId]) { 
        callers.callerId = callerId; 

        currentAjaxRequest.done(function (data, textStatus) { 
         cahedValues.myData = data; 
         onGet(data); 
        }); 

        currentAjaxRequest.fail(function (jqxhr, textStatus, error) { 
         if (!!onFail) { 
          onFail(error); 
         } 
         else throw error; 
        }); 
       } 
      } 
      else { 
       onGet(cahedValues.myData); 
      } 
     }, 

     invalidateMyData: function() { 
      delete cahedValues.myData; 
     } 
    }; 
})($);