- 相關(guān)推薦
解讀Ajax中的循環(huán)方案
Ajax 簡(jiǎn)介
Ajax 由 HTML、JavaScript 技術(shù)、DHTML 和 DOM 組成，這一杰出的方法可以將笨拙的 Web 界面轉(zhuǎn)化成交互性的 Ajax 應(yīng)用程序。本文的作者是一位 Ajax 專家，他演示了這些技術(shù)如何協(xié)同工作 —— 從總體概述到細(xì)節(jié)的討論 —— 使高效的 Web 開發(fā)成為現(xiàn)實(shí)。他還揭開了 Ajax 核心概念的神秘面紗，包括 XMLHttpRequest 對(duì)象。
五年前，如果不知道 XML，您就是一只無(wú)人重視的丑小鴨。十八個(gè)月前，Ruby 成了關(guān)注的中心，不知道 Ruby 的程序員只能坐冷板凳了。今天，如果想跟上最新的技術(shù)時(shí)尚，那您的目標(biāo)就是 Ajax。
但是，Ajax 不僅僅 是一種時(shí)尚，它是一種構(gòu)建網(wǎng)站的強(qiáng)大方法，而且不像學(xué)習(xí)一種全新的語(yǔ)言那樣困難。
一、業(yè)務(wù)需求
在開發(fā)中，當(dāng)一個(gè)列表頁(yè)面加載完成后，我需要根據(jù)列表每一項(xiàng)的id去服務(wù)器端獲取對(duì)應(yīng)的數(shù)據(jù)然后再把獲取的數(shù)據(jù)賦給當(dāng)前id對(duì)應(yīng)的標(biāo)簽。
例如如下表格：
我有一系列的商品編號(hào)，我需要根據(jù)商品編號(hào)通過(guò)ajax到服務(wù)器獲取商品對(duì)應(yīng)的名稱，然后再用js更新界面(實(shí)際中的業(yè)務(wù)當(dāng)然不是獲取商品名稱這么簡(jiǎn)單)
二、實(shí)現(xiàn)方案
2.1 錯(cuò)誤方案
一般情況下，我們會(huì)直接想到，直接寫個(gè)for循環(huán)，在循環(huán)內(nèi)發(fā)起ajax請(qǐng)求獲取數(shù)據(jù)，再把獲取的數(shù)據(jù)更新到對(duì)應(yīng)的id對(duì)應(yīng)的標(biāo)簽上，
如下：
我們以數(shù)組模擬一些列id：
var array = [1, 3, 2, 5, 3];
循環(huán)的ajax請(qǐng)求方法：
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);});}}
調(diào)用：
$(function () {foreach_ajax(); });
測(cè)試結(jié)果如下：
我們可以看到，在循環(huán)的內(nèi)部我們根本取不到array[i]的值。
導(dǎo)致這種結(jié)果的原因是：ajax是異步執(zhí)行的，在循環(huán)結(jié)束的時(shí)候第一次ajax還沒有將服務(wù)器數(shù)據(jù)返回，而循環(huán)結(jié)束的時(shí)候for中的變量i已經(jīng)釋放了，所以array[i]=undefined
2.2 正確方案
正確的方式是以遞歸的方式循環(huán)ajax。
如下：
我們以數(shù)組模擬一些列id：
var array = [1, 3, 2, 5, 3];
遞歸的ajax請(qǐng)求方法：
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); }});}}
調(diào)用：
$(function () {Loop_ajax(0, array);});
測(cè)試結(jié)果如下：
【解讀Ajax中的循環(huán)方案】相關(guān)文章：
2023中考名詞解讀-指標(biāo)生06-14
原生ajax調(diào)用數(shù)據(jù)實(shí)例簡(jiǎn)單講解07-19
《艋舺》的美學(xué)解讀10-18
硬盤循環(huán)死鎖故障方法介紹07-16
留學(xué)日本的費(fèi)用解讀09-05
臨床執(zhí)業(yè)醫(yī)師助理考點(diǎn)：微循環(huán)05-25
銷售與收款循環(huán)審計(jì)流程與要點(diǎn)04-26