本文介绍如何利用JavaScript和AJAX实现服务器大体积数据的流式显示。通过定时器轮询XMLHttpRequest状态，在传输过程中逐步更新界面内容，而非等待全部完成后渲染。文章提供了完整的代码实现，包括兼容IE的XMLHttpRequest初始化、POST数据转换逻辑以及基于readyState的实时内容更新机制，帮助开发者优化长耗时请求的用户体验。
在进行AJAX数据交互时，若服务器返回的数据量较大，采用流式显示比等待传输全部完成后统一渲染更为友好。
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数据转换处理
post数据转换
由于标准实现中的send方法仅接受特定类型的输入，因此需预先将待传递的数据对象转换为字符串或FormData格式。虽然这不如JQuery便捷，且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;
}