小编给大家分享一下Ajax中循环的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联制作网站网页找三站合一网站制作公司,专注于网页设计,成都做网站、成都网站设计、
成都外贸网站建设,网站设计,企业网站搭建,网站开发,建网站业务,680元做网站,已为上1000家服务,
创新互联网站建设将一如既往的为我们的客户提供最优质的网站建设、网络营销推广服务!
Ajax 简介
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。
五年前，如果不知道 XML，您就是一只无人重视的丑小鸭。十八个月前，Ruby 成了关注的中心，不知道 Ruby 的程序员只能坐冷板凳了。今天，如果想跟上新的技术时尚，那您的目标就是 Ajax。
但是，Ajax 不仅仅 是一种时尚，它是一种构建网站的强大方法，而且不像学习一种全新的语言那样困难。
一、业务需求
在开发中，当一个列表页面加载完成后，我需要根据列表每一项的id去服务器端获取对应的数据然后再把获取的数据赋给当前id对应的标签。
例如如下表格：
我有一系列的商品编号，我需要根据商品编号通过ajax到服务器获取商品对应的名称，然后再用js更新界面(实际中的业务当然不是获取商品名称这么简单)
二、实现方案
2.1 错误方案
一般情况下，我们会直接想到，直接写个for循环，在循环内发起ajax请求获取数据，再把获取的数据更新到对应的id对应的标签上，
如下：
我们以数组模拟一些列id：
var array = [1, 3, 2, 5, 3];
循环的ajax请求方法：
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);
});
}
}调用：
$(function () {
foreach_ajax();
});测试结果如下：
我们可以看到，在循环的内部我们根本取不到array[i]的值。
导致这种结果的原因是：ajax是异步执行的，在循环结束的时候第一次ajax还没有将服务器数据返回，而循环结束的时候for中的变量i已经释放了，所以array[i]=undefined
2.2 正确方案
正确的方式是以递归的方式循环ajax。
如下：
我们以数组模拟一些列id：
var array = [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中循环的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
本文题目：Ajax中循环的示例分析-创新互联
网站网址：
http://cdkjz.cn/article/gdihj.html
