解讀Ajax中的循環(huán)方案計(jì)劃

1、解讀Ajax中的循環(huán)方案解讀Ajax中的循環(huán)方案Ajax簡介Ajax由HTML、JavaScript技術(shù)、DHTML和DOM組成，這一杰出的方法可以將笨拙的Web界面轉(zhuǎn)化成交互性的Ajax應(yīng)用程序。本文的作者是一位Ajax專家，他演示了這些技術(shù)如何協(xié)同工作從總體概述到細(xì)節(jié)的討論使高效的Web開發(fā)成為現(xiàn)實(shí)。他還揭開了Ajax核心概念的神秘面紗，包括XMLHttpRequest對象。五年前，如果不知道XML，您就是一只無人重視的丑小鴨。十八個月前，Ruby成了關(guān)注的中心，不知道Ruby的程序員只能坐冷板凳了。今天，如果想跟上最新的技術(shù)時尚，那您的目標(biāo)就是Ajax。但是，Ajax不僅僅是一種時尚，它

2、是一種構(gòu)建網(wǎng)站的強(qiáng)大方法，而且不像學(xué)習(xí)一種全新的語言那樣困難。一、業(yè)務(wù)需求在開發(fā)中，當(dāng)一個列表頁面加載完成后，我需要根據(jù)列表每一項(xiàng)的id去服務(wù)器端獲取對應(yīng)的數(shù)據(jù)然后再把獲取的數(shù)據(jù)賦給當(dāng)前id對應(yīng)的標(biāo)簽。例如如下表格：我有一系列的商品編號，我需要根據(jù)商品編號通過ajax到服務(wù)器獲取商品對應(yīng)的名稱，然后再用js更新界面(實(shí)際中的業(yè)務(wù)當(dāng)然不是獲取商品名稱這么簡單)二、實(shí)現(xiàn)方案2.1錯誤方案一般情況下，我們會直接想到，直接寫個for循環(huán)，在循環(huán)內(nèi)發(fā)起ajax請求獲取數(shù)據(jù)，再把獲取的數(shù)據(jù)更新到對應(yīng)的id對應(yīng)的標(biāo)簽上，如下：我們以數(shù)組模擬一些列id：vararray=1,3,2,5,3;循環(huán)的ajax請求

3、方法：functionforeach_ajax()for(vari=0;i調(diào)用：$(function()foreach_ajax(););測試結(jié)果如下：我們可以看到，在循環(huán)的內(nèi)部我們根本取不到arrayi的值。導(dǎo)致這種結(jié)果的原因是：ajax是異步執(zhí)行的，在循環(huán)結(jié)束的時候第一次ajax還沒有將服務(wù)器數(shù)據(jù)返回，而循環(huán)結(jié)束的時候for中的變量i已經(jīng)釋放了，所以arrayi=undefined2.2正確方案正確的方式是以遞歸的方式循環(huán)ajax。如下：我們以數(shù)組模擬一些列id：vararray=1,3,2,5,3;遞歸的ajax請求方法：functionLoop_ajax(index,array)if(index調(diào)用：