ajax 長(zhǎng)輪詢(xún)

長(zhǎng)輪詢(xún)

  • 和服務(wù)器始終保持一個(gè)連接场躯。
  • 如果當(dāng)前連接請(qǐng)求成功后,將更新數(shù)據(jù)并且繼續(xù)創(chuàng)建一個(gè)新的連接和服務(wù)器保持聯(lián)系。
  • 如果連接超時(shí)或發(fā)生異常猖辫,這個(gè)時(shí)候程序也會(huì)創(chuàng)建一個(gè)新連接繼續(xù)請(qǐng)求。

這樣就大大節(jié)省了服務(wù)器和網(wǎng)絡(luò)資源砚殿,提高了程序的性能啃憎,從而也保證了程序的順序。

jquery 寫(xiě)法

$(function(){
     // 這里模擬form表單方式請(qǐng)求數(shù)據(jù)似炎,因?yàn)樾枰枰缬?    var form = $.StandardPost('http://xxx.14.6.xxx:8888/',{
        product_code: 'CLZ7',
        type: '1'
    }); 
    var options = {
        target: '#output',          //把服務(wù)器返回的內(nèi)容放入id為output的元素中
        success: showResponse,
        error: showError
        // async:false
    };
    // 長(zhǎng)輪詢(xún) 和服務(wù)器始終保持一個(gè)連接辛萍。
    // 如果當(dāng)前連接請(qǐng)求成功后,將更新數(shù)據(jù)并且繼續(xù)創(chuàng)建一個(gè)新的連接和服務(wù)器保持聯(lián)系羡藐。
    // 如果連接超時(shí)或發(fā)生異常贩毕,這個(gè)時(shí)候程序也會(huì)創(chuàng)建一個(gè)新連接繼續(xù)請(qǐng)求。
    // 這樣就大大節(jié)省了服務(wù)器和網(wǎng)絡(luò)資源仆嗦,提高了程序的性能辉阶,從而也保證了程序的順序。
    (function longPolling(){
        form.ajaxSubmit(options);
        function showResponse() {
            var response_content = JSON.parse(JSON.parse($('#output').html()).response_content);
            var data = response_content.now;
            console.log('data',response_content,data);
            longPolling();
        }
        function showError() {
            var err = $('#output').html();
            console.log('err',err);
            longPolling();
        }
    })();
    // 模擬表單請(qǐng)求數(shù)據(jù)
    $.extend({
        StandardPost:function(url,args){
            var body = $(document.body),
                form = $("<form id='form' method='post'></form>"), // enctype='multipart/form-data'
                input;
            form.attr({"action":url});
            $.each(args,function(key,value){
                input = $("<input type='hidden'>");
                input.attr({"name":key});
                input.val(value);
                form.append(input);
            });
            form.appendTo(document.body);
            document.body.removeChild(form[0]);
            return form;
        }
    });
})

原生XHR

// 模擬長(zhǎng)連接ajax
function createStreamingClient(form,progress,succ,err){
    var xhr = createXHR(),
        received = 0,
        type = form.getAttribute('method'),
        url = form.getAttribute('action'),
        data = serialize(form);
    xhr.open(type,url,true);
    xhr.onreadystatechange = function(){
        var result;
        if(xhr.readyState == 3){  // 請(qǐng)求處理中
            // 取得最新數(shù)據(jù),并調(diào)整計(jì)數(shù)器
            result = xhr.responseText.substring(received);
            received += result.length;
            // 通過(guò) progress  傳入新的數(shù)據(jù) 
            progress(result);
        }else if(xhr.readyState == 4){
            // 請(qǐng)求已完成睛藻,且響應(yīng)已就緒
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                succ && succ(xhr.responseText);
            }else{
                err && err(xhr.status);
            }
            createStreamingClient(form,progress,succ,err);
        }
    }
    xhr.send(data);
    return xhr;
}
var form = StandardForm('http://106.14.6.153:8888/','POST',{
    product_code: 'SIZ7',
    type: '1'
});
var client = createStreamingClient(form,function(res){
    var result = JSON.parse(res);
    console.log('~~~~~~請(qǐng)求處理中~~~~~~',result);
},function(data){
    var result = JSON.parse(data);
    console.log('~~~~~~請(qǐng)求完成并成功~~~~~~',result);
},function(err){
    console.log('~~~~~~請(qǐng)求完成并失敗~~~~~~',err);
});


// ajax-submit
function submitData(form){
    var xhr = createXHR();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                var result = JSON.parse(xhr.responseText);
                console.log('success',result);
            }else{
                console.log('error',xhr.status);
            }
        }
    }
    url = form.getAttribute('action');
    type = form.getAttribute('method');
    xhr.open(type,url,true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send(serialize(form));
}
// 模擬form表單
function StandardForm(url,type,args){
    var body = document.body,
        form = document.createElement('form'), // enctype='multipart/form-data'
        input;
        
    form.setAttribute('action',url);
    form.setAttribute('method',type);
    for(var key in args){
        input = document.createElement('input');
        input.setAttribute('type','hidden');
        input.setAttribute('name',key);
        input.setAttribute('value',args[key]);
        form.appendChild(input);
    }
    document.body.appendChild(form)
    document.body.removeChild(form);
    return form;
}
// 表單序列化
function serialize(form){
    var parts = [],
        field = null,
        i,len,j,optLen,option,optValue;
    
    for(i = 0, len = form.elements.length; i < len; i++){
        field = form.elements[i];
        switch(field.type){
            case 'select-one':
            case 'select-multiple':
                if(field.name.length){
                    for(j = 0 ,optLen = field.options.length; j < optLen; j++){
                        option = field.options[j];
                        if(option.selected){
                            optValue = '';
                            if(option.hasAttrbute){
                                optValue = (option.hasAttrbute('value') ? option.value : option.text);
                            }else{
                                optValue = (option.attributes['value'].specified ? option.value : option.text);
                            }
                            parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(optValue));
                        }
                    }
                }
                break;
            case undefined:  // 字符集
            case 'file': //文件輸入
            case 'submit': //提交按鈕
            case 'reset': //重置按鈕
            case 'button': //自定義按鈕 
                break;
            case 'radio': //單選按鈕
            case 'checkbox': // 復(fù)選框
                if(!field.checked){
                    break;
                }
                // 執(zhí)行默認(rèn)操作
            default:
                if(field.name.length){
                    parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value));
                }
        }
    }
    return parts.join('&');
}
// 創(chuàng)建XHR對(duì)象
function createXHR(){
    if(typeof XMLHttpRequest != 'undefined'){
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject != 'undefined'){
        if(typeof arguments.callee.activeXString != 'string'){
            var version = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", " MSXML2.XMLHttp"],
                i,len;
            
            for(i = 0,len = version.length; i<len; i++){
                try{
                    new ActiveXObject(version[i]);
                    arguments.callee.activeXString = version[i];
                    break;
                } catch (ex) {
                    // 跳過(guò)
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        throw new Error('No XHR object available.');
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末启上,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子店印,更是在濱河造成了極大的恐慌冈在,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件按摘,死亡現(xiàn)場(chǎng)離奇詭異包券,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)炫贤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)溅固,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人兰珍,你說(shuō)我怎么就攤上這事侍郭。” “怎么了掠河?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵亮元,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我唠摹,道長(zhǎng)爆捞,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任勾拉,我火速辦了婚禮煮甥,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘藕赞。我一直安慰自己成肘,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布斧蜕。 她就那樣靜靜地躺著艇劫,像睡著了一般。 火紅的嫁衣襯著肌膚如雪惩激。 梳的紋絲不亂的頭發(fā)上店煞,一...
    開(kāi)封第一講書(shū)人閱讀 52,736評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音风钻,去河邊找鬼顷蟀。 笑死,一個(gè)胖子當(dāng)著我的面吹牛骡技,可吹牛的內(nèi)容都是我干的鸣个。 我是一名探鬼主播羞反,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼囤萤!你這毒婦竟也來(lái)了昼窗?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤涛舍,失蹤者是張志新(化名)和其女友劉穎澄惊,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體富雅,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡掸驱,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了没佑。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片毕贼。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖蛤奢,靈堂內(nèi)的尸體忽然破棺而出鬼癣,到底是詐尸還是另有隱情,我是刑警寧澤啤贩,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布待秃,位于F島的核電站,受9級(jí)特大地震影響瓜晤,放射性物質(zhì)發(fā)生泄漏锥余。R本人自食惡果不足惜腹纳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一痢掠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧嘲恍,春花似錦足画、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至俘侠,卻和暖如春象缀,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背爷速。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工央星, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人惫东。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓莉给,卻偏偏與公主長(zhǎng)得像毙石,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子颓遏,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容