The cyclic scheme in AJAX _ajax related

Introduction to Ajax

Ajax is made up of HTML, JavaScript™ technology, DHTML, and DOM, an excellent way to translate clumsy WEB interfaces into interactive Ajax applications. The author of this article is an Ajax expert who demonstrates how these technologies work together-from a general overview to a detailed discussion-to make efficient WEB development a reality. He also uncovered the mysteries of Ajax's core concepts, including XMLHttpRequest objects.

Five years ago, if you didn't know XML, you were an ugly duckling that nobody paid attention to. 18 months ago, Ruby became the center of attention, not knowing that Ruby programmers had to be on the bench. Today, if you want to keep up with the latest technology trends, your goal is Ajax.

But Ajax is not just a fashion, it's a powerful way to build a Web site, and it's not as difficult as learning a whole new language.

First, business needs

In development, when a list page is loaded, I need to go to the server side to get the corresponding data based on the ID of each item in the list and then assign the acquired data to the label corresponding to the current ID.

For example, the following table:

I have a series of product numbers, I need to be based on the product number through Ajax to the server to get the name of the product, and then use JS to update the interface (the actual business is certainly not to get the product name so simple)

II. implementation of the programme

2.1 Error Scenarios

In general, we will directly think of directly to write a for loop, in the loop to initiate an AJAX request to obtain data, and then update the obtained data to the corresponding ID corresponding to the label,

As follows:

We simulate some column IDs with arrays:

var array = [1, 3, 2, 5, 3];

The cyclic Ajax Request method:

function Foreach_ajax () {
for (var i = 0; i < Array.Length; i++) {
$.get ("/home/loop_ajax", {Value:array[i]} , function (data) {
Console.log (array[i]+, +data);
});}

Call:

$ (function () {
foreach_ajax (); 
});

The test results are as follows:

We can see that within the loop we simply can't get the value of array[i].

The reason for this is that Ajax is performed asynchronously, and at the end of the loop the first Ajax has not returned the server data, and the variable I in the For is already released at the end of the loop, so array[i]=undefined

2.2 Correct Solution

The correct way is to loop Ajax in a recursive way.

As follows:

We simulate some column IDs with arrays:

var array = [1, 3, 2, 5, 3];

Recursive Ajax Request Method:

function Loop_ajax (index, array) {
if (Index < array.length) { 
var value = Array[index];
$.get ("/home/loop_ajax", {Value:value}, function (data) {
Console.log (Array[index] + "," + data);
if (Index < array.length) {
Loop_ajax (index + 1, array);}}
);
}

Call:

$ (function () {
Loop_ajax (0, array);
});

The test results are as follows:

The above is a small set to introduce the Ajax in the cycle of the program, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!