ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptでloop_jqueryのAJAXリクエストを送信する際の問題の詳細な説明

JavaScriptでloop_jqueryのAJAXリクエストを送信する際の問題の詳細な説明

WBOY
WBOYオリジナル
2016-05-16 15:07:251911ブラウズ

まず第一に、より良い解決策が多すぎるため、この問題が発生することはほとんどありません。現在 Ajax を実行する場合、興味深い点は、反復速度が速すぎるため、最後の反復を除いて、次の反復がリクエストが完了する前に実行されることです。 1 件のリクエストを除き、他のリクエストはすべてキャンセルされました。それで、どうすればいいでしょうか?遅延を設定しますか (あまり良くありません)、それとも他の方法でしょうか?
スリープや反復の設定など、さまざまな方法があります。私は他の 2 つのソリューションを使用します。
1. 同期 ajax リクエスト 。ajax リクエストはデフォルトで非同期であるため、false に設定する必要があります。

function creatXMLHttpRequest() {
 var xmlHttp;
 if (window.ActiveXObject) {
 return xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 } else if (window.XMLHttpRequest) {
 return xmlHttp = new XMLHttpRequest();
 }
}
function disButton(name, actionName, resquestParmName) {
 var path = document.getElementById("path").value;
 var xmlHttp = creatXMLHttpRequest();

 var invoiceIds = new Array();
 invoiceIds = document.getElementsByName(name);
 // 迭代的速度快于发送请求+收到回复的时间 所以一次get请求都还没有完成就进行了下一次请求
 for (i = 0; i < invoiceIds.length; i++) { 
 var invoiceId = invoiceIds[i].value;
 var url = path + "/" + actionName + ".action&#63;" + resquestParmName + "="
  + invoiceId;
 xmlHttp.onreadystatechange = function() {
  if (xmlHttp.readyState == 4) {
  if (xmlHttp.status == 200) {

   var result = xmlHttp.responseText;
   if (result == "0") {
   document.getElementById("btn" + invoiceId).disabled = "disabled";
   }
  }
  }
 }
 xmlHttp.open("GET", url, false);
 xmlHttp.send(null);
 } 
}

この方法では、同期 Ajax リクエストを使用して、サーバーが応答するのを待ってコードを実行し、反復を続けます。しかし、これはお勧めできないようです。

2. 非同期メソッド を使用しますが、反復ごとに新しい XMLHttpRequest オブジェクトを作成する必要があり、再利用できないことに注意してください。

function creatXMLHttpRequest() {
 var xmlHttp;
 if (window.ActiveXObject) {
 return xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 } else if (window.XMLHttpRequest) {
 return xmlHttp = new XMLHttpRequest();
 }
}
function disButton(name, actionName, resquestParmName) {
 var xmlHttp;
 var path = document.getElementById("path").value;
 var invoiceIds = new Array();
 invoiceIds = document.getElementsByName(name);
 // 迭代的速度快于发送请求+收到回复的时间 所以一次get请求都还没有完成就进行了下一次请求
 for (i = 0; i < invoiceIds.length; i++) { 
 xmlHttp = creatXMLHttpRequest();
 var invoiceId = invoiceIds[i].value;
 var url = path + "/" + actionName + ".action&#63;" + resquestParmName + "="
  + invoiceId;
 fu(xmlHttp,url,invoiceId);
 } 
}
function fu(xmlHttp,url,invoiceId){
 xmlHttp.onreadystatechange = function() {
 if (xmlHttp.readyState == 4) {
  if (xmlHttp.status == 200) {
  
  var result = xmlHttp.responseText;
  if (result == "0") {
   
   document.getElementById("btn" + invoiceId).disabled = "disabled";
  }
  }
 }
 }
 //
 xmlHttp.open("GET", url, true);
 xmlHttp.send(null);
}

JS の for ループと ajax は非同期で実行されるため、for ループは終了しますが、ajax はまだ実行されていません。非同期リクエストが使用される場合、反復ごとに新しい XMLHttpRequest が作成されると、各リクエストは完了できますが、結果は依然として不正確で、一部のプログラムは実行されません。
理解してください。各反復では数行のコードを実行する必要があり、Ajax 非同期リクエストを送信するコードを関数に配置し、この関数を反復ごとに呼び出す必要があります。
パフォーマンスの点では、この反復的な ajax リクエストでは、同期メソッドの方がパフォーマンスが高いようです。

この問題は解決され、ajax と http についての理解が深まりました。
上記は、JavaScript の for ループで AJAX リクエストを送信する問題を紹介しています。JavaScript チュートリアルに興味のある友人に役立つことを願っています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。