JavaScript結(jié)合AJAX_stream實(shí)現(xiàn)流式顯示
當(dāng)使用AJAX進(jìn)行信息交互的時候,如果服務(wù)器返回的信息比較大,那么相對于傳送完成之后的統(tǒng)一顯示,流式顯示就比較友好了。
流式實(shí)現(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)換
由于標(biāo)準(zhǔn)實(shí)現(xiàn)中的send只能接受以下幾種輸入,所以需要提前對需要傳遞的數(shù)據(jù)對象轉(zhuǎn)換為字符串或者FormData格式,這一點(diǎn)就不如JQuery的方便了,但是JQuery如何在傳輸中間實(shí)現(xiàn)事件響應(yīng)還不得而知,所以不能用,再或者把所有的對象轉(zhuǎn)換中JSON。
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)成字符串。
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;
}
- javascript+ajax實(shí)現(xiàn)產(chǎn)品頁面加載信息
- javascript中AJAX用法實(shí)例分析
- javascript結(jié)合ajax讀取txt文件內(nèi)容
- javascript模擬實(shí)現(xiàn)ajax加載框?qū)嵗?/a>
- javascript ajax的5種狀態(tài)介紹
- JavaScript調(diào)用ajax獲取文本文件內(nèi)容實(shí)現(xiàn)代碼
- Javascript Ajax異步讀取RSS文檔具體實(shí)現(xiàn)
- javascript ajax 仿百度分頁函數(shù)
- JavaScript基于ajax編輯信息用法實(shí)例
相關(guān)文章
JavaScript 上傳文件(psd,壓縮包等),圖片,視頻的實(shí)現(xiàn)方法
本文通過實(shí)例代碼給大家介紹了JavaScript 上傳文件(psd,壓縮包等),圖片,視頻功能,需要的朋友可以參考下2017-06-06JavaScript實(shí)現(xiàn)查找字符串中第一個不重復(fù)的字符
這篇文章主要介紹了JavaScript實(shí)現(xiàn)查找字符串中第一個不重復(fù)的字符,需要的朋友可以參考下2014-12-12JavaScript獲取css行間樣式,內(nèi)連樣式和外鏈樣式的簡單方法
下面小編就為大家?guī)硪黄狫avaScript獲取css行間樣式,內(nèi)連樣式和外鏈樣式的簡單方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07JavaScript 中 JSON.parse 函數(shù) 和 JSON.stringify 函數(shù)
這篇文章主要介紹了JavaScript -- JSON.parse 函數(shù) 和 JSON.stringify 函數(shù),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12JS、CSS以及img對DOMContentLoaded事件的影響
最近在做性能有關(guān)的數(shù)據(jù)上報(bào),發(fā)現(xiàn)了兩個非常有意思的東西:Chrome開發(fā)者工具的Timeline分析面板,以及DOMContentLoaded事件。一個是強(qiáng)大的令人發(fā)指的性能分析工具,一個是重要的性能指標(biāo),于是就用Timeline對DOMContentLoaded事件進(jìn)行了一番研究2014-08-08詳解javascript appendChild()的完整功能
這篇文章主要介紹了詳解javascript appendChild()的完整功能,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08