先后端数据交互的几个方法

 

前端开发须要作的事情，只有两个：1. 建立界面结构 2. 数据交互

 

数据交互其实又能够分为两种：1. 给后台技术 2. 从后台那数据

 

数据交互的目的是什么？

取：将数据渲染到dom文档中  给：提交数据到后台后，后台会继续返回咱们一个数据，拿到这个数据，而后渲染页面

 

1. 利用cookie

eg：前台经过登陆来存储cookie

后台经过req.cookies（）来获取存储的cookie信息

2. 利用Ajax

在学习NodeJS以前最经常使用的先后端交互大都利用ajax 和JQuery中已经封装好的$.ajax、$.post、$.getJSON 经过建立一个XMLHttpRequest对象，来进行先后端交互。

 

在学NodeJS以后咱们也利用依赖于$http服务本身搭建的_http来完成get、post和jsonp的方式来进行先后端交互；

3. jsonp

jsonp是先后端结合跨域方式，由于前段请求到数据须要在回调函数中使用，因此后端得将数据放回到回调函数中

$.ajax({
    url:"",
    dataType:"jsonp",
    jsonp:'callback',
    success(function(res){
      console.log(res)
    })
})

jsonp属于AJAX吗？ ajax是指经过使用xmlhttpquest对象进行异步数据交互的技术，jsonp是依靠scriptsrc属性来获取的，不属于ajax

 

4. 服务端渲染

浏览器请求到的内容其实能够经过后端加工一下,将一会数据直接渲染好，再给浏览器就能够了

在php中实现服务端渲染：

在php文件中能够放入html代码，访问php文件的时候就至关于访问这个对应的html文件，由于在php文件中，因此能够写一些php的代码来渲染数据

在Node中实现服务端渲染：

利用模板引擎，node在渲染模板的时候给模板传入数据，在模板中就可使用特定的语法来渲染dom了 例如：ejs,jade

注意：express里的路由是靠请求路径划分的，前一个本身搭的路由是根据请求类型划分的。

　

5. webSocket 和 Socket.io

网上的两个程序经过一个双向的通讯链接实现数据的交换，这个链接的一端成为一个scoket

经过创建socket双向链接，就可让客户端和服务端直接进行双向通讯

简单的小案例：socket.io聊天的思路

1. 服务器端创建好服务端， var wss=require(“socket.io”)(server)

2. 建立客户端的链接socket var wsc = io.connect(‘ws://’)

3. 客户端链接 wsc.on(“connect”,function(e){})

4. 服务器端接收到客户端链接的消息 wss.on(“connection”,function(socket){})

5. 客户端发送消息的时候触发 wsc.on(“meaasge”,function(msg){})

6. 客户端接收到服务器端发送消息 wsc.on(“message”,function(e){})

　

总结是一个按部就班的过程，慢慢的了解和掌握才是总结的目的。固然总结也不必定是很是的完美，初来乍到，请你们多多指教