iT邦幫忙

2022 iThome 鐵人賽

DAY 28
0
自我挑戰組

JavaScript亂記系列 第 28

Ajax 非同步處理

  • 分享至 

  • xImage
  •  

Ajax 是 Asynchronous JavaScript and XML的縮寫,非同步請求的概念。

  • Asynchronous:非同步
  • JavaScript:使用的程式語言
  • XML:Client 與 Server 交換資料用的資料與方法,近年由於 JSON 等格式的流行,使用 Ajax 處理的資料並不限於 XML。

非同步

當你在使用 DOM 事件時,其實你已經在運用非同步的概念,你不知道事件什麼時候會發生,但你可以先把要發生的函式準備好,等到事件發生時,就進行處理。

FB留言刷新時不用刷新整個網站就是用到非同步處理

let ary =[];
axios.get('https://hexschool.github.io/ajaxHomework/data.json')
  .then(function (response) {
    ary = response.data;
        console.log('有回傳');
  });
console.log(ary);

同步請求 v.s. 非同步請求

  • 同步請求 (Synchronous request): 客戶端 (client) 對伺服器端 (server) 送出 request ,並且在收到伺服器端的 response 之後才會繼續下一步的動作,等待的期間無法處理其他事情。這個作法並不理想,因為通常伺服器端的運算速度比本地電腦慢上好幾倍。
  • 非同步請求 (Asynchronous request):客戶端 (client) 對伺服器端 (server) 送出 request 之後,不需要等待結果,仍可以持續處理其他事情,甚至繼續送出其他 request。Responese 傳回之後,就被融合進當下頁面或應用中。

JSON

  • 屬性都是字串型別
  • 一律使用雙引號
  • 其他都跟物件一樣
  • JSON 它並不是 Javascript 的物件 他是字串便於在網路上傳遞

使用AJAX框架時會自動轉換為JS物件格式


補充

(圖片來源:六角學院)

(圖片來源:六角學院)

參考


上一篇
WHILE迴圈
下一篇
樣板字面值(Template literals)
系列文
JavaScript亂記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言