前后端数据交互，跳转

概述

作为一枚菜鸟，前后端交互可是大问题，经常数据交互失败，不知道怎么跳转。在这分享一下交互的小心得。

我们不妨先大概了解一下整个访问流程：

用户从输入网址按下回车，交互就已经开始了。

浏览器会将请求按照http协议（或者其他https，ftp等）将请求数据封装包从电脑的端口发出 -> 路由器 -> 运营商（域名解析之类的）-> 目标服务器（可能会有代理，负载均衡等等）

最终从服务器开放的端口，进入到服务器（TCP三次握手和四次挥手，Tomcat之类的，会根据协议的内容进行解析）-> web项目进行具体的逻辑处理 -> 返回数据 -> 浏览器接收数据（根据协议内容进行解析）

整个过程，协议很重要，因为客户端和服务器都是通过协议来解析和发送信息的，最常见的http协议，协议头部的参数常用的哪几个，有什么影响。

Http协议的简介，说的很有意思：https://blog.youkuaiyun.com/u010256388/article/details/68491509/

还有缓存问题（cookie、session、localstorage、cashe-controller等），不仅提高效率，而且有时候你更改了代码测试却没变化的重要原因：https://www.jianshu.com/p/9ed3e8759ce3

相应的后台tomcat的缓存处理：http://www.360doc.com/content/17/0721/17/41344223_673116604.shtml（了解即可）

 

具体到使用分为：前端交互，分为同步和异步。

同步交互

常见的from表单提交（post方式带参数），URL直接访问（get方式，有参数在地址栏可见，特殊符号需要转义，不安全）。

异步交互

关键是XMLHttpRequest对象，平时说的ajax只是一种交互模式，并不是什么新技术，其原理就是对XMLHttpRequest的封装。所以对XMLHttpRequest深入全面的了解可以帮助我们更好的掌握异步交互。

可以看这篇精品文章了解：https://www.jianshu.com/p/b037f71af548，里面涉及到了在传送过程中各个参数的用法，会触发的事件，返回值等等很实用的知识。（虽然能设置同步交互，但不推荐）

其中传输类型 contentType就非常重要，这个值设置决定了后台怎么去解析http协议。

 

• 上图所示，如果格式前后端发送和接收对不上，那是获取不了数据。如图的最后一步返回，如果想页面跳转，则不需要@ResponseBody，改为返回ModelAndView
• @RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的)；GET方式无请求体，所以使用@RequestBody接收数据时，前端不能使用GET方式提交数据，而是用POST方式进行提交。
• @RequestParam接收的是key-value里面的参数，所以GET方式的数据和表单提交，可以接收。
• @RequestBody和@RequestParma的使用知识，更轻松的全面掌握：https://blog.youkuaiyun.com/justry_deng/article/details/80972817

---

前端交互类

前端我创建了两个工具类，来负责交互。

异步交互类

我把jQuery的ajax进行了封装，主要是获取和计算信息，代码如下：

  1 /*
  2  * 以下为程序错误码
  3  */
  4 //通用的请求失败，包括未知原因
  5 var EXPECTATION_FAILED = 417;
  6 var EXPECTATION_QUERY = 404;
  7 
  8 /**
  9  * 访问后台的对象，为ajax封装
 10  * @constructor
 11  */
 12 var Query = function (url, param, callback, contentType) {
 13     this.url = url;
 14 
 15     //先确认参数存在，如果不存在则创建空map
 16     if (!param) {
 17         param = new Map();
 18     }
 19     //注意，要根据不同的传输格式来确定传输的值的类型
 20     if (contentType == Query.NOMAL_TYPE) {
 21         this.param = JSON.parse(this._convertParam(param));
 22     } else {
 23         this.param = this._convertParam(param);
 24     }
 25 
 26 
 27</