当使用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;
}