ホームページ > 記事 > ウェブフロントエンド > JavaScriptでloop_jqueryのAJAXリクエストを送信する際の問題の詳細な説明
まず第一に、より良い解決策が多すぎるため、この問題が発生することはほとんどありません。現在 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?" + 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?" + 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 チュートリアルに興味のある友人に役立つことを願っています。