iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 15
1
自我挑戰組

網頁學習日誌系列 第 15

AJAX : 基礎觀念

  • 分享至 

  • xImage
  •  

逛購物或社群網站通常要註冊帳號,一定會有檢測這個帳號名稱是否有使用過,如果沒有才讓你註冊,而且通常是你輸入帳號,立刻就能顯示是否有人使用該帳號,而不用送出資料才能確定帳號,效率來說提升很大,簡單來說:

AJAX不用重新整理網頁,就能直接跟後端資料庫撈取資料

常見使用情況如下:

註冊帳號:即時確認該帳號是否有人使用

https://ithelp.ithome.com.tw/upload/images/20200411/201073213PsT38Algf.png

搜尋協助:輸入搜尋文字時,下方自動出現雷同的關鍵字。

https://ithelp.ithome.com.tw/upload/images/20200411/20107321bqNMN71WjU.png

庫存顯示:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321wWEGH1ZlS9.png

連結遠端伺服器方式:

利用瀏覽器跟伺服器要資料時,可透過XMLHttpRequest():

var xhr = new XMLHttpRequest(); 

當在網頁呼叫這段語法時,可以在console看到會有下列資訊,可以自己製作json檔案,上傳到遠端練習。

網址:https://ruienyuski.github.io/git_test/data.json

onload: 從遠端撈資料後,就可觸發event事件

readyState:從遠端撈取資料的狀態,有5個狀態

https://ithelp.ithome.com.tw/upload/images/20200411/20107321rOVqn43S4p.png

readyState:0
產生一個XMLHttpResquest,但是還沒有連結你要撈的資料

連結方式:

xhr.open('','',true);//還沒填寫格式,要讀取的網址,同步與非同步
// 格式:get(讀取資料),post(傳送資料到伺服器)

https://ithelp.ithome.com.tw/upload/images/20200411/201073218EbuMmtbhj.png

readyState:1
你用了open(),但沒有把資料傳送過去

xhr.open('get','https://ruienyuski.github.io/git_test/data.json',true);//已經填上格式, 要讀取的網址,同步與非同步

https://ithelp.ithome.com.tw/upload/images/20200411/20107321jPgFWcdpsY.png

readyState:4
撈到資料,數據已經完全接收

xhr.open('get','https://ruienyuski.github.io/git_test/data.json',true);//已經填上格式, 要讀取的網址,同步與非同步
// true 非同步,不會把資料傳回,就讓程式繼續執行,等到回傳到資料才會自動回傳
// false 同步,他會等資料傳回來,才讓程式繼續執行
xhr.send(null);//只是要get資料,並沒有打算傳送任何資料過來所以輸入null

https://ithelp.ithome.com.tw/upload/images/20200411/20107321MRIgOxTBKO.png

readyState:2
偵測到你有用send()
readyState:3
讀取資料中loading…


上一篇
jQuery : 小說閱讀
下一篇
AJAX : 網頁顯示資料-JS篇
系列文
網頁學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言