Ajaxを使用して情報相互作用に使用する場合、サーバーによって返された情報が比較的大きい場合、送信が完了した後、ストリーミングディスプレイは統一ディスプレイと比較してよりフレンドリーになります。
ストリーミングの実装
原則は、タイマーを設定し、AJAXオブジェクトのステータスを定期的に表示し、コンテンツを更新することです。送信が完了した場合、タイマーはキャンセルされます。
コードコピーは次のとおりです。
function ajax_stream(url、data、element){
var xmlhttp = null;
if(window.xmlhttprequest)
{// IE7、Firefox、Operaなどのコード。
xmlhttp = new xmlhttprequest();
}
else if(window.activexobject)
{// IE6のコード、IE5
xmlhttp = new ActiveXObject( "microsoft.xmlhttp");
}
if(xmlhttp == null)
{
alert( "ブラウザはxmlhttpをサポートしません。");
element.val( 'ブラウザはxmlhttpをサポートしません。ログリンクをクリックして手順を監視します。');
0を返します。
}
var xhr = xmlhttp;
xhr.open( 'post'、url、true);
// HTMLフォームのような投稿データが必要な場合は、setRequestheader()を使用してHTTPヘッダーを追加します。次に、送信するデータをsend()メソッドで指定します。
xhr.setRequestheader( "content-type"、 "application/x-www-form-urlencoded");
xhr.send(data);
varタイマー;
Timer = window.setInterval(function(){
if(xhr.readystate == xmlhttprequest.done){
window.cleartimeout(タイマー);
}
element.val(xhr.responsetext);
}、1000);
}
データ変換を投稿します
標準の実装を送信することで、次の種類の入力のみを受け入れることができるため、データオブジェクトを、jqueryほど便利ではありません。ただし、JQueryが送信中にイベント応答をどのように実装できるかは不明であるため、使用できません。すべてのオブジェクトをJSONに変換することができます。
コードコピーは次のとおりです。
void send();
void send(arraybuffer data);
void send(blob data);
void send(ドキュメントデータ);
void send(domstring?data);
void send(formdata data);
以下は変換コードです。ブラウザがFormDataをサポートする場合、変換されます。それ以外の場合は、文字列に変換されます。
コードコピーは次のとおりです。
関数ajax_generate_data(jsobj){
var i;
if(window.formdata){
var data = new formdata();
JSOBJの私のために{
data.append(i、jsobj [i]);
}
} それ以外 {
var data = '';
var Datas = [];
JSOBJの私のために{
//文字列に可能に&含まれる値が形式を破らないようにする
var value = encodeuricopenent(jsobj [i]);
datas.append(i + '=' + value);
}
data = datas.join( '&')
}
console.log(data);
データを返す;
}