前后端实现通信的几种重要方式

1.Ajax

---

什么是ajax？

ajax的出现,刚好解决了传统方法的缺陷。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest 对象

XMLHttpRequest对象是ajax的基础,XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest

方 法	描 述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader(“header”)	返回指定首部的串值
open(“method”,”URL”,[asyncFlag],[“userName”],[“password”])	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content)	向服务器发送请求
setRequestHeader(“header”, “value”)	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 (‘post’方法一定要 )

五步使用法:

1. 创建XMLHTTPRequest对象
2. 使用open方法设置和服务器的交互信息
3. 设置发送的数据，开始和服务器端交互
4. 注册事件
5. 更新界面

get请求的实例：

//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
   if (ajax.readyState==4 &&ajax.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
　　　　console.log(ajax.responseText);//输入相应的内容
  　　}

}

post请求的实例：

//创建异步对象  
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.open('post', '02.post.php' );
//发送请求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  } 
};

2.EventSource—服务端推送事件

---

EventSource是什么？

不同于ajax轮询的复杂和websocket的资源占用过大，eventsource（sse）是一个轻量级的，易使用的消息推送API 。

eventsource怎么使用？

初始化事件源，指定一个接受事件的URL：

var evtSource = new EventSource("/sendMessage");

监听消息：

//收到服务器发生的事件时触发 
evtSource.onmessage = function (e) {              
          console.log(e.data); 
} 
//成功与服务器发生连接时触发 
evtSource.onopen = function () { 
          console.log("Server open") 
} 
//出现错误时触发 
evtSource.onerror = function () { 
          console.log("Error") 
} 
//自定义事件 
evtSource.addEventListener("myEvent", function (e) { 
          console.log(e.data); 
}, false)

服务器端nodejs实现：

• 把报头 “Content-Type” 设置为 “text/event-stream”
• 字段：每个事件之间通过空行来分隔。

var http = require('http'); 
var fs = require('fs'); 
http.createServer(function (req, res) { 
     if(req.url === '/sendMessage') { 
          //设置头信息
          res.writeHead(200, { "Content-Type": "text/event-stream"}); 
      setInterval(function () {    
              res.write( 
                  //事件一 
                  "data:" + new Date().toLocaleTimeString() + "\n\n" + //必须“\n\n”结尾    
                  //事件二 
                  ": '这是注释！'" + "\n" + 
                  "event: myEvent" + "\n" + 
                  "data:" + new Date().toLocaleString() + "\n\n" 
              ); 
       }, 1000); 
      } else { 
          fs.readFile('./index.html', function (err, content) { 
                res.writeHead(200, {'Content-Type': 'text/html'}); 
                res.end(content, 'utf-8'); });   
           } 
}).listen(3000);

3.WebSocket—客户端与服务端的双向长连接通信

---

什么是WebSocket及其特点

webSocket协议最大的特点就是解决了http协议只能单方面发送请求的问题，服务端可以主动向客户端推送信息，客户端也可以主动向服务端发送信息，是真正双向平等的对话，属于服务器推送技术的一种。
其他特点：

• 建立在TCP协议之上，服务端的实现比较容易
• 与HTTP协议有着良好的兼容性。默认端口也是80和433，并且握手阶段采用的HTTP协议，因此握手时不容易被屏蔽，能通过各种HTTP代理服务器
• 数据格式比较轻量，性能开销小，通信高效
• 可以发送文本，也可以发送二进制数据
• 没有同源限制，客户端可以与任意服务器通信
• 协议标识符是ws（如果是加密，则为wss），服务器网址就是URL

WebSocket如何工作？

web浏览器和服务器都必须实现wabsockets协议来建立和维护连接。由于websockets连接长期存在，与典型的http连接不通，对服务器有重要的影响。
基于多线程或多进程的服务器无法适用于websocket，因此他旨在打开连接，尽可能快的处理请求，然后关闭连接。 任何实际的 WebSockets 服务器端实现都需要一个异步服务器。

WebSocket客户端API

（1）创建WebSocket对象

var Socket = new WebSocket(url,[protocol])

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

（2）WebSocket属性

属 性	描 述
Socket.readyState	只读属性 readyState 表示连接状态，可以是以下值：0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount	只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

（3）WebSocket事件

事 件	事件处理程序	描 述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

（4）WebSocket方法

方 法	描 述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

4.navigator.sendBeacon

---

navigator.sendBeacon是什么？

window.addEventListener('unload', logData, false);

function logData() {
navigator.sendBeacon("/log", analyticsData);
}

sendBeacon 如果成功进入浏览器的发送队列后，会返回true；如果受到队列总数、数据大小的限制后，会返回false。返回ture后，只是表示进入了发送队列，浏览器会尽力保证发送成功，但是否成功了，不会再有任何返回值。目前暂无具体的数据长度限制标准。

5.服务端渲染

---

谈起服务端渲染，对于动态服务而言，这个世界 上跑的大多数页面都经过服务端的数据渲染，接口->前端赋值->模板渲染，这些都是在服务器完成的，在查看源码的时候，可以看到完整的html代码，包括每个数据值。