ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript は AJAX_stream を組み合わせてストリーミングの display_javascript スキルを実装します

JavaScript は AJAX_stream を組み合わせてストリーミングの display_javascript スキルを実装します

WBOY
リリース: 2016-05-16 16:21:39
オリジナル
1379 人が閲覧しました

情報のやり取りに 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(データ);
データを返す;
}
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート