Ajax中的迴圈方案_AJAX相關

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中的迴圈方案，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！