前端与后端交互详解-优快云博客

转载自：https://blog.youkuaiyun.com/sunshao904/article/details/73135976

xhr是什么文件类型？

xhr：XMLHttpRequest在后台与服务器交换数据，这意味着可以在不加载整个网页的情况下，对网页某部分的内容进行更新。

是Ajax的一种用法，而Ajax并不是一门语言，只是一种不需要加载整个网页，只是更新局部内容的技术。

案例：比较常见的就是网页内容繁多，我们仅仅看评论时，无需整个页面都加载，那么久可以采用这种方式来实现，只需要在翻页时，局部加载评论的内容即可。

1、在使用firebug抓取类似网页的内容时，只需要找到xhr类型的url地址，

2、在浏览器地址栏中打开即可看到对应的内容。

3、一般情况为json格式，

4、再利用python等语言抓取json中的需要的内容即可

1.前端请求数据URL由谁来写?

在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数，这里的查询参数也就是URL请求的参数。

2.接口文档主要由谁来写?
接口文档也是主要由后台开发者来写的,因为直接跟数据打交道的就是后台,后台是最清楚,数据库里面有什么数据,能返回什么数据.前端开发只是数据的被动接受者.所以接口文档也主要是由后台来完成的,前端只是接口文档的使用者,使用过程中,发现返回的数据不对,则需要跟后台进行商量,由后台来修改.切记前端不要随意更改接口文档,除非在取得后台开发人员的同意的情况下.总的来讲,接口文档主要由后台来设计,修改,前端开发者起到了辅助的作用。

3.前端开发与后台交互的数据格式主要是什么?
主要是JSON
XML现在用的不多

4.前端开发的后台交互原理？
在项目的时候，我们前后端会大概说一下接口地址，前端请求的参数，后端返回的参数，然后大家就开始写，写的差不多的时候，大家调一下接口看一下返回的数据，没问题就可以了。

5.前端请求参数的形式
GET和POST两种方式
对安全性不高采用get方便
post要比get安全
GET - 从指定的服务器中获取数据
POST - 提交数据给指定的服务器处理

6.前端应该告知后台哪些有效信息,后台才能返回前端想的数据的呢?
先将要展示的页面内容进行模块划分，将模块的内容提取出来，以及方便前端的一些标志值等，将所有想要的内容和逻辑告知后端，
后端就会去数据库里面去查找相应的数据表中去获得相应的内容，或者图片地址信息。
URL中的参数主要是根据后台需要,
如果后台需要一个参数作为查询的辅助条件前端在URL数据请求时就传递参数。
参数前面？
几个参数中间&

7.我们应该怎么把页面这些信息有效传达给后台,以及后台是如何获取到这些数据?
总的来讲:所有前端请求的URL后面的参数,都是辅助后台数据查询的.如果不需要参数,那么后台就会直接给个URL给前端。

8.前端应该如何回拒一些本不属于自己做的一些功能需求或任务?
在与后台打交道中,我们经常遇到这种情况,有时候明明后台来处理某个事件很简单,后台非要你来做,这时候我们应该懂得去回绝他。
原则:前端就是负责把数据展示在页面上
发挥:这就需要我们对一个需求,一个任务的要有清晰认识了,如果对任务含糊不清,自己都没搞明白,你只能受后台摆布了.最后也会因为任务没有完成而备受责难了。

9.当前端在调用数据接口时,发现有些数据不是我们想要的,那么前端应该怎么办呢或者怎么跟后台讲呢?
首先要把请求的URL和返回的数据以及在页面的展示的情况给跟后台看,这样有理有据,后台开发人员是不会说什么的,否则,后台会很不耐烦的,甚至骂你的可能都有,本身做后台比较难,尤其在查询数据,取数据,封装数据方面都比较难处理。

10.为什么需要在请求的时候传入参数？
因为后台在查询数据库的时候需要条件查询。

DEMO:

var data= JSON.stringify({ "page": { "pagenow": 1, "pagesize": 20}, "file":{ "name": "jpg"}, "catalogs":[{ "id": 1},{ "id": 2}]});
$.ajax({
type: "POST",
url: "//访问的url",
data:data,
contentType: "application/json",
success: function(data){
//显示数据
}
});

注意：

一、contentType

contentType，可以是application/x-www-form-urlencoded这种默认类型的，不过当后台有struts等框架的话，会在action之前拦截请求，并把request body 里面的值都读出来，导致我们不能再request里面读取到值，只能依赖struts的domain model
所有如果有后台用这种机制的话，那就需要更改contentType:application/json，这样子strust就不会拦截请求了

二、stringify和parseJSON

这两种方法不能乱用，一不小心的话就会导致后台解析不了数据，正确的用法在上面。
stringify是将Json转义，parseJSON是将json去除转义并解析成对象
总结

前端传后台json，应该传字符串过去，不能传Object对象，而且要适当指定contentType

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

前端开发需要做的事情，只有两个：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){})

今天想说下JavaWeb前后台数据交互相关的一些问题，在公司好多时候写的都是后台管理系统，后台的页面也是需要自己写的，现在诸如ExtJs、BootStrap等前端框架也是比较方便，但是前后台数据是怎么传递的呢？

servlet.jpg

在B/S模式中，客户端就是就是浏览器，浏览器发送请求，服务器进行接收，再进行处理，返回数据到页面展示，大体流程就是这样子的，但是细分的话，里面太多东西学习了，但是我们今天主要说一下数据的传递。
Web相关技术如下：

web.jpg

HTML、CSS用户页面布局，JS用于交互，当然，JavaScript也可以进行数据交互，在介绍之前，先说一下准备的技术：JSP、Servlet，我们先使用原生的技术来介绍，JSP作为服务器页面，用来承载HTML代码和传递数据所需的功能，Servlet用来接收数据，作出处理，其实Servlet和JSP其实是一个东西，JSP编译后也是Servlet，只是为了让Servlet专心的处理逻辑，JSP专心的做页面承载而已，Servlet中有两个重要的对象，Response和Request，他们都是Servlet.service方法的参数，类型为javax.servlet.http.HttpServletResponse和javax.servlet.http.HttpServletRequest,response是响应对象，向客户端输出响应正文，在客户端发出每个请求时，服务器都会创建一个request对象，并把请求数据封装到request中，然后在调用Servlet.service()方法时传递给service()方法，这说明在service()方法中可以通过request对象来获取请求数据。
现在举个小案例：用户登陆

<form action="<c:url value='/LoginServlet'/>" method="post">
用户名：　<input type="text" name="username" value="${form.username }"/><br/>
密　码：　<input type="password" name="password" value="${form.password }"/><br/>
<input type="submit" value="登录"/>
</form>

action指定了要请求的地址，也就是Servlet的地址，然后后台Servlet是这样写的：

public class LoginServlet extends HttpServlet {

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        
        UserService userService = new UserService();
        
        /*
         * 1. 封装表单数据到User form对象中
         * 2. 调用service的login(form)方法
         *   * 如果正常：得到返回的User对象，保存到session中，重定向到index.jsp
         *   * 如果异常：保存错误信息到request域，保存form（为了回显），转发到login.jsp
         */
        User form = CommonUtils.toBean(request.getParameterMap(), User.class);
        try {
            User user = userService.login(form);//调用service方法得到返回的User对象
            /*
             * 成功了：保存user到session中，重定向到index.jsp
             */
            request.getSession().setAttribute("session_user", user);
            response.sendRedirect(request.getContextPath() + "/index.jsp");
        } catch (UserException e) {
            /*
             * 失败了：保存异常信息到request域，保存form（为了回显）
             * 转发到login.jsp
             */
            request.setAttribute("msg", e.getMessage());
            request.setAttribute("form", form);
            request.getRequestDispatcher("/login.jsp").forward(request, response);
        }
    }
}

因为表单请求的是POST请求，其中的doPost方法其实内部还是service方法的实现，他的两个参数request和response刚才也介绍过了。

User form = CommonUtils.toBean(request.getParameterMap(), User.class);

这里使用了工具类，但是目的就是使用request对象获取返回的User对象，然后通过request保存到session域中，好了，今天的数据交互就先说到这里，也算是对自己知识的梳理。