前段時間在忙開發攜程運動專案和相應的微信小程式，其中和後端通訊猶為頻繁。get、post請求方法是很多前端童鞋使用最頻繁的；websocket在11年盛行後方便了客戶端和伺服器之間傳輸，……and so on ，除了這些，還有很多我們不常使用的其他方式，但是在實際的業務場景中卻真實需要。
本文總結了目前前端使用到的資料交換方式，闡述了業務場景中如何選擇適合的方式進行資料交換( form ,xhr, fetch, SSE, webstock, postmessage， web workers等)，並列舉了一些示例程式碼， 可能存在不足的地方，歡迎大家指正。
本文用到的原始碼都放在Github上，點選下方閱讀原文可直達。
關於HTTP協義基礎可以參考阮一峰老師的《HTTP協議入門》一文。
前端經常使用的HTTP協議相關(1.0 / 1.1)method
- GET ( 對應 restful api 查詢資源, 用於客戶端從服務端取資料 )
- POST(對應 restful api中的增加資源, 用於客戶端傳資料到服務端)
- PUT (對應 restful api中的更新資源)
- DELETE （ 對應 restful api中的刪除資源 )
- HEAD ( 可以用於http請求的時間什麼，或者判斷是否存在判斷檔案大小等)
- OPTIONS （在前端中常用於 cors跨域驗證）
- TRACE * (我這邊沒有用到過，歡迎補充)
- CONNECT * (我這邊沒有用到過，歡迎補充)
enctype
- application/x-www-form-urlencoded (預設，正常的提交方式)
- multipart/form-data(有上傳檔案時常用這種)
- application/json (ajax常用這種格式)
- text/xml
- text/plain
enctype示例說明（ form , ajax, fetch 三種示例 )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>enctype</title> <style> .box{border: 1px solid #ccc;padding:20px;} .out{background: #efefef; padding:10px 20px; margin-top: 20px;} </style> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script> <script> $(function(){ $('#b1').on('click', function(){ $.ajax({ method: "POST", contentType:'application/x-www-form-urlencoded;charset=UTF-8', url: "form_action.php", data: {username: "John", password: "Boston" } }).done(function( msg ) { $('#msg1').html(msg); }); }); $('#f1').on('click', function(){ fetch("form_action.php", { method: "POST", credentials: 'include', //帶上cookie headers: { "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8" }, body: "username=John&password=Boston" }) .then(function(response){ return response.text(); }) .then(function(msg) { $('#msg1').html(msg); }, function(e) { alert("Error submitting form!"); }); }); $('#b2').on('click', function(){ var formData = new FormData(document.querySelector("#data2")); $.ajax({ method: "POST", processData:false, //無需讓jquery正處理一下資料 contentType:false, //已經是formData就預設為 multipart/form-data cache: false, url: "form_action.php", data: formData }).done(function( msg ) { $('#msg2').html(msg); }); }); $('#f2').on('click', function(){ var formData = new FormData(document.querySelector("#data2")); fetch("form_action.php", { method: "POST", headers: { "Content-Type": "multipart/form-data;charset=UTF-8" }, body: formData }) .then(function(response){ return response.text(); }) .then(function(msg) { $('#msg2').html(msg); }, function(e) { alert("Error submitting form!"); }); }); $('#b3').on('click', function(){ $.ajax({ method: "POST", contentType:'application/json;charset=UTF-8', url: "form_action.php", data: JSON.stringify({username: "John", password: "Boston" }) }).done(function( msg ) { $('#msg3').html(msg); }); }); $('#f3').on('click', function(){ var formData = new FormData(document.querySelector("#data2")); fetch("form_action.php", { method: "POST", headers: { "Content-Type": "application/json;charset=UTF-8" }, body: JSON.stringify({username: "John", password: "Boston" }) }) .then(function(response){ return response.text(); }) .then(function(msg) { $('#msg3').html(msg); }, function(e) { alert("Error submitting form!"); }); }); $('#b4').on('click', function(){ $.ajax({ method: "POST", contentType:'text/plain;charset=UTF-8', processData:false, //無需讓jquery正處理一下資料 url: "form_action.php", data: "我是一個純正的文字功能!\r\n我第二行" }).done(function( msg ) { $('#msg4').html(msg); }); }); $('#f4').on('click', function(){ var formData = new FormData(document.querySelector("#data2")); fetch("form_action.php", { method: "POST", headers: { "Content-Type": "text/plain;charset=UTF-8" }, body: "我是一個純正的文字功能!\r\n我第二行" }) .then(function(response){ return response.text(); }) .then(function(msg) { $('#msg4').html(msg); }, function(e) { alert("Error submitting form!"); }); }); $('#b5').on('click', function(){ $.ajax({ method: "POST", contentType:'text/xml;charset=UTF-8', // processData:false, //無需讓jquery正處理一下資料 url: "form_action.php", data: "<doc><h1>我是標籤</h1><p>我是內容</p></doc>" }).done(function( msg ) { $('#msg5').html(msg); }); }); $('#f5').on('click', function(){ var formData = new FormData(document.querySelector("#data2")); fetch("form_action.php", { method: "POST", headers: { "Content-Type": "text/xml;charset=UTF-8" }, body: "<doc><max>我是XML標籤</max><min>我是XML內容</min></doc>" }) .then(function(response){ return response.text(); }) .then(function(msg) { $('#msg5').html(msg); }, function(e) { alert("Error submitting form!"); }); }); }); </script> </head> <body> <h1>enctype測試</h1> <h2>表單提交: application/x-www-form-urlencoded</h2> <div class="box"> <form action="form_action.php" enctype="application/x-www-form-urlencoded" method="post"> <p>使用者: <input type="text" name="username" /></p> <p>密碼: <input type="text" name="password" /></p> <input type="submit" value="提交" /> <button type="button" id="b1">AJAX提交</button> <button type="button" id="f1">fetch提交</button> </form> <div id="msg1" class="out"></div> </div> <h2>multipart/form-data</h2> <div class="box"> <form id="data2" action="form_action.php" enctype="multipart/form-data" method="post"> <p>使用者: <input type="text" name="username" /></p> <p>密碼: <input type="text" name="password" /></p> <p>檔案: <input type="file" name="file" id="file1" /></p> <input type="submit" value="提交" /> <button type="button" id="b2">AJAX提交</button> <button type="button" id="f2">fetch提交</button> </form> <div id="msg2" class="out"></div> </div> <h2>application/json</h2> <div class="box"> <form action="form_action.php" enctype="application/json" method="post"> <p>使用者: <input type="text" name="username" /></p> <p>密碼: <input type="text" name="password" /></p> <input type="submit" value="提交" /> <button type="button" id="b3">AJAX提交</button> <button type="button" id="f3">fetch提交</button> </form> <div id="msg3" class="out"></div> </div> <h2>text/plain</h2> <div class="box"> <form action="form_action.php" enctype="text/plain" method="post"> <p>使用者: <input type="text" name="username" /></p> <p>密碼: <input type="text" name="password" /></p> <input type="submit" value="提交" /> <button type="button" id="b4">AJAX提交</button> <button type="button" id="f4">fetch提交</button> </form> <div id="msg4" class="out"></div> </div> <h2>text/xml</h2> <div class="box"> <form action="form_action.php" enctype="text/xml" method="post"> <p>使用者: <input type="text" name="username" /></p> <p>密碼: <input type="text" name="password" /></p> <input type="submit" value="提交" /> <button type="button" id="b5">AJAX提交</button> <button type="button" id="f5">fetch提交</button> </form> <div id="msg5" class="out"></div> </div> </body> </html> |
服務端 form_action.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php echo '<pre>'; if($_POST){ echo "<h1>POST</h1>"; print_r($_POST); echo "<hr>"; } if(file_get_contents("php://input")){ echo "<h1>php://input</h1>"; print_r(file_get_contents("php://input")); echo "<hr>"; } if($_FILES){ echo "<h1>file</h1>"; print_r($_FILES); echo "<hr>"; } |
* fetch api是基於Promise設計
* fetch 的一些例子 mdn/fetch-examples
伺服器到客戶端的推送 – Server-sent Events這個是html5的一個新特性，主要用於伺服器推送訊息到客戶端, 可以用於監控，通知，更新庫存之類的應用場景, 在攜程運動專案中我們主要應用於線上被預訂後通知下發通知到場館的操作介面上的即時改變狀態。
圖片來源於網路，侵刪
優點： 基於http協義無需特別的改造，除錯方便， 可以CORS跨域
server-send events 是服務端往客戶端單向推送的，如果客戶端需要上傳訊息可以使用 WebSocket
客戶端程式碼
|
1 2 3 4 |
var source = new EventSource('http://localhost:7000/server');source.onmessage = function(e) { console.log('e', JSON.parse( e.data)); document.getElementById('box').innerHTML += "SSE notification: " + e.data + '<br />'; }; |
服務端程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); //資料 $time = date('Y-m-d H:i:s'); $data = array( 'id'=>1, 'name'=>'中文', 'time'=>$time ); echo "data: ".json_encode($data)."\n\n"; flush(); ?> |
對於低版本的瀏覽器可以使用 eventsource polyfill
- Yaffle/EventSource by yaffle
- https://github.com/remy/polyfills/blob/master/EventSource.js by Remy Sharp
- rwaldron/jquery.eventsource by Rick Waldron
- amvtek/EventSource by AmvTek
客戶端與伺服器雙向通訊 WebSocket
特點
1. websocket 是個雙向的通訊。
2. 常用於應用於一些都需要雙方互動的，實時性比較強的地方(如聊天,線上客服)
3. 資料傳輸量小
4. websocket 是個 持久化的連線
原理圖
圖片來源於網路. 侵刪
這個的服務端是基於 nodejs實現的（不要問為什麼不是php，因為 nodejs 簡單些！)
server.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var WebSocketServer = require('ws').Server; var wss = new WebSocketServer({port: 2000}); wss.on('connection', function(ws) { ws.send('服務端發來一條訊息'); ws.on('message', function(message) { //轉發一下客戶端發過來的訊息 console.log('收到客戶端來的訊息: %s', message); ws.send('服務端收到來自客戶端的訊息:' + message); }); ws.on('close', function(event) { console.log('客戶端請求關閉',event); }); }); |
client.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebSocket 雙向通訊</title> <style> #boxwarp > div{ border: 1px solid #ccc; padding:10px; margin:10px; } </style> </head> <body> <button id="btn">發點什麼</button> <div id="boxwarp"></div> <script> var ws = new WebSocket("ws://127.0.0.1:2000/"); document.getElementById('btn').addEventListener('click', function() { ws.send('cancel_order'); }); function addbox(msg){ var box = document.createElement('div'); box.innerHTML = msg; document.getElementById('boxwarp').append(box); } ws.onopen = function() { var msg = 'ws已經聯接'; addbox(msg); ws.send(msg); }; ws.onmessage = function (evt) { console.log('evt'); addbox(evt.data); }; ws.onclose = function() { console.log('close'); addbox('服務端關閉了ws'); }; ws.onerror = function(err) { addbox(err); }; </script> </body> </html> |
說完了客戶端與服客端之間的通訊，現在我們來聊聊客戶端之間的通訊。
客戶端與客戶端頁面之間的通訊 postMessage
主要特點
1. window.postMessage() 方法可以安全地實現跨域通訊
2.主要用於兩個頁面之間的訊息傳送
3. 可以使用iframe與window.open開啟的頁面進行通訊.
特別的應用場景
我們的頁面引用了其他的人頁面，但我們不知道他們的頁面高度，這時可以通過window.postMessages 從iframe 裡面的頁面來傳到 當前頁面.
語法
|
1 |
otherWindow.postMessage(message, targetOrigin, [transfer]); |
示例程式碼
postmessage.html (入口)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>postmessage示例</title> <style> html,body{height: 100%;} *{padding: 0; margin:0;} .warp{ display: flex; } .warp > div, .warp > iframe{ flex: 1; margin:10px; } iframe{ height: 600px; border: 1px solid #ccc; } </style> </head> <body> <div class="warp"> <div class="left"> 左邊頁面 </div> <div class="right"> 右邊頁面 </div></div><div class="warp"> <div class="left warp"> <iframe src="./post1.html" frameborder="0" id="post1" name="post1"></iframe> </div> <div class="right warp"> <iframe src="./post2.html" frameborder="0" id="post2" name="post2"></iframe> </div> <!-- window.frames[0].postMessage('getcolor','http://lslib.com'); --> </div> <div class="warp"> <div class="left"><button id="postBtn1">向左邊的(iframe)推送資訊程式碼</button></div> <div class="right"><button id="postBtn2">向右邊的(iframe)推送資訊程式碼</button></div> </div> <script> document.getElementById('postBtn1').addEventListener('click', function(){ console.log('postBtn1'); var date = new Date().toString(); window.post1.postMessage(date,'*');});document.getElementById('postBtn2').addEventListener('click', function(){ console.log('postBtn2'); var date = new Date().toString(); window.post2.postMessage(date,'*');});window.addEventListener('message',function(e){ if(e.data){ console.log(e.data); console.log(e); window.post1.postMessage(e.data,'*'); }},false); </script> </body> </html> |
post1.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .sendbox{ background: #efefef; margin-bottom: 10px; } </style> </head> <body> <div class="sendbox"> <button id="sendbox2">直接傳送到右邊iframe</button> 左邊的iframe </div> <div id="box2"> </div> <script> document.getElementById('sendbox2').addEventListener('click', function(){ window.parent.post2.postMessage('收到來自左邊ifarme的訊息' + +new Date(),'*'); }); function addbox(html){ var item = document.createElement('div'); item.innerHTML = html; document.getElementById('box2').append(item); } window.addEventListener('message',function(e){ if(e.data){ addbox(e.data); } },false); </script> </body> </html> |
post2.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .sendbox{ background: #ccc; margin-bottom: 10px; } </style> </head> <body> <div class="sendbox" style="text-align: right;"> <button id="sendbox">中轉到左邊</button> <button id="sendbox2">直接到左邊</button> 右邊的iframe </div> <div id="box"></div> <script> document.getElementById('sendbox').addEventListener('click', function(){ /*- 向父級頁面傳 -*/ window.parent.postMessage('來自post2的訊息' + +new Date(),'*'); }); document.getElementById('sendbox2').addEventListener('click', function(){ window.parent.post1.postMessage('直接來自右邊' + +new Date(),'*'); }); function addbox(html){ var item = document.createElement('div'); item.innerHTML = html; document.getElementById('box').append(item); } window.addEventListener('message',function(e){ if(e.data){ addbox(e.data); } },false); </script> </body> </html> |
Web Workers 程式通訊（html5中的js的後臺程式）javascript設計上是一個單線，也就是說在執行js過程中只能執行一個任務, 其他的任務都在佇列中等待執行。
如果我們執行大量計算的任務時，就會阻止瀏覽器執行js，導致瀏覽器假死。
html5的 web Workers 子程式 就是為了解決這種問題而設計的。把大量計算的任務當作類似ajax非同步方式進入子程式計算，計算完了再通過 postmessage通知主程式計算結果。
圖片來源於網路. 侵刪
主執行緒程式碼(index.html)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box-warp > div{ border: 1px solid #ccc; margin:10px; padding:10px; } </style> </head> <body> <button id="btn">開啟一個後臺執行緒(點選外框中止執行緒)</button> <div class="box-warp" id="boxwarp"></div> <script> var id = 1; function init_works(){ var warpid = 'box'+id; var box = document.createElement('div'); box.id = warpid; document.getElementById('boxwarp').append(box); var worker = new Worker('./compute.js'); //監聽後臺程式發過來的訊息 worker.onmessage= function (event) { // 把子執行緒返回的結果新增到 div 上 document.getElementById(warpid).innerHTML += event.data+"<br/>"; }; //點選中止後端程式 box.addEventListener('click', function(){ worker.postMessage("oh, 我被幹掉了" + warpid); var time = setTimeout(function(){ worker.terminate(); clearTimeout(time); },0); }); //往後臺執行緒傳送訊息 worker.postMessage("hi, 我是" + warpid); id++; } document.getElementById('btn').addEventListener('click', function(){ init_works(); }); </script> </body> </html> |
後臺程式程式碼( compute.js )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var i=0; function timeX(){ i++; postMessage(i); if(i>9){ postMessage('no 我不想動了'); close(); //中止執行緒 } setTimeout(function(){ timeX(); },1000); } timeX(); //收到主執行緒的訊息 onmessage = function (oEvent) { postMessage(oEvent.data); }; |
上述程式碼簡單的說明一下， 主程式與後臺程式之間的互相通訊。
（攜程技術中心市場營銷研發部武藝嬙，對本文亦有貢獻）