解讀Ajax中的循環(huán)方案

　　Ajax 簡(jiǎn)介

　　Ajax 由 HTML、JavaScript 技術(shù)、DHTML 和 DOM 組成，這一杰出的方法可以將笨拙的 Web 界面轉化成交互性的 Ajax 應用程序。本文的作者是一位 Ajax 專(zhuān)家，他演示了這些技術(shù)如何協(xié)同工作 —— 從總體概述到細節的討論 —— 使高效的 Web 開(kāi)發(fā)成為現實(shí)。他還揭開(kāi)了 Ajax 核心概念的神秘面紗，包括 XMLHttpRequest 對象。

　　五年前，如果不知道 XML，您就是一只無(wú)人重視的丑小鴨。十八個(gè)月前，Ruby 成了關(guān)注的中心，不知道 Ruby 的程序員只能坐冷板凳了。今天，如果想跟上最新的技術(shù)時(shí)尚，那您的目標就是 Ajax。

　　但是，Ajax 不僅僅 是一種時(shí)尚，它是一種構建網(wǎng)站的強大方法，而且不像學(xué)習一種全新的語(yǔ)言那樣困難。

　　一、業(yè)務(wù)需求

　　在開(kāi)發(fā)中，當一個(gè)列表頁(yè)面加載完成后，我需要根據列表每一項的id去服務(wù)器端獲取對應的數據然后再把獲取的數據賦給當前id對應的標簽。

　　例如如下表格：

　　我有一系列的商品編號，我需要根據商品編號通過(guò)ajax到服務(wù)器獲取商品對應的名稱(chēng)，然后再用js更新界面(實(shí)際中的業(yè)務(wù)當然不是獲取商品名稱(chēng)這么簡(jiǎn)單)

　　二、實(shí)現方案

　　2.1 錯誤方案

　　一般情況下，我們會(huì )直接想到，直接寫(xiě)個(gè)for循環(huán)，在循環(huán)內發(fā)起ajax請求獲取數據，再把獲取的數據更新到對應的id對應的標簽上，

　　如下：

　　我們以數組模擬一些列id：

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

　　循環(huán)的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(); });

　　測試結果如下：

　　我們可以看到，在循環(huán)的內部我們根本取不到array[i]的值。

　　導致這種結果的原因是：ajax是異步執行的，在循環(huán)結束的時(shí)候第一次ajax還沒(méi)有將服務(wù)器數據返回，而循環(huán)結束的時(shí)候for中的變量i已經(jīng)釋放了，所以array[i]=undefined

　　2.2 正確方案

　　正確的方式是以遞歸的方式循環(huán)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中的循環(huán)方案】相關(guān)文章：

解讀Rnd 函數中的asp08-03

javascript中for/in循環(huán)以及常見(jiàn)的使用技巧06-24

Linux中的more命令解讀202405-06

AJAX的工作原理及優(yōu)缺點(diǎn)08-16

解讀企業(yè)融資決策中的納稅籌劃09-30

使用ajax操作JavaScript對象的方法09-28

關(guān)于A(yíng)jax技術(shù)原理的幾點(diǎn)總結01-10

基于ajax實(shí)現無(wú)刷新分頁(yè)的方法10-15

解析ajax請求post和get的區別10-01

如何利用ajax獲取博文列表08-03