前后端通讯的几种方式

U2FsdGVkX1x 发布于2019-08-23 13:07 / 1360人阅读

摘要：使用方法服务器接收其它类型的事件服务器端中在传输数据时将头中的设置为使用方法属性使用二进制的数据类型连接服务器选择的下属协议只读链接状态只读未发送至服务器的字节数只读服务器选择的扩展只读关闭前的回调函数连接失败后的回调函数从服务器接受到

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创建对象的几种方式最基本的几种

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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