Event Queue & AJAX

Tommy

Event Queue

觀念重點

JavaScript是單線程語言

Single Thread

一次只能做一件事情

Event Queue利用時間差

讓JavaScript感覺好像可以同時做很多事情

計時器,Ajax,Promise等等是屬於WebAPIs

不在JavaScript單線程限制範圍之內

Demo1

單線程

Demo2

非同步(單線程)

Demo3

非同步(WebAPIs)

Demo4

Vue框架

AJAX

觀念重點

請求→回應→請求→回應→..

傳統網頁

背景送出請求取得回應

AJAX網頁

當時流行XML格式

Asynchronous JavaScript and XML

現在流行JSON格式

目前常見的底層

XMLHttpRequest(IE7以上支援、jQuery, Axios)

fetch(HTML5才有、IE11以下Bye了)

測試用API

http://www.mocky.io

https://www.mockable.io/

Demo1

非同步GET請求發送

Demo2

同步GET請求發送

Demo3

非同步POST請求發送

Demo4

fetch發送GET請求

Demo5

fetch發送POST請求

Q & A