進度條在AJAX請求中的應用

此篇要分享的是大量並發AJAX請求的情況，對於單獨的請求，其實沒什么意義，doc上面就可以找到很多sample.

場景: 有n條請求需要發送給后台，單次請求的時間不定。

分析: 如果把n條都放在一次請求里面，會遇到2個問題。

　　1. 請求數據庫時間太長，timeout.

　　2. 頁面時間太長，timeout.

　　3. 發送內容太大，頁面掛

比較靠譜的方案是負載均衡，將請求切割以使每次請求的內容和時間都能保證在合理的范圍。同時加上遮罩，可以及時刷新進度。

直接貼關鍵代碼部分。

requestWaferDies: function(LOTS, step, root){
        var output = MyApp.settings['WaferDieOutput'].getOutputs();
        if(!(wafer_store.hasOwnProperty('unit'))){wafer_store.unit = {}}
        var lots = LOTS.split(',').filter(function(w){if(!(wafer_store.unit.hasOwnProperty(w))){return true}});
        if(lots.length > 0){
            var size_of_request = 1;
            var paras = {lot:lots, step: step, output:output};
            wafer_store.progress = [];
            this.PB_percentage(lots.length, root, LOTS);
            this.req_fn1(paras, size_of_request);
        }
    },

這部分主要做負載均衡，把任務切割，並配發任務。

PB_percentage: function(lot_len, root, LOTS) {
        var progressBar=Ext.Msg.show({
            title:"",
            msg:"Loading data .....",
            progress:true,
            width:300
        });
        var count=0;
        var bartext="";
        var curnum=0;
        var me = this;

        var task = {
            run:function () {
                count = wafer_store.progress.length;
                if (count>lot_len) {
                    progressBar.hide();
                    Ext.TaskManager.stop(task);
                    wafer_store.progress = [];  //reset
                    arguments[0].plot_heatmap(root,arguments[1]);
                }
                curnum=count/lot_len;
                bartext=parseInt(curnum*100)+"%";
                progressBar.updateProgress(curnum,bartext);
                if (count==lot_len) {   //to show 100%
                    wafer_store.progress.push('any');
                }
            },
            args:[me, LOTS],
            interval:100
        }
        Ext.TaskManager.start(task);

    },

首先生成遮罩，然后定時刷新，判斷是否需要更新狀態和結束遮罩。注意參數傳遞方式。

req_fn1: function(paras, size){    // to request unit level data per wafer# && step
        var res = {};
        Ext.Ajax.request({
            url: 'backend/api/Data/query_wafer_dies_per_lot_oper',
            method: 'POST',
            async: true,
            headers: { 'Content-Type': 'application/json'},
            jsonData : {
                lot_name: paras.lot.slice(0, size),
                step: paras.step,
                outputs: paras.output,
            },
            // timeout: 60000,
            scope: this,
            success: function(responseTxt){
                // this.sessionExpireMessage(responseTxt);
                JSON.parse(responseTxt.responseText).data.map(function(d){
                    if(res.hasOwnProperty(d.lot_number)){
                        res[d.lot_number].push(d);
                    }else{
                        res[d.lot_number] = [d];
                    }
                })
                Object.getOwnPropertyNames(res).map(function(lot){
                    if(!wafer_store.unit.hasOwnProperty(lot)){
                        wafer_store.unit[lot] = res[lot];
                        wafer_store.progress.push(lot);
                        // console.log(wafer_store.unit[lot].length);
                    }
                })

                if(paras.lot.slice(size,999999).length > 0){
                    paras.lot = paras.lot.slice(size,999999);
                    this.req_fn1(paras, size);
                }
            },
            failure: function(response){alert('server-side failure with status code ' + response.status + '\nrefresh your page and try again.')}//this.serverFailRequest
        });
    },

數據請求部分，注意，異步，並且在callback里面調用下一次AJAX.否則不行。

好了，最后的效果，如下圖，個人覺得還是很完美的。