Ajax中的循环方案

Ajax简介

Ajax由HTML、JavaScript技术、DHTML和DOM组成。这种出色的方法可以将笨拙的Web界面转化为交互式Ajax应用程序。本文的作者是一名Ajax专家，他演示了这些技术如何协同工作。从总体概述到详细讨论，高效的Web开发成为现实。他还揭示了Ajax的关键概念，包括XMLHttpRequest对象。

五年前，如果你不知道XML，你就是一只丑小鸭。18个月前，Ruby成为关注的焦点，不了解Ruby的程序员只能坐冷板凳。今天，如果你想跟上最新的技术时尚，你的目标是Ajax。

但是，Ajax不仅仅是一种时尚，它是一种强大的网站构建方式，它并不像学习一门全新的语言那么难。

一、业务要求

在开发中，当加载一个列表页面时，我需要根据列表中每个项目的id从服务器获取相应的数据，然后将获取的数据分配给当前id对应的标签。

例如，下表：

我有一系列商品编号。我需要根据商品编号通过ajax从服务器获取对应的商品名称，然后用js更新接口(实际业务肯定没有获取商品名称那么简单)

二、实施方案

2.1错误的方案

正常情况下，我们会直接想到写一个for循环，发起ajax请求获取循环中的数据，然后将获取的数据更新为对应id的对应标签。

如下所示：

我们在数组中模拟一些列id:

var数组=[1，3，2，5，3]；循环ajax请求方法：

函数foreach _ Ajax(){ for(var I=0；i array.lengthi ) {$。get('/home/loop_ajax '，{ value: array[i] }，function(data){ console . log(array[I]'，' data)；});}}通话：

$(function(){ foreach _ Ajax()；});测试结果如下：

我们可以看到，在循环中我们根本无法得到数组[i]的值。

出现这种结果的原因是ajax是异步执行的。在循环结束时，ajax第一次没有返回服务器数据，for中的变量I在循环结束时已经释放，因此array[i]=undefined

2.2正确的方案

正确的方法是递归循环ajax。

如下所示：

我们在数组中模拟一些列id:

var数组=[1，3，2，5，3]；递归ajax请求方法：

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)；}});}}通话：

$(function () {Loop_ajax(0，array)；});测试结果如下：

以上是边肖介绍的Ajax中的一个循环方案，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！