iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
0
Modern Web

淺談web系列 第 24

鐵人賽DAY24-AJAX(二)

  • 分享至 

  • xImage
  •  

一、AJAX基本原理

step1:使用者透過使用者介面瀏覽網頁內容。
step2:當DOM事件發生時,例如:按下按鈕。
step3:產生XMLHttpRequest(XHR)物件與server端進行溝通,也就是送出HTTP request(但此時還未送出)。
step4:產生callback function,定義當client端一收到該HTTP request所對應的response時該如何處理。
step5:將定義好的callback function記錄(regIster)下來。
step6:將HTTP request透過XMLHttpRequest(XHR)物件與server端進行溝通(正式送出)。
step7:server端收到HTTP request後進行處理。
step8:處理完後利用XMLHttpRequest(XHR)物件將HTTP response送回client端。
step9:執行當初所定義好的call function。
step10:更新頁面。

比起傳統網頁的DOM事件處理,利用AJAX確實麻煩很多,但為何此技術卻如此盛行?運用AJAX能夠使網頁繼續運作非同步的動作,大大提升了網頁的效能,因此利遠大於必。

參考資料:
1.https://www.youtube.com/watch?v=XzOvUNFxg0Q&list=PLdSWxzxDhd3Hq9A2SQHOBoBW-F-6n--lj&index=2


上一篇
鐵人賽DAY23-AJAX(一)
下一篇
鐵人賽DAY25-AJAX(三)
系列文
淺談web30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言