前后端通訊的幾種方式

U2FsdGVkX1x 發布于2019-08-23 13:07 / 1362人閱讀

摘要：使用方法服務器接收其它類型的事件服務器端中在傳輸數據時將頭中的設置為使用方法屬性使用二進制的數據類型連接服務器選擇的下屬協議只讀鏈接狀態只讀未發送至服務器的字節數只讀服務器選擇的擴展只讀關閉前的回調函數連接失敗后的回調函數從服務器接受到

EventSource

使用方法

var evtSource = new EventSource(url); // 服務器URL

接收

evtSource.onmessage = function(e) {
  var newElement = document.createElement("li");
  
  newElement.innerHTML = "message: " + e.data;
  document.body.appendChild(newElement);
}

其它類型的事件

evtSource.addEventListener("ping", function(e) {
  var newElement = document.createElement("li");
  
  var obj = JSON.parse(e.data);
  newElement.innerHTML = "ping at " + obj.time;
  document.body.appendChild(newElement);
}, false);

web code demo
server code demo

服務器端中在傳輸數據時將頭中的Content-Type設置為text/event-stream WebSocket

使用方法

var ws = new WebSocket("ws://localhost:8080", [protocols]);

屬性

ws.binaryType //使用二進制的數據類型連接

ws.protocol //服務器選擇的下屬協議只讀

ws.readyState //鏈接狀態只讀

ws.bufferedAmount //未發送至服務器的字節數只讀

ws.extensions //服務器選擇的擴展只讀

ws.onclose //關閉前的回調函數

ws.onerror //連接失敗后的回調函數

ws.onmessage //從服務器接受到信息時的回調函數

ws.onopen //連接成功后的回調函數

ws.url //WebSocket的絕對路徑

方法

ws.close([code[, reason]]) //關閉當前鏈接

ws.send(data) //發送數據

工具

Socket.io //基于長輪詢/WebSocketNode.js庫,包括客戶端

ws //WebSocket客戶端和服務器 Node.js庫

Ajax

簡介

新技術的一種集合

其中包括:HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object

XMLHttpRequest (XHR)

可以用來獲取任何類型的數據,還支持ftp協議

使用方法

  var req = new XMLHttpRequest();
  req.onload = (e)=>{}; // ES6語法
  req.onreadystatechange = (e)=>{/*req.readyState*//*req.status*/}
  req.onerror = (e)=>{};
  req.open(protocol, url, async);
  req.setRequestHeader(); // 設置請求頭
  req.send([params]); //POST時可以填寫params String,GET使用url形式傳遞數據
  
  //POST可以傳輸json,對數據沒有限制等.GET只能以key-value形式傳遞數據,使用&符連接

2018-11-9 17:33 WebRTC(我所理解的并不屬于前后端通訊方式,屬于p2p通訊)

使用方法

const rtc = new RTCPeerConnection()

更多例子

Google I/O PPT

工具

adapter.js

了解更多請參考WebRtc

文章更新中...

云服務器 GPU云服務器 js繼承的幾種方式服務器請求的幾種方式 java創建對象的幾種方式最基本的幾種

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99230.html

Node中間層實踐（一）——基于NodeJS的全棧式開發

摘要：總結我覺得，以后基于的全棧式開發的模式將會越來越流行，這也會引領前端步入工程化時代。歡迎繼續關注本博的更新中間層實踐一基于的全棧式開發中間層實踐二搭建項目框架中間層實踐三配置中間層實踐四模板引擎中間層實踐五中間層的邏輯處理版權聲明：更多文章請訪問我的個人站Keyon Y，轉載請注明出處。前言近期公司有個新項目，由于后端人手不足，我果斷的提議用node中間層的方案，得到了老大的支持...

warkiz 2019-08-22 13:59 評論0 收藏0
雜談：前端Web通信

摘要：作為開發同學的小伙伴客戶端的瀏覽器，有點小調皮還做了一個同源策略的限制，當我們的數據請求遇到不同源的情況下跨域，我們就得嘗試其它的通信方法，不能一條道走到黑。 showImg(https://segmentfault.com/img/bVburZO?w=600&h=450); Web2.0以來，Ajax的出世，解決了傳統表單提交頁面跳轉，閃爍白屏等問題。使得Web頁面可以實現局部更新，...

Betta 2019-08-23 10:29 評論0 收藏0
Web開發之跨域與跨域資源共享

摘要：例外當涉及到同源策略時，有兩個主要的例外授信范圍兩個相互之間高度互信的域名，如公司域名，不遵守同源策略的限制。端口未將端口號加入到同源策略的組成部分之中，因此和屬于同源并且不受任何限制。原文鏈接：http://www.devsai.com/2016/11/24/talk-CORS/ 同源策略（same origin policy） 1995年，同源政策由 Netscape 公司引入瀏...

Eastboat 2019-08-20 12:29 評論0 收藏0
對前后端通信的基本了解——如何通信、跨域？

摘要：表單最原始的是如何通信的基本通信原理瀏覽器可以發出請求與接收響應，實現在頁面不刷新的情況下和服務端進行數據交互。響應的狀態為或者。 1、什么是瀏覽器的同源政策限制？端口，域名，協議，只要一個不一樣就跨域 2、前后端如何通信？常見通信的幾種方式 Ajax : 短連接Websocket : 長連接，雙向的。CORS fetch()Form表單（最原始的） Ajax是如何通信的 ...

SnaiLiu 2019-08-23 18:27 評論0 收藏0