Shulou(Shulou.com)06/03 Report--

Editor to share with you the example analysis of the cycle in Ajax, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Introduction to Ajax

Ajax consists of HTML, JavaScript ™technology, DHTML, and DOM, an excellent way to transform a clumsy Web interface into an interactive Ajax application. The author of this article is an Ajax expert who demonstrates how these technologies can work together-from an overview to a detailed discussion-to make efficient Web development a reality. He also unveiled the core concepts of Ajax, including XMLHttpRequest objects.

Five years ago, if you didn't know XML, you would have been an ugly duckling that no one took seriously. Eighteen months ago, Ruby became the center of attention, and programmers who didn't know Ruby had to sit on the bench. Today, if you want to keep up with the latest technology fashion, your goal is Ajax.

But Ajax is not just a fashion, it's a powerful way to build a website, and it's not as difficult as learning an entirely new language.

I. Business requirements

In development, when a list page is loaded, I need to go to the server to get the corresponding data according to the id of each item in the list, and then assign the obtained data to the corresponding tag of the current id.

For example, the following table:

I have a series of item numbers. I need to get the corresponding name of the product through ajax to the server according to the item number, and then update the interface with js (of course, the actual business is not as simple as getting the product name).

Second, the implementation plan

2.1 error scenario

In general, we will directly think of writing a for loop, initiating an ajax request to obtain data within the loop, and then updating the obtained data to the corresponding tag of the corresponding id

As follows:

We simulate some columns of id as an array:

Var array = [1, 3, 2, 5, 3]

Circular ajax request method:

Function foreach_ajax () {for (var I = 0; I)

We can see that we can't get the value of array [I] at all inside the loop.

The reason for this result is that ajax is executed asynchronously, the first ajax has not returned server data at the end of the loop, and the variable I in for has been released at the end of the loop, so array [I] = undefined

2.2 the correct plan

The correct way is to loop the ajax recursively.

As follows:

We simulate some columns of id as an array:

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 (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 all the content of the article "sample Analysis of loops in Ajax". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.