前后端交互

Posted 2020-08-31 chenb

前端除了UI重构外，还需要再正确的区域渲染出服务端的数据。那么有哪些前后端交互的技能

服务端渲染

世界上大多数动态服务页面都是服务端的数据渲染，接口-> 前端赋值->模板渲染，都是在服务器完成。所以当我们查看源码的时候，我们可以看到完整的html代码，包括每个数据值。

不同的模板可能存在不同模板语法，需要自己学习。

AJAX

随着单页应用以及 Restful 接口的星期，Ajax 以及称为目前前后端交流最为频繁的方式。

Ajax的核心就是 XmlHttpRequests，来进行异步数据请求。

我们接触最多的jquery 有很多好的封装，比如 $.ajax, $.post。如果是 Angular 可以用 $http 服务。可以使用第三方的 AJax库 qwest 等。

如果使用 Ajax 的花，我们需要解决同源限制问题。这时候就需要设置服务端，设置header头，header(‘Access-Control-Allow-Origin: *‘) 或者设置 nginx配置。

现在比较好的方法是 ajax->代理->api。

注意的是每次请求的数据接口--严格遵循基础的数据结构要求，尽管js是弱类型语言，所以还是严格要求，这样有利于降低bug并提高前后端工作效率。

JSONP

josnp 算作json的一种 “使用模式”，可以解决主流浏览器跨域数据访问的问题。

function logResults(json){
    console.log(json);
}
$.ajax({
    url: "https://yourapi.com/api",
    dataType: "jsonp",
    jsonpCallback: "logResults"
});

Comet

先说短轮询，由于某些特定的业务需求，比如通知，我们需要有及时的数据更新，我们能够想到的就是 setInterval 每个一定时间去请求一次，从而做到通知的更新，但是这个会增加服务器请求数量。

这时候，就有“反向ajax”，由服务器进行数据推送，Comet能够让信息近乎实时的被推送到页面上，非常适合要求实时性的获取数据的页面。

这种方式相对而言减少一定数量的请求，以及数据的实时响应，从而一定意义的实现了所谓推送。

SSE Server-Sent Events

SSE围绕只读Comet交互推出的API或者模式。SSE API用于创建到服务器的单向链接，服务器通过这个连接就可以发送任意数量的数据。服务器响应的MIME类型必须是 text/event-stream,而且是浏览器中的 JS API能够解析的格式输出。

Web Sockets

HTML5 WebSocket 设计出来的目的就是取代轮询和Comet技术，使客户端浏览器具备像 CS 架构下 桌面系统的实时通讯能力。浏览器通过 JS 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器就可以通过TCP连接直接交换数据。这也就是我们可以使用 web 技术构建实时性的程序比如 聊天游戏等应用。

服务端大概需要做 创建一个 socket + 绑定地址和端口+监听进入的连接+接受新的连接+web socket 握手 + 解码数据。

 

 

总结

SSE 和 Web Sockets 都算是新的api，需要考虑兼容性。

Ajax: 请求->响应

Comet： 请求->挂起-> 响应（模拟服务器推送）

SSE：客户端<-服务端（服务端推送）

WebSockets: 客户端<->服务端