Submit Search
Upload
12. 網路通訊方案
•
Download as PPTX, PDF
•
0 likes
•
448 views
Justin Lin
Follow
探索XMLHttpRequest 封裝XMLHttpRequest 使用Fetch API 認識Server-Sent Events與WebSocket
Read less
Read more
Technology
Report
Share
Report
Share
1 of 75
Download now
Recommended
Http Headers 與 Cache 機制(2016)
Http Headers 與 Cache 機制(2016)
振揚 陳
Http cache 的優化
Http cache 的優化
振揚 陳
ByPat博客出品-高性能Web服务器nginx及相关新技术的应用
ByPat博客出品-高性能Web服务器nginx及相关新技术的应用
redhat9
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
rewinx
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
Frank Cai
AWS Lambda Multi-Cloud Practices
AWS Lambda Multi-Cloud Practices
康志強 大人
OpenResty/Lua Practical Experience
OpenResty/Lua Practical Experience
Ho Kim
Asp net (1)
Asp net (1)
Kyle Lin
Recommended
Http Headers 與 Cache 機制(2016)
Http Headers 與 Cache 機制(2016)
振揚 陳
Http cache 的優化
Http cache 的優化
振揚 陳
ByPat博客出品-高性能Web服务器nginx及相关新技术的应用
ByPat博客出品-高性能Web服务器nginx及相关新技术的应用
redhat9
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
rewinx
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
Frank Cai
AWS Lambda Multi-Cloud Practices
AWS Lambda Multi-Cloud Practices
康志強 大人
OpenResty/Lua Practical Experience
OpenResty/Lua Practical Experience
Ho Kim
Asp net (1)
Asp net (1)
Kyle Lin
Parse, cloud code 介紹
Parse, cloud code 介紹
wantingj
前端MVVM框架安全
前端MVVM框架安全
Borg Han
Servlet & JSP 教學手冊第二版 - 第 4 章:會話管理
Servlet & JSP 教學手冊第二版 - 第 4 章:會話管理
Justin Lin
Elasticsearch 簡介
Elasticsearch 簡介
Jui An Huang (黃瑞安)
CH10:輸入輸出
CH10:輸入輸出
Justin Lin
lua & ngx_lua 的介绍与应用
lua & ngx_lua 的介绍与应用
hugo
Apache Zookeeper 分布式服务框架
Apache Zookeeper 分布式服务框架
Cabin WJ
CH14:NIO 與 NIO2
CH14:NIO 與 NIO2
Justin Lin
Servlet & JSP 教學手冊第二版 - 第 5 章:Servlet 進階 API、過濾器與傾聽器
Servlet & JSP 教學手冊第二版 - 第 5 章:Servlet 進階 API、過濾器與傾聽器
Justin Lin
Ch07 使用 JSTL
Ch07 使用 JSTL
Justin Lin
Web Caching Architecture and Design
Web Caching Architecture and Design
Ho Kim
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
Justin Lin
【第一季•第六期】Ajax & JSONP in Action
【第一季•第六期】Ajax & JSONP in Action
tbosstraining
Real time web实时信息流推送
Real time web实时信息流推送
yongboy
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
yongboy
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
self study
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践
Li JianYe
Ch03 請求與回應
Ch03 請求與回應
Justin Lin
高性能Web服务器nginx及相关新技术的应用
高性能Web服务器nginx及相关新技术的应用
redhat9
Ch03 請求與回應
Ch03 請求與回應
Justin Lin
Node.js长连接开发实践
Node.js长连接开发实践
longhao
AJAX Basic
AJAX Basic
Ryan Chung
More Related Content
What's hot
Parse, cloud code 介紹
Parse, cloud code 介紹
wantingj
前端MVVM框架安全
前端MVVM框架安全
Borg Han
Servlet & JSP 教學手冊第二版 - 第 4 章:會話管理
Servlet & JSP 教學手冊第二版 - 第 4 章:會話管理
Justin Lin
Elasticsearch 簡介
Elasticsearch 簡介
Jui An Huang (黃瑞安)
CH10:輸入輸出
CH10:輸入輸出
Justin Lin
lua & ngx_lua 的介绍与应用
lua & ngx_lua 的介绍与应用
hugo
Apache Zookeeper 分布式服务框架
Apache Zookeeper 分布式服务框架
Cabin WJ
CH14:NIO 與 NIO2
CH14:NIO 與 NIO2
Justin Lin
Servlet & JSP 教學手冊第二版 - 第 5 章:Servlet 進階 API、過濾器與傾聽器
Servlet & JSP 教學手冊第二版 - 第 5 章:Servlet 進階 API、過濾器與傾聽器
Justin Lin
Ch07 使用 JSTL
Ch07 使用 JSTL
Justin Lin
Web Caching Architecture and Design
Web Caching Architecture and Design
Ho Kim
What's hot
(11)
Parse, cloud code 介紹
Parse, cloud code 介紹
前端MVVM框架安全
前端MVVM框架安全
Servlet & JSP 教學手冊第二版 - 第 4 章:會話管理
Servlet & JSP 教學手冊第二版 - 第 4 章:會話管理
Elasticsearch 簡介
Elasticsearch 簡介
CH10:輸入輸出
CH10:輸入輸出
lua & ngx_lua 的介绍与应用
lua & ngx_lua 的介绍与应用
Apache Zookeeper 分布式服务框架
Apache Zookeeper 分布式服务框架
CH14:NIO 與 NIO2
CH14:NIO 與 NIO2
Servlet & JSP 教學手冊第二版 - 第 5 章:Servlet 進階 API、過濾器與傾聽器
Servlet & JSP 教學手冊第二版 - 第 5 章:Servlet 進階 API、過濾器與傾聽器
Ch07 使用 JSTL
Ch07 使用 JSTL
Web Caching Architecture and Design
Web Caching Architecture and Design
Similar to 12. 網路通訊方案
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
Justin Lin
【第一季•第六期】Ajax & JSONP in Action
【第一季•第六期】Ajax & JSONP in Action
tbosstraining
Real time web实时信息流推送
Real time web实时信息流推送
yongboy
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
yongboy
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
self study
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践
Li JianYe
Ch03 請求與回應
Ch03 請求與回應
Justin Lin
高性能Web服务器nginx及相关新技术的应用
高性能Web服务器nginx及相关新技术的应用
redhat9
Ch03 請求與回應
Ch03 請求與回應
Justin Lin
Node.js长连接开发实践
Node.js长连接开发实践
longhao
AJAX Basic
AJAX Basic
Ryan Chung
Spring mvc
Spring mvc
pepsixp
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
高性能Web服务器nginx及相关新技术的应用
高性能Web服务器nginx及相关新技术的应用
redhat9
异步编程与浏览器执行模型
异步编程与浏览器执行模型
keelii
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践
Jackson Tian
RxJS 6 新手入門
RxJS 6 新手入門
Will Huang
Razor_MVC3_Quick_Reference
Razor_MVC3_Quick_Reference
振林 谭
用JAX-RS和Jersey完成RESTful Web Services
用JAX-RS和Jersey完成RESTful Web Services
javatwo2011
Python xmlrpc-odoo
Python xmlrpc-odoo
robin yang
Similar to 12. 網路通訊方案
(20)
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
Servlet & JSP 教學手冊第二版 - 第 3 章:請求與回應
【第一季•第六期】Ajax & JSONP in Action
【第一季•第六期】Ajax & JSONP in Action
Real time web实时信息流推送
Real time web实时信息流推送
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
高性能Web服务器Nginx及相关新技术的应用实践
高性能Web服务器Nginx及相关新技术的应用实践
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践
Ch03 請求與回應
Ch03 請求與回應
高性能Web服务器nginx及相关新技术的应用
高性能Web服务器nginx及相关新技术的应用
Ch03 請求與回應
Ch03 請求與回應
Node.js长连接开发实践
Node.js长连接开发实践
AJAX Basic
AJAX Basic
Spring mvc
Spring mvc
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
高性能Web服务器nginx及相关新技术的应用
高性能Web服务器nginx及相关新技术的应用
异步编程与浏览器执行模型
异步编程与浏览器执行模型
D2_Node在淘宝的应用实践
D2_Node在淘宝的应用实践
RxJS 6 新手入門
RxJS 6 新手入門
Razor_MVC3_Quick_Reference
Razor_MVC3_Quick_Reference
用JAX-RS和Jersey完成RESTful Web Services
用JAX-RS和Jersey完成RESTful Web Services
Python xmlrpc-odoo
Python xmlrpc-odoo
More from Justin Lin
Ch14 簡介 Spring Boot
Ch14 簡介 Spring Boot
Justin Lin
Ch13 整合 Spring MVC/Security
Ch13 整合 Spring MVC/Security
Justin Lin
Ch12 Spring 起步走
Ch12 Spring 起步走
Justin Lin
Ch11 簡介 JavaMail
Ch11 簡介 JavaMail
Justin Lin
Ch10 Web 容器安全管理
Ch10 Web 容器安全管理
Justin Lin
Ch09 整合資料庫
Ch09 整合資料庫
Justin Lin
Ch08 自訂標籤
Ch08 自訂標籤
Justin Lin
Ch06 使用 JSP
Ch06 使用 JSP
Justin Lin
Ch05 Servlet 進階 API、過濾器與傾聽器
Ch05 Servlet 進階 API、過濾器與傾聽器
Justin Lin
Ch04 會話管理
Ch04 會話管理
Justin Lin
Ch02 撰寫與設定 Servlet
Ch02 撰寫與設定 Servlet
Justin Lin
CH1. 簡介 Web 應用程式
CH1. 簡介 Web 應用程式
Justin Lin
14. 進階主題
14. 進階主題
Justin Lin
13.並行、平行與非同步
13.並行、平行與非同步
Justin Lin
12. 除錯、測試與效能
12. 除錯、測試與效能
Justin Lin
11. 常用內建模組
11. 常用內建模組
Justin Lin
10. 資料永續與交換
10. 資料永續與交換
Justin Lin
9. 資料結構
9. 資料結構
Justin Lin
8. open() 與 io 模組
8. open() 與 io 模組
Justin Lin
7. 例外處理
7. 例外處理
Justin Lin
More from Justin Lin
(20)
Ch14 簡介 Spring Boot
Ch14 簡介 Spring Boot
Ch13 整合 Spring MVC/Security
Ch13 整合 Spring MVC/Security
Ch12 Spring 起步走
Ch12 Spring 起步走
Ch11 簡介 JavaMail
Ch11 簡介 JavaMail
Ch10 Web 容器安全管理
Ch10 Web 容器安全管理
Ch09 整合資料庫
Ch09 整合資料庫
Ch08 自訂標籤
Ch08 自訂標籤
Ch06 使用 JSP
Ch06 使用 JSP
Ch05 Servlet 進階 API、過濾器與傾聽器
Ch05 Servlet 進階 API、過濾器與傾聽器
Ch04 會話管理
Ch04 會話管理
Ch02 撰寫與設定 Servlet
Ch02 撰寫與設定 Servlet
CH1. 簡介 Web 應用程式
CH1. 簡介 Web 應用程式
14. 進階主題
14. 進階主題
13.並行、平行與非同步
13.並行、平行與非同步
12. 除錯、測試與效能
12. 除錯、測試與效能
11. 常用內建模組
11. 常用內建模組
10. 資料永續與交換
10. 資料永續與交換
9. 資料結構
9. 資料結構
8. open() 與 io 模組
8. open() 與 io 模組
7. 例外處理
7. 例外處理
12. 網路通訊方案
1.
2.
12. 網路通訊方案 • 學習目標 –
探索XMLHttpRequest – 封裝XMLHttpRequest – 使用Fetch API – 認識Server-Sent Events與 WebSocket 2
3.
Ajax • 〈Ajax: A
New Approach to Web Applications〉 • Asynchronous JavaScript + XML 3
4.
XMLHttpRequest • open(method, url,
[asynch, username, password]) • setRequestHeader(header, value) • send(content) • abort() • getAllResponseHeaders() • getResponseHeader(header) 4
5.
readystatechange • XMLHttpRequest.UNSENT • XMLHttpRequest.OPENED •
XMLHttpRequest.HEADERS_RECEIVED • XMLHttpRequest.LOADING • XMLHttpRequest.DONE 5
6.
• 多數情況下,只會對readyState為 XMLHttpRequest.DONE時進行處理 6
7.
• responseText預設會使用UTF-8 • 如果回應是XML,伺服端必須指定回應標 頭Content-Type為text/xml •
responseXML 7
8.
8
9.
9
10.
• 早期XMLHttpRequest並非標準介面 • 就歷史上來說,非同步物件的概念,始於 Microsoft為Exchange
Server建立的 Outlook Web Access • 後來被定義為IXMLHTTPRequest介面, 並在MSXML程式庫的第二版中實現 • 1995年的Internet Explorer 5.0搭載了該程 式庫,可透過ActiveXObject,指定 'XMLHTTP'建立實例來存取 10
11.
• Mozilla後來在Gecko樣版引擎仿造了類似 的介面nsIXMLHttpRequest • 而後Mozilla建立了XMLHttpRequest物件, 在2002年Gecko
1.0中獲得了完整實現 • 在Internet Explorer之外的其他主流瀏覽器 上,XMLHttpRequest成了產業標準 • Internet Explorer從2006年的7.0之後,也 開始支援XMLHttpRequest 11
12.
• W3C在2006年開始著手進行 XMLHttpRequest的標準化 • 由於HTML5概念的成形,W3C考慮進化 XMLHttpRequest,在2008年發佈了曾經 被稱為XMLHttpRequest
2或 XMLHttpRequest Level 2的草案 12
13.
• 在2011年時,XMLHttpRequest Level
2草 案被納入了原本的XMLHttpRequest規範 中,成為XMLHttpRequest Level 1 • 曾經的XMLHttpRequest Level 2草案就被 廢棄了 • 現行的XMLHttpRequest規範,可以在 〈XMLHttpRequest〉找到 13
14.
14
15.
使用GET請求 • 應用於安全(Safe)操作 – 就規範來說,GET與HEAD(與GET同為取得資 訊,不過僅取得回應標頭)對使用者來說是 「取得」資訊 •
應用於等冪(Idempotent)操作 – 在提供相同的請求資訊下,單一請求產生的結 果,與請求多次的結果必須是相同的 15
16.
• 如果使用傳統表單發送GET請求,GET的請 求參數會出現在網址列 • 然而使用XMLHttpRequest時,GET的請 求參數並不會出現在網址列 16
17.
17
18.
• 在使用XMLHttpRequest、Fetch API等進 行網路請求時,伺服端採用哪種技術,基 本上與前端無關 •
重點將會擺在伺服端期待收到哪種請求, 瀏覽器又會收到什麼回應 18
19.
19
20.
20
21.
編碼請求參數 • /、?、@、空白等字元,在URL中是保留字 元,RFC 3986規範了保留字元 •
若要在URL表達這些保留字或其他非的 ASCII的字元,必須使用%hexhex編碼形式, 又稱百分比編碼(Percent-Encoding) – url=https://openhome.cc url=https%3A%2F%2Fopenhome.cc 21
22.
• 可以使用encodeURIComponent()為字 元編碼 • 編碼後的結果是遵循RFC
3986的規範 • HTTP亦規範了GET與POST在發送請求參數 時的編碼 • 基本上與RFC 3986相同,不過空白字元是 編碼為+而不是RFC 3986規範的%20 22
23.
• 若使用encodeURIComponent()編碼, 事後必須將%20取代為+ 23
24.
• JavaScript內部實作上,使用UTF-16碼元 作為字串的元素 • encodeURIComponent()的傳回值,是 將字串處理為UTF-8編碼後,再進行百分 比編碼 •
encodeURIComponent()的結果若發送 給伺服端後,伺服端必須以UTF-8來處理 接收到的字串 24
25.
25
26.
26
27.
使用POST請求 • 用於非等冪操作,若請求有副作用,多次 POST請求的結果可以不同 • 為非安全操作,常用來改變伺服端狀態, 運用的場景是新增資料庫的內容、上傳檔 案等 27
28.
• 使用setRequestHeader()設定內容類型 • 因為POST發送的資料不一定是key=value 形式 •
著在呼叫send()時,將發送的資料作為引 數傳入,這是因為POST的資料會放在請求 本體 28
29.
封裝XMLHttpRequest 29
30.
30
31.
31
32.
32
33.
上傳檔案 • 在XMLHttpRequest標準化之後可以結合 FormData進行檔案上傳 • 請求標頭Content-Type會自動設為 multipart/form-data 33
34.
• 表單中有type為"file"的input標籤 34
35.
35
36.
• 如果想實作檔案上傳進度的顯示,是透過 XMLHttpRequestUpload的progress事 件 36
37.
37
38.
38
39.
39
40.
40
41.
• 若要傳送XML 41
42.
responseXML 42
43.
43
44.
• 在XMLHttpRequest標準化後,增加了 responseType特性 – 'arraybuffer' –
'blob' – 'document' – 'json' – 'text‘ • 透過response特性取得的對應型態,分別 會是ArrayBuffer、Blob、Document (XML剖析後的結果)、JSON回應剖析後 的物件與字串。 44
45.
45
46.
46
47.
47
48.
48
49.
封裝XMLHttpRequest操作 49
50.
50
51.
51
52.
52
53.
53
54.
54
55.
55
56.
56
57.
57
58.
58
59.
Fetch API • fetch()函式只指定網址,預設會發出 GET請求 •
傳回值是Promise,任務達成的結果是個 Response物件 59
60.
• 設定請求資訊 60
61.
• 在method為'GET'或'HEAD'時不能指定 body • fetch()支援跨站請求 •
fetch()預設不接受或發送Cookie 61
62.
Request物件 62
63.
• Fetch API會取代XMLHttpRequest? •
XMLHttpRequest有豐富的事件類型、必 要時可以設為同步請求、可以中斷請求等 • 在不施加額外的技法或設計時,fetch() 就無法提供逾時、進度處理等功能 63
64.
Server-Sent Events • 模擬伺服端推送 –
輪詢(Polling) – 長輪詢(Long polling) • HTML5規範了Server-Sent Events – 協定 – EventSource • 除了Edge與Internet Explorer之外,現代 瀏覽器都支援EventSource介面 64
65.
• 要包含Content-Type: text/event- stream標頭 •
回應訊息內容時,必須是UTF-8編碼文字 • 格式為field: valuen • 發送一個註解與三個訊息 65
66.
• 預設會觸發的事件為message • 若發生錯誤(像是連線上出了問題)會觸 發error事件 •
可以純綷發出data來觸發message事件 66
67.
• 訊息中若包含id: number,伺服端要送 出回應標頭Last-Event-ID與對應值 number •
若只發送id,表示清除Last-Event-ID 67
68.
• 可以使用event來指定要觸發哪個事件 • 分別觸發add、remove事件: •
retry用來指定重新發出連線的時間 68
69.
EventSource • 實例建立後就會發出請求 • 支援跨域請求,然而跨域時預設不發送 Cookie 69
70.
• readyState • 事件 –
open – message – error 70
71.
71
72.
簡介WebSocket • WebSocket於2011年標準化,在連線建立 之後,客戶端與伺服端可以雙向互動 • 並非基於HTTP,是基於TCP的協定 •
協定昇級機制 • 對前端來說,主要關心的是W3C規範的 The WebSocket API 72
73.
• 如果不考慮IE與Edge,對於僅需要單向接 受伺服端訊息的應用程式來說,使用 Server-Sent Events就足夠了 •
如果客戶端與伺服端需要雙向互動,而不 單只是伺服端推送訊息,例如網路遊戲, 才適合使用WebSocket 73
74.
74
75.
75
Download now