2011-12-14 12 views
8

मेरा प्रश्न थोड़ा सा सार है।AJAX स्ट्रीमलाइनिंग तकनीकें?

हम सभी AJAX प्रीलोडर/स्पिनरों से परिचित हैं जो एक AJAX अनुरोध किए जाने पर आते हैं। मेरा सवाल यह है कि आप इनसे कैसे बचते हैं?

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

इससे पहले, मैं एक पूर्णस्क्रीन AJAX स्पिनर पॉप अप करता हूं ताकि उपयोगकर्ता को AJAX कॉल पूरा होने तक कुछ भी करने से रोका जा सके।

मेरा सवाल यह है कि, मैं AJAX स्पिनर से बचने और "स्ट्रीमलाइन" AJAX अनुरोधों से बचने के लिए कैसे जाउंगा यह सुनिश्चित करने के लिए कि कोई उपयोगकर्ता 2 सेकंड में 20 AJAX अनुरोधों को शुरू करता है, ताकि वे क्रम में निष्पादित किए जाएंगे?

मुझे वास्तव में कोड उदाहरणों की आवश्यकता नहीं है, केवल स्वीकार्य या लोकप्रिय तकनीक/विचार। या अगर मैं यहां पूरी तरह से ट्रैक बंद कर रहा हूँ।

आप

+0

सबसे लोकप्रिय वेब एप्लिकेशन "जीमेल" एक स्पिनर का उपयोग नहीं करता। स्पिनर कल इतने हैं और रोबोट ए-होल या मैक शौचालय की तरह दिखते हैं। एक साधारण संकेतक का प्रयास करें जो आवश्यकतानुसार अंदर और बाहर fades। –

उत्तर

7

अद्यतन

उपयोग के बजाय इस बात का async javascript library प्राप्त करने के लिए आप क्या चाहते हैं

नीचे पुराने

एक सरणी का उपयोग कर या कतार के मामले में अब तक अच्छा जवाब सुनिश्चित करने के लिए वे loade हैं डी और एक समय में एक लौटा दिया। मैं स्पिनर को एक साथ कैसे खत्म कर दूंगा जैसे कि जीमेल कैसे करता है और केवल आवश्यक होने पर उपयोगकर्ता को ही संदेश देता है। इन सभी स्पिनर सौदों के बारे में उपयोगकर्ता को परेशान करने में कोई बात नहीं है। वे वैसे भी छोटे रोबोट ए-होल की तरह दिखते हैं। यहां कुछ कोड है जो मैंने चाबुक किया है।

चूंकि मुझे इस पर कोई जानकारी मिली है, इसलिए मैं इसकी विशेषताओं को समझाऊंगा।

  1. बंद हो जाता है कतार त्रुटि तब होती है, तो
  2. कतार जारी है के रूप में सफलता के संदर्भ के साथ सफलता/त्रुटि के लिए
  3. है ईवेंट हैंडलर्स होता

मैं प्लगइन्स बारे में तो यह एक विचार एक प्लगइन के योग्य है? मुझे ऐसा नहीं लगता लेकिन हे आप कभी नहीं जानते।

var queue = [], 
doRequest = function(params) { 
    params.running = true; 
    $.ajax({ 
     url: params.url, 
     dataType: 'json', 
     success: function(d) { 
      params.success.call(params,d); 
      queue.unshift(); // Quit counting your change and move along. 
      if (queue.length > 0) { 
       doRequest(queue[0]); // Hey buddy, your next. 
      } 
     }, 
     error: function(a,b,c) { 
      params.error.call(params,a,b,c); 
      alert('"oops"'); // Rick Perry 
     } 
    }); 
}, 
queueRequest = function(params) { 
    queue.push(params); // Sir, you'll need to go to the BACK of the line. 
    if (!queue[0].running) { 
     doRequest(queue[0]); 
    } 
}; 

// so to use this little snippit, you just call "queueRequest" like so (over and over) 
queueRequest({ 
    url: 'someajax.abc', 
    success: function(d) { 
     // let the user know their stuff was saved etc. 
     // "this" will be the context of the "params" 
    }, 
    error: function(a,b,c) { 
     // let the user know something went wrong etc. 
     // "this" will be the context of the "params" 
    } 
}); 

और आप कर चुके हैं।

+1

अच्छा काम। ठोस उदाहरण के लिए +1। –

+0

@ one.beat.consumer मैं इस बात की सराहना करता हूं। –

+1

ऐ। अब प्रतिनिधि बनाने के लिए मुश्किल है, सभी उच्च ट्रैफिक प्रश्न बहस और सैद्धांतिक हैं जो प्रोग्रामर को बंद या स्थानांतरित कर रहे हैं।मैं किसी भी ईमानदार जवाब की सराहना करता हूं। –

2

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

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

6

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

2

मैं तुम्हें jQuery कतार सुझाव है, तो यह आपको कुछ भी कतार में है, अगर यह ajax अनुरोध या एनीमेशन कतार मदद ...

2

इस उत्तर थोड़ा सार है, लेकिन jQuery स्थगित वस्तु पर एक नज़र डालें: http://api.jquery.com/category/deferred-object/

यह अपनी स्थिति में उपयोगी हो सकता है, क्योंकि यह मूल रूप से AJAX कॉल है कि आप पढ़ सकते हैं करने के लिए कुछ राज्य की जानकारी कहते हैं/इच्छा पर अद्यतन करें।

2
  • एक केंद्रीय अनुरोध प्र
  • और सब कुछ के शीर्ष पर एक छिपा स्पिनर है।

सेंट्रल अनुरोध क्यू एक केंद्रीय सरणी के बाद, कि अस्थायी सभी अनुरोध रखती है, इसलिए pesudo कोड कुछ इस तरह होगा ...

var centralQ = []; //holds the entire process Q 

var inProc = false; //provides an in Q proc lock 
//processes the request one at a time 

function reqProc() { 
    if(centralQ.length == 0) { 
     inProc = false; 
     return true; 
    } 

    inProc = false; //locks it 
    var req = centralQ[0]; 

    function callBack() { 
     //error/res processing?? 
     if(req.callback) { 
      req.callback.apply(req, arguments); //calls the request callback 
     } 

     window.setTimeout(reqProc, 0); //loop backs, uses timeOut to defer the the loop 
    } 

    //Your loader??? 
    jQuery.get(req.url, req.data, callBack); 
} 

function addReq(addRequest) { 
    centralQ.push(addRequest); 
    if(!inProc) { //does not process if it is already running 
     reqProc(); 
    } 
} 

आप proabably पकड़ने कुछ त्रुटि करने की जरूरत है/पुनः प्रयास, लेकिन आप एक मोटा विचार मिलता है।

वैश्विक स्पिनर बस शीर्ष स्पिनर जब जरूरत में fadding, और इसे बाहर fading जब जरूरत नहीं शुरू करते हैं।

2

क्या यह ठीक नहीं है, jquery में async विकल्प है?

अनुरोध को कतार में async: true का उपयोग करें।

स्पिनरों को उसी अनुरोध को से अधिक को फिर से भेजने से बचने के लिए रखा जाता है। एक केस लेना, जहां एक सुविधा को सक्षम और अक्षम करने का विकल्प है ... यदि कोई उपयोगकर्ता एक ही बटन पर फिर से क्लिक करता है, तो आप उसी अनुरोध भेज रहे हैं। इन मामलों में केवल स्पिनरों का उपयोग करें।

पूरे पृष्ठ तक पहुंच से बचने के लिए एक बड़ा बॉक्स पॉप अप करना ... केवल एक बेवकूफ विचार है (कोई अपराध नहीं)।

विशिष्ट तत्वों के लिए स्पिनरों का उपयोग करें .. किसी भी तरह से संसाधित या छेड़छाड़ की जा रही है। अनुरोध के लिए, बस async का उपयोग करें ...

मुकदमा बंद कर दिया;)