您好,欢迎访问一九零五行业门户网

JavaScript结合AJAX_stream实现流式显示_javascript技巧

当使用ajax进行信息交互的时候,如果服务器返回的信息比较大,那么相对于传送完成之后的统一显示,流式显示就比较友好了。
流式实现
原理就是设置定时器,定时的查看ajax对象的状态并更新内容,如果传送完成,就取消定时器。
复制代码 代码如下:
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 数据,请使用 setrequestheader() 来添加 http 头。然后在 send() 方法中规定您希望发送的数据:
    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数据转换
由于标准实现中的send只能接受以下几种输入,所以需要提前对需要传递的数据对象转换为字符串或者formdata格式,这一点就不如jquery的方便了,但是jquery如何在传输中间实现事件响应还不得而知,所以不能用,再或者把所有的对象转换中json。
复制代码 代码如下:
void send();
void send(arraybuffer data);
void send(blob data);
void send(document data);
void send(domstring? data);
void send(formdata data);
下面是转换的代码,如果浏览器支持formdata就转换,否则转成字符串。
复制代码 代码如下:
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;
}
其它类似信息

推荐信息