JavaScript結(jié)合AJAX_stream實現(xiàn)流式顯示

更新時間：2015年01月08日 10:07:37 投稿：hebedich

這篇文章主要介紹了JavaScript結(jié)合AJAX_stream實現(xiàn)流式顯示,需要的朋友可以參考下

當使用AJAX進行信息交互的時候，如果服務(wù)器返回的信息比較大，那么相對于傳送完成之后的統(tǒng)一顯示，流式顯示就比較友好了。

流式實現(xiàn)

原理就是設(shè)置定時器，定時的查看AJAX對象的狀態(tài)并更新內(nèi)容，如果傳送完成，就取消定時器。

function ajax_stream(url,data,element) {

    var xmlHttp=null;

    if (window.XMLHttpRequest)

      {// code for IE7, Firefox, Opera, etc.

      xmlHttp=new XMLHttpRequest();

      }

    else if (window.ActiveXObject)

      {// code for IE6, IE5

      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

      }

    if (xmlHttp==null)

      {

      alert("Your browser does not support XMLHTTP.");

      element.val('Your browser does not support XMLHTTP. Click the LOG link to monitor the procedure.');

      return 0;

      }

    var xhr = xmlHttp;

    xhr.open('POST', url, true);

    // 如果需要像 HTML 表單那樣 POST 數(shù)據(jù)，請使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中規(guī)定您希望發(fā)送的數(shù)據(jù)：

    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    xhr.send(data);

    var timer;

    timer = window.setInterval(function() {

        if (xhr.readyState == XMLHttpRequest.DONE) {

            window.clearTimeout(timer);

        }

        element.val(xhr.responseText);

    }, 1000);

}

post數(shù)據(jù)轉(zhuǎn)換

由于標準實現(xiàn)中的send只能接受以下幾種輸入，所以需要提前對需要傳遞的數(shù)據(jù)對象轉(zhuǎn)換為字符串或者FormData格式，這一點就不如JQuery的方便了，但是JQuery如何在傳輸中間實現(xiàn)事件響應(yīng)還不得而知，所以不能用，再或者把所有的對象轉(zhuǎn)換中JSON。

復(fù)制代碼代碼如下:

void send();

void send(ArrayBuffer data);

void send(Blob data);

void send(Document data);

void send(DOMString? data);

void send(FormData data);

下面是轉(zhuǎn)換的代碼，如果瀏覽器支持FormData就轉(zhuǎn)換，否則轉(zhuǎn)成字符串。

復(fù)制代碼代碼如下:

function ajax_generate_data(jsobj) {

    var i;

    if (window.FormData) {

        var data = new FormData();

        for i in jsobj {

            data.append(i,jsobj[i]);

        }

    } else {

        var data = '';

        var datas = [];

        for i in jsobj {

            // for the values so that possible & contained in the strings do not break the format

            var value = encodeURIComponent(jsobj[i]);

            datas.append(i + '=' + value);

        }

        data = datas.join('&')

    }

    console.log(data);

    return data;

}