iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 28
1
Modern Web

JavaScript初心者ノ研究日記。系列 第 28

二十八日目:JavaScript XMLHttpRequest 壱ノ章

おっはー(U 'ᴗ' U)⑅ 我是SONYKO 。
今天天氣好好。連假我還真tm的都在家寫文章呢
 
十八日目有講到 axios ,他是用來串接遠端資料用的。
今天介紹的 XMLHttpRequest 也是一樣的東西。
 
 
上次有稍微提到撈遠端資料有四種方法:

  • jQueryAJAX
  • axios
  • fetch
  • XMLHttpRequest

雖然就目前而言 axios 是最簡便的方法、但還是要了解一下其他種方法。
加油,你快成為學霸了。

 


⑅ AJAX 到底是什麼

AJAX 全名 Asynchronous JavaScript and XML 。
中譯:非同步的JavaScript 與 XML 技術。
 
不知道會不會有人跟我一樣,一直誤以為他是一個... 方法的名稱 ( ˙꒳˙ ٥)
其實你像伺服器請求資料 這個技術就叫做 AJAX。
 
然後這個技術又分了四種請求方法( axios 、jQueryAJAX ... )
這四種方法,也都可以稱作 AJAX 。
 
所以你才會看到 明明使用 XMLHttpRequest 為什麼叫他AJAX ?
axios 也是 AJAX! 到底什麼是 AJAX ( 貓咪宇宙 )
 
這樣解釋你應該就不會混亂了。
 
 


⑅ XMLHttpRequest 名字有夠長

起手式:

const xhr = new XMLHttpRequest();

今天要去跟遠端要資料,必須先打上這行產生一個物件出來。
我們要透過這個 XMLHttpRequest 才能去跟遠端伺服器要資料。
 
來看看 console xhr 會出現什麼東西
https://ithelp.ithome.com.tw/upload/images/20201011/20129506eyb2MBONey.png
出現一個物件
這就是我們要存放遠端資料用的物件。
 
下方可以看到一堆格式,他們是請求資料的各種狀態。
比如第三行 onload ,當我們從遠端撈完資料就會觸發這個 onload 。
 
來看其中一行 readyState ,他是用來表示目前撈資料的各種狀態
我們可以看到目前數字顯示 0 ,0 是代表 我們已經產生好物件了、但還沒連結要撈的資料。
 
這邊整理給各位:

  • 0:已經產生一個 XHLHttpRequest , 但還沒連結你要撈的資料
  • 1:已經用了open,但還沒把資料傳送過去
  • 2:偵測到你用send
  • 3:loading 中( 完成後變成 4 )
  • 4:有撈到資料了,數據已完全接收 。
     
    所以我們目前位於 1 的狀態。因為我們只先建了一個物件而已。
     
      

⑅ 讀取資料

xhr.open ( 'get', /* 網址 */, true )

這邊有三個參數:

  • 格式
    get:讀取資料
    post:傳送資料
    ( 像帳號驗證,我們會傳一些文字問伺服器這個帳號能不能用 )
  • 讀取的網址
  • 同步、非同步

這邊就來插一個網址看看資料狀態:

const url = 'https://data.kcg.gov.tw/dataset/a98754a3-3446-4c9a-abfc-58dc49f2158c/resource/48d4dfc4-a4b2-44a5-bdec-70f9558cd25d/download/yopendata1070622opendatajson-1070622.json'
xhr.open ( 'get', url, true )

https://ithelp.ithome.com.tw/upload/images/20201011/20129506o3SVKIQPoy.png
readyState 變成 1 了,讚 。
依照上面狀態解釋,我們目前是:已經用了open ,但還沒把資料傳送過去的狀態。
 
  


⑅ 資料傳送

上面提到格式 post 是傳送資料,藉由傳字串過去給後台做驗證用的。
要post 東西過去時會這樣做:

xhr.send(// 這邊輸入你要傳的字 )

上面我們純粹只想撈資料,沒有要傳東西的話,這段 send 一樣要打。
小括號裡會輸入空値:

xhr.send(null)

沒有加入這行,readyStatus 的狀態會一直在 1 ,你也得不到資料。

當你這行打上之後,再來看看 console 的狀態:
https://ithelp.ithome.com.tw/upload/images/20201011/20129506OV32C5TW6J.png
這樣才算真的撈到資料 (U 'ᴗ' U)⑅
目前狀態就變到 4 了。 4 代表數據完全接收。
 

那你可能會有疑問,什麼時候會看到 3 ?

可能你抓的是一筆很大的資料,你才會看到他在 loading 中。
然後他 loading 完狀態才會跳到 4 ,但平常如果只是用來撈一些 opendata 應該不太會看到3 ,檔案不大一下子就讀取完哩。
 
 


⑅ 非同步?

上面提到的,我們會帶入三個參數,第三個參數是代表非同步。
我們在程式碼下方加入console ,察看 responseText 看看:

const xhr = new XMLHttpRequest();
const url = 'https://data.kcg.gov.tw/dataset/a98754a3-3446-4c9a-abfc-58dc49f2158c/resource/48d4dfc4-a4b2-44a5-bdec-70f9558cd25d/download/yopendata1070622opendatajson-1070622.json'
xhr.open ( 'get', url, true )
xhr.send(null)

console.log(xhr.responseText)

https://ithelp.ithome.com.tw/upload/images/20201011/20129506R6YlIAzi9S.png
(Uㅎ_ㅎU) ???? 我有打錯嗎 ?怎麼什麼東西都沒有?
其實並不是因為我有打錯、因為我如果在 console 輸入 xhr.responseText 確實有東西。
這就是我們常講到的 非同步
 
什麼是非同步?
非同步就是他不會等資料傳回來,就先跑下面的程式碼。等資料回來再傳給你。
就像你回家你家的人不等你吃晚餐先吃、啊你回來再自己吃 。
 
這邊要知道,參數的 true 是非同步 的意思、 false 是取消非同步。
 
所以為什麼我們會得到一個空白?
因為我們執行非同步,資料還沒回傳就先執行 console.log ,理所當然它印不出東西。
 
我們把 true 改成 false 看看:
https://ithelp.ithome.com.tw/upload/images/20201011/20129506NXxgfFgYWy.png
資料成功印出來了。
 
因為關掉非同步就等於 程式等資料傳回來後,才執行 console.log
就像你家人等你回家,才一起吃晚餐 。
 
 
 


⑅ 要怎麼樣才能取得資料?

我們可以用 onload 這個狀態來取得資料。
onload 是一個函式,你可以這樣寫:

const xhr = new XMLHttpRequest();
const url = 'https://data.kcg.gov.tw/dataset/a98754a3-3446-4c9a-abfc-58dc49f2158c/resource/48d4dfc4-a4b2-44a5-bdec-70f9558cd25d/download/yopendata1070622opendatajson-1070622.json'
xhr.open ( 'get', url, true )
xhr.send(null)

xhr.onload = function(){
	console.log(xhr.responseText)
}

你一樣能取得 responseText 內的資料。
 
onload 當他確定資料有回傳回來時,就會執行後面 function 。
所以上面程式碼意思就是:資料回傳回來了→ 執行 function → 得到 console.log 的結果。
 
 
 
 
 
今天的 XMLHttpRequest 先講一半。
明天再介紹更多的運用 ( ◜ᴗ◝)

讓我過一下連假,要跨日了。

じゃあね〜 ♫
 
 


୨୧(U 'ᴗ' U) SONYKO的 前端日文小教室 ♡

我累累
放棄想梗

音檔
 

今天什麼都看:

  • ネットワーク経由でリクエスト送信
    → 透過網路發送請求。
     

  • サーバーは応答していません
    → 伺服器沒有回應。
     

  • 同期(どうき)、非同期(ひどうき)
    → Dou ki 、Hi dou ki
     

  • アップロード
    → upload 上傳
     

  • 受取済み(うけとりずみ)
    → 接收完了
     

  • クライアント
    → client 用戶端
     

  • ダウンロード
    → download 下載 必學
     

  • コンテンツ
    → contents 內容


上一篇
二十七日目:JavaScript 立即函式 即時関数ノ章
下一篇
二十九日目:JavaScript XMLHttpRequest 弐ノ章
系列文
JavaScript初心者ノ研究日記。30

尚未有邦友留言

立即登入留言