iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 22
0
Modern Web

菜鳥前端奮鬥史(欸?系列 第 22

Day22 「使用網頁等公車」 ─ 從 AJAX 開始的 api 串接之旅

AJAX

即「Asynchronous JavaScript and XML」(非同步的JavaScript與XML技術)

                       ──以上內容摘錄自 Wiki

在 JavaScript 持續進步的現在,已經有非常多的方法能達成 AJAX
像是 jQuery.ajax()ES6 的 fetch
 
不過我們今天要使用的是更老派的做法 ── XMLHttpRequest

以下是我們本次完整的 AJAX code

var xhr = new XMLHttpRequest();
xhr.open('get','URL');
xhr.send(null);
xhr.onload = function () {
    data = JSON.parse(xhr.responseText);
    console.log(`已經載入 api `)
    }

 
 

code 解釋

xhr.open('get','URL');
// 格式、要讀取的網址、同步或非同步

格式:'get'(讀取資料)、'post'(傳送資料至該資料庫)

同步與非同步

  • true(預設值) 非同步
    使用非同步的設定時,我們的程式碼不會等到資料回傳回來,就會開始執行後續程式碼
    在第三步的xhr.onload會做更詳細的解釋

  • false 同步
    會等資料回傳(接收)完畢,才繼續往下跑

xhr.send(null);

傳送資料(若上面使用'get',則此欄填寫空值 null )

同步與非同步-2

xhr.onload = function () {
    data = JSON.parse(xhr.responseText);
    // 將撈取回來的 JSON 字串轉回物件格式
    console.log(`已經載入 api `)
    // 若成功載入,console 一段提示
    }

呼應上方的情境,既然我們可以使用false(同步)等資料傳完才執行後續
為何我們預設要使用 true(非同步),再使用 xhr.onload 載入內容呢?

因為有時候我們撈取的 JSON 檔可能是一大筆資料
倘若不要太浮誇,2000筆就好
那等我們2000筆資料抓完才去執行後續動作,網頁就會在載入完成之前都卡在那邊不做事

這對於使用者而言是非常糟糕的 lag 體驗

 
所以我們預設都會使用非同步的方式,讓網頁整體能繼續執行下去
xhr.onload裡的內容,則等到資料全數完成時再做執行

其中比較有趣的是 data = JSON.parse(xhr.responseText);
因為 JSON 雖然本身是 陣列包物件 的格式,但資料在傳輸的時候必須轉換成 string(字串)
所以我們在接收到了傳送來的「字串」時,就必須使用 JSON.parse 將其轉換回原本的格式


今天真的是冷的嫑嫑的.. /images/emoticon/emoticon21.gif
各位鐵人們寫文章之虞,千萬別忘了保暖呀!


補充資料


>>隊友任意門<<

我是小菜鳥阿陰,我們下次見!


上一篇
Day21 「使用網頁等公車」 ─ 尋找 api 去囉!
下一篇
Day23 「來個小插曲,聊聊心得」 ─ 那些你用過的技術,才是你的
系列文
菜鳥前端奮鬥史(欸?30

1 則留言

0
阿陰
iT邦新手 5 級 ‧ 2018-01-12 14:27:44

自己補充一下 XD

延伸閱讀

阿陰 iT邦新手 5 級‧ 2018-01-16 21:27:57 檢舉

剛好今天在社團(Front-End Developers Taiwan)看到大家在討論,就一起轉過來/images/emoticon/emoticon12.gif

延伸閱讀

我要留言

立即登入留言