• <sub id="h4knl"><ol id="h4knl"></ol></sub>
    <sup id="h4knl"></sup>
      <sub id="h4knl"></sub>

      <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
      1. <strong id="h4knl"></strong>

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

        時(shí)間:2024-05-13 09:40:45 AJAX 我要投稿
        • 相關(guān)推薦

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

          Ajax 簡(jiǎn)介

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

          Ajax 由 HTML、JavaScript 技術(shù)、DHTML 和 DOM 組成,這一杰出的方法可以將笨拙的 Web 界面轉(zhuǎn)化成交互性的 Ajax 應(yīng)用程序。本文的作者是一位 Ajax 專(zhuān)家,他演示了這些技術(shù)如何協(xié)同工作 —— 從總體概述到細(xì)節(jié)的討論 —— 使高效的 Web 開(kāi)發(fā)成為現(xiàn)實(shí)。他還揭開(kāi)了 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ù)需求

          在開(kāi)發(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)的名稱(chēng),然后再用js更新界面(實(shí)際中的業(yè)務(wù)當(dāng)然不是獲取商品名稱(chēng)這么簡(jiǎn)單)

          二、實(shí)現(xiàn)方案

          2.1 錯(cuò)誤方案

          一般情況下,我們會(huì)直接想到,直接寫(xiě)個(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還沒(méi)有將服務(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)文章:

        解讀Rnd 函數(shù)中的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對(duì)象的方法09-28

        關(guān)于Ajax技術(shù)原理的幾點(diǎn)總結(jié)01-10

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

        解析ajax請(qǐng)求post和get的區(qū)別10-01

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

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码
      3. <sub id="h4knl"><ol id="h4knl"></ol></sub>
        <sup id="h4knl"></sup>
          <sub id="h4knl"></sub>

          <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
          1. <strong id="h4knl"></strong>

          2. 亚洲成在人天堂在线 | 亚洲天堂在线看片 | 亚洲日本乱码字幕综合 | 日本免费看在线视频一区 | 五月天国产精品 | 最新精品国偷自产手机在线 |

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

              Ajax 簡(jiǎn)介

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

              Ajax 由 HTML、JavaScript 技術(shù)、DHTML 和 DOM 組成,這一杰出的方法可以將笨拙的 Web 界面轉(zhuǎn)化成交互性的 Ajax 應(yīng)用程序。本文的作者是一位 Ajax 專(zhuān)家,他演示了這些技術(shù)如何協(xié)同工作 —— 從總體概述到細(xì)節(jié)的討論 —— 使高效的 Web 開(kāi)發(fā)成為現(xiàn)實(shí)。他還揭開(kāi)了 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ù)需求

              在開(kāi)發(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)的名稱(chēng),然后再用js更新界面(實(shí)際中的業(yè)務(wù)當(dāng)然不是獲取商品名稱(chēng)這么簡(jiǎn)單)

              二、實(shí)現(xiàn)方案

              2.1 錯(cuò)誤方案

              一般情況下,我們會(huì)直接想到,直接寫(xiě)個(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還沒(méi)有將服務(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)文章:

            解讀Rnd 函數(shù)中的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對(duì)象的方法09-28

            關(guān)于Ajax技術(shù)原理的幾點(diǎn)總結(jié)01-10

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

            解析ajax請(qǐng)求post和get的區(qū)別10-01

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