脚本宝典收集整理的这篇文章主要介绍了前后端通讯的几种方式,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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.close([code[, reason]]) //关闭当前链接
- ws.send(data) //发送数据
-
工具
- Socket.io //基于
长轮询
/WebSocket
Node.js库,包括客户端
- ws //
WebSocket
客户端和服务器 Node.js库
Ajax
-
简介
-
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
以上是脚本宝典为你收集整理的前后端通讯的几种方式全部内容,希望文章能够帮你解决前后端通讯的几种方式所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。