iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 16
0
自我挑戰組

JavaScript基礎30天系列 第 16

AJAX 基礎介紹(1) DAY16

我們會將 AJAX 分為3個部分來說明
首先
我們必須了解什麼是 AJAX ?? 它解決了什麼問題??/images/emoticon/emoticon07.gif


AJAX (Asynchronous JavaScript and XML)

AJAX 是非同步的JavaScript與XML技術
由於傳統網頁允許用戶端填寫表單(form),當送出表單時就向網頁伺服器傳送一個請求。伺服器接收並處理傳來的表單,然後送回一個新的網頁,但這個做法浪費了許多頻寬,因為在前後兩個頁面中的大部分HTML碼往往是相同的

所以 AJAX 解決了上述問題

它只需向伺服器傳送並取回必須的資料,並在客戶端採用JavaScript處理來自伺服器的回應。因為在伺服器和瀏覽器之間交換的資料大量減少,伺服器回應更快了。同時,很多的處理工作可以在發出請求的客戶端機器上完成,因此Web伺服器的負荷也減少了。

參考網址: https://zh.wikipedia.org/wiki/AJAX


透過 XMLHttpRequest 物件跨瀏覽器撈資料
https://ithelp.ithome.com.tw/upload/images/20200930/20123039JrZJIx0XQN.jpg
CodePen : https://codepen.io/wemyferb/pen/KKzLZNG?editors=1010

readyState
0 - 你已經產生一個 XMLHttpRequest , 但是還沒有連結你要撈的資料
1 - 你用了open() , 但你還沒有把資料傳送過去
2 - 偵測到有使用send()
3 - loading
4 - 你撈到資料了 , 數據已經完全接收到

xhr.open('get','https://randomuser.me/api/',true);
get: 讀取資料
post: 傳送資料到伺服器


AJAX 非同步觀念

https://ithelp.ithome.com.tw/upload/images/20200930/20123039ta8oNhExsS.jpg
所以會發現 當若是非同步(true)
console那行程式碼並不會有東西

若改成false
https://ithelp.ithome.com.tw/upload/images/20200930/2012303974twhBnwnD.jpg
https://codepen.io/wemyferb/pen/eYZaVBz?editors=1012
console那行程式碼則會得到回傳的資料


那上述非同步
到底要怎麼取得資料呢??
我們可以使用 onload 這個方法
onload 當 readyState = 4 的時候觸發
https://ithelp.ithome.com.tw/upload/images/20200930/20123039X3e9o6hwKr.jpg
CodePen : https://codepen.io/wemyferb/pen/zYqQRzZ?editors=1010


HTTP狀態碼
200: 資料有正確回傳
404: 資料讀取錯誤,沒有撈到
若想要觀看更多 HTTP狀態馬
這裡推薦一個大神的文章
Will保哥的blog https://blog.miniasp.com/post/2009/01/16/Web-developer-should-know-about-HTTP-Status-Code

那今天的 AJAX就介紹到這裡
別忘了關注唷~~~/images/emoticon/emoticon07.gif


上一篇
BOM 基礎介紹 DAY15
下一篇
AJAX 基礎介紹 (2) DAY17
系列文
JavaScript基礎30天30

尚未有邦友留言

立即登入留言