JavaScript は、xmlhttp オブジェクトを合理的に作成して使用するために xmlhttp オブジェクト プールを構築します_javascript スキル

クライアント側で ajax テクノロジーを頻繁に使用する場合は、xmlhttp オブジェクトを複数回作成する必要があります。もちろん、ご存知のとおり、グローバル変数を使用してインスタンスをキャッシュするなど、作成方法を改善することはできます (クライアントのシングルトン モード?!)。これは同期通信には非常に効果的ですが、この方法は同期通信には適していません。非同期通信 プロセスをブロックしないと、最後の通信が完了する前にユーザーが同じ xmlhttp インスタンスを再度呼び出す可能性があるため、通信に問題が発生します。この方法では、コールバック関数の前に前の呼び出しが「上書き」されます。前の呼び出しがトリガーされます (これは、前の呼び出しが失敗したことを意味します)。 xmlhttp インスタンスを保持するプールを確立する利点は明らかです。最も明白な利点は、冗長なオブジェクトを作成しないことと、同時に呼び出される同じ xmlhttp インスタンスが再度操作されないことです。

具体的な実装アイデア:
作成された xmlhttp オブジェクト インスタンスを格納するために配列を使用し、呼び出されるたびにプールからインスタンスをフェッチします。 xmlhttp インスタンスの通信が完了した後は、その時点でアイドル状態の xmlhttp インスタンスが存在しないかどうか、およびプール内のインスタンスの数を独自の readState 属性で識別できるため、何も処理する必要はありません。インスタンスの最大数より小さい場合は、新しい 1 つのインスタンスを作成してプールに追加します。再改善された実装コードは次のとおりです:

コードをコピー コードは次のとおりです:

//XMLHTTP をカプセル化する MyAjaxObj クラス
var MyAjaxObj = new Object();
var maxXmlHttpCount = 5 //最大 5 つの xmlhttp オブジェクトが存在します

MyAjaxObj.reqList = []; //

MyAjaxObj.getFreeObj = function() {
var req = null;
var len = this.reqList.length; /First 現在のプールから
を取得します for (var i = 0; i if (this.reqList[i]) {
if (this.reqList[i]. readyState == 4 || this.reqList[i].readyState == 0) {
req = this.reqList[i]
}
} //アイドルオブジェクトがない場合は独自に作成
if (req == null) {
if (this.reqList.length < maxXmlHttpCount) {
req = getXmlHttp(); >this .reqList.push(req);
}
}
return req;


//さまざまなブラウザと互換性のある XMLHTTP オブジェクトを作成します
function getXmlHttp() {
var xmlHttp = false;
var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0", "MSXML2 . XMLHTTP",
"Microsoft.XMLHTTP"];
for (var i = 0; i try {
xmlHttp = new ActiveXObject(arrSignatures[i ] );
return xmlHttp;
}
catch (oError) {
xmlHttp = false; // 無視
}
// throw new Error("MSXMLはシステムにインストールされていません。");
if (!xmlHttp && typeof XMLHttpRequest != '未定義') {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}

/* サーバーにリクエストを送信する XMLHTTP の操作をカプセル化します。
url: サーバー リクエストへのパス。method: リクエスト メソッド (get/post)。***callback: whenサーバーは正常に結果を返します (C# のコールバック関数と同様)***
data: サーバーにリクエストしたときに添付されたデータ; urlencoded: URL がエンコードされているかどうか; callBackError を使用するかどうか。サーバーがエラーを返したときに呼び出される関数
*/
MyAjaxObj.send = function(url,method,callback,data,urlencoded,cached,callBackError) {
var req = this.getFreeObj(); //プールから、または直接 XMLHTTP をインスタンス化します。

のインスタンス//XMLHTTP リクエストのステータスが変化したときに呼び出されます (コア処理関数)
req.onreadystatechange = function() {
//リクエストがロードされました

if (req.readyState == 4) {
// リクエストが成功を返したとき
if (req.status == 200) { //または req.status < ; 400
// 成功が定義されている場合 関数呼び出し時に、成功したコールバック関数を実行します
if (callback)
callback(req, data);
// リクエストが発生した場合エラーを返します

else {
/ /失敗コールバック関数が定義されている場合、失敗コールバック関数を実行します
if (callBackError)
callBackError(req, data)
}

// プール管理を使用すると、リソースを解放するメソッドを保存できます
// try {
// delete req;
// req = null; }
// catch (e) {
//alert (e.message)// }
}
}

// でサーバーに送り返す場合POST モード
if (method.toUpperCase() == "POST" ) {
req.open("POST", url, true); // リクエストをキャッシュする必要があるかどうか (これは可能です) req.open の後にのみ設定されます)
if (cached)
req.setRequestHeader("If-Modified-Since", "0")
//リクエストはエンコードされる必要があります
if (urlencoded)
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(data);
MyAjaxObj.reqList.push(req) ;
}
//GET モードでのリクエスト
else {
req.open("GET", url, true)
//リクエストをキャッシュする必要があるかどうか
if (キャッシュ済み)
req.setRequestHeader("If-Modified-Since", "0");
req.send(null);
MyAjaxObj.reqList.push(req);
return req;
}

//すべての XMLHTTP 配列要素をクリアし、リソースを解放します
MyAjaxObj.clearReqList = function() {
var len = MyAjaxObj.reqList.length; 🎜>for (var i = 0; i var req = MyAjaxObj .reqList[i];
if (req) {
try {
delete req; 🎜>} catch (e) { }
}
}
MyAjaxObj.reqList = [];
}

//XMLHTTP が POST でリクエストを送信するときにコードをさらにカプセル化しますmode
//isClear: XMLHTTP 配列のすべての要素をクリアするかどうか。他のパラメーターの意味については、MyAjaxObj.send
MyAjaxObj.sendPost = function(url, data, callback, isClear, isCached, callBackError) を参照してください。 {
if (isClear) {
MyAjaxObj.clearReqList();
}
MyAjaxObj.send(url , "POST", callback, data, true, isCached, callBackError);メソッドにはエンコードが必要です
}
//XMLHTTP が GET モードでリクエストを送信するときにコードをさらにカプセル化します
MyAjaxObj.sendGet = function (url, args, callback, isClear, isCached, callBackError) {
if (isClear)
MyAjaxObj.clearReqList();
return MyAjaxObj.send(url, "GET", callback, args, false, isCached, callBackError);
最後に追記: 先週末、友人とチャットしていたときに、ajax アプリケーションの xmlhttp オブジェクトについて話しました。その友人の女史は、なぜ xmlhttp が非同期で通信するのかを非常に「熱心に」私に尋ねました。このオブジェクトはリクエストの呼び出しを「非同期」で処理するため (もちろん同期に設定することもできますが、これはナンセンスです)、現在のリクエストは他の操作に影響を与えない、と私は何も考えずに言いました。この回答は非常に「公式」であり、明らかに問題の本質を扱っていません。お兄さん、そんなに嫌な顔する必要あるの？少し分析した結果、各 xmlhttp 非同期リクエストはコールバック関数をトリガーすると思います。このコールバック関数の呼び出しは他の操作には影響しません。 C# の非同期処理コールバック メソッドを比較すると、実は原理的には同じです。 はは、やっと理解できたので、考えるだけで興奮します。