Explain the problem of sending Ajax requests in a JavaScript for loop _jquery

Source: Internet
Author: User

First of all, the scenario in which this problem occurs is very rare, because there are too many better solutions. When I was doing Ajax today, an interesting place to send a GET request in each iteration, because the iteration is too fast and a request is not completed for the next iteration, on both Chrome and FF, other requests are canceled except for the last request. So what should we do? Set the latency (not too good) or other way?
There are a lot of   methods, such as setting hibernation, iterating, and so on, and I'm using two other solutions.
  Synchronous AJAX requests , and AJAX requests are asynchronous by default, so set to 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); The iteration is faster than sending the request + receiving the response time so a GET request has not been completed for the next request 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 =) {var result =
   Xmlhttp.responsetext;
   if (result = = "0") {document.getElementById ("btn" + invoiceid). Disabled = "disabled";
 }}} xmlhttp.open ("Get", url, false);
 Xmlhttp.send (NULL);

 } 
}

In this way, with a synchronous AJAX request, the server responds, executes the code, and then continues the iteration. But that does not seem to be recommended.

second, the asynchronous approach , but to remember that each iteration to create a new XMLHttpRequest object, can not be reused.

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); The iteration is faster than sending the request + receiving the response time so a GET request has not been completed for the next request for (i = 0; i < invoiceids.length; i++) {xmlHttp = creatxmlhttprequ
 EST ();
 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 = = {var result = Xmlhttp.responsetext;
  if (result = = "0") {document.getElementById ("btn" + invoiceid). Disabled = "disabled";
}
  }
 }
 } Xmlhttp.open ("Get", url, True);
Xmlhttp.send (NULL); }

Because JS's for loop runs with Ajax, it causes the for loop to end and Ajax has not yet been executed. If you are using an asynchronous request, if you go to the new XMLHttpRequest each iteration, so that each request can be completed, but the result is still inaccurate, some programs have not been implemented.
See, the original is every iteration to execute a few lines of code, you should send the Ajax asynchronous request code in a function, each iteration to call this function, so that's all right.
performance, for this iterative Ajax request, it seems that the synchronization of the way performance is higher.

This problem has been solved and deepened the understanding of Ajax and HTTP.
The above describes the issue of sending Ajax requests in a JavaScript for loop and wants to help friends who are interested in JavaScript tutorials.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.