情報のやり取りに 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 フォームのようにデータを POST する必要がある場合は、setRequestHeader() を使用して HTTP ヘッダーを追加してください。次に、send() メソッドで送信するデータを指定します。
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(データ);
var タイマー;
タイマー = window.setInterval(function() {
If (xhr.readyState == XMLHttpRequest.DONE) {
window.clearTimeout(タイマー);
}
element.val(xhr.responseText);
}, 1000);
}
ポストデータ変換
標準実装の send は以下のタイプの入力しか受け付けないため、転送する必要があるデータ オブジェクトを事前に string または FormData 形式に変換する必要があります。これは JQuery ほど便利ではありませんが、JQuery はどのように行うのでしょうか。送信の途中で実装しますか? イベント応答がまだ不明なので使用できないか、すべてのオブジェクトを JSON に変換します。
void send();
void send(ArrayBuffer データ);
void send(Blob データ);
void send(文書データ);
void send(DOMString? data);
void send(FormData データ);
以下は変換コードです。ブラウザがFormDataをサポートしている場合は変換され、そうでない場合は文字列に変換されます。
関数 ajax_generate_data(jsobj) {
var i;
If (window.FormData) {
var data = new FormData();
jsobj の i {
data.append(i,jsobj[i]);
}
} else {
var data = '';
var data = [];
jsobj の i {
// 文字列に含まれる & が形式を壊さないようにするための値
var value = encodeURIComponent(jsobj[i]);
datas.append(i '=' value);
}
data = datas.join('&')
}
console.log(データ);
データを返す;
}