Detailed explanation of AJAX request sending in a JavaScript for Loop, javascriptajax

Detailed explanation of AJAX request sending in a JavaScript for Loop, javascriptajax

First of all, this problem is rare because there are too many better solutions. An interesting part of ajax today is that a get request must be sent in each iteration, because the iteration speed is too fast and the next iteration is carried out before a request is completed, on chrome and ff, all requests except the last one are canceled. So what should we do? Set latency (not good) or other methods?
There are many solutions, such as setting sleep and iteration. I use the other two solutions.
I. synchronous ajax requestsAjax 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 = require E Nt. getElementsByName (name); // The iteration speed is faster than the sending request + the time when the response is received. Therefore, if a get request is not completed, 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 = 200) {var result = xmlHttp. responseText; if (result = "0") {document. getElementById ("btn" + invoiceId ). disabled = "disabled" ;}}} xmlHttp. open ("GET", url, false); xmlHttp. send (null );}}

In this way, the synchronous ajax request will wait for the server to respond, execute the code, and then continue iteration. But it seems that this is not recommended.

Ii. asynchronous modeBut remember, each iteration creates a new XMLHttpRequest object and cannot 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 (nam E); // The iteration speed is faster than the sending request + the time when the response is received. Therefore, the next request for (I = 0; I <invoiceIds is made before a get request is completed. 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 );}

Because the JS for loop does not run in sync with ajax, The for loop ends, but ajax is not executed yet. If asynchronous requests are used, if a new XMLHttpRequest is used during each iteration, the results are still inaccurate and some programs have not yet been executed.
It turns out that several lines of code are executed in each iteration. Put the code that sends the ajax asynchronous request in a function, and call this function in each iteration.
Performance,For such iterative ajax requests, it seems that the synchronization method has a higher performance.

This problem has been solved, and the understanding of ajax and http has been deepened.
The preceding section describes how to send AJAX requests in a JavaScript for Loop. If you are interested in the Javascript tutorial.

Articles you may be interested in:

• Use of ajax jsonp for cross-origin requests
• Analysis of ajax request json data and js parsing (Example Analysis)
• How to implement an ajax request every five minutes in Javascript
• Jquery tutorial ajax request json data example
• Example of an original Ajax request in html + js + php
• Ajax cross-origin request
• Jquery ajax asynchronous request receiving returns a json data instance
• Compatible with multiple browser Ajax request instances implemented by js and jQuery
• Jsp + ajax Method for sending GET requests
• Django uses ajax to initiate a request to return JSON data