前后端项目交互异步请求JSON数据类型后端标准响应数据格式

java同步请求

当网页与后端交互时,前端不能再进行其他操作

服务器响应回来的内容,会把整个浏览器中的内容覆盖

这种请求方式在前后端交互时不太友好

现在的前后端交互请求都使用异步请求

异步请求(不同步)

通过在前端中使用js中提供的XMLHttpRequest对象实现发送异步请求和接收服务器响应

function checkAccount(account){var httpobj = new XMLHttpRequest();httpobj.open("get","http://192.168.124.26:8888/dormServer/reg?account="+account,true);httpobj.send();httpobj.onreadystatechange = function(){document.getElementById("msgid").innerHTML = httpobj.responseText;}}<form action="" method="post">账号:<input type="text" name="account" value="" onblur="checkAccount(this.value)"/><span id ="msgid"> </span><br />密码:<input type="password" name="password" value=""/><br /><input type="submit" value="登录"/></form>

异步请求时,会出现跨域访问问题:浏览器默认不允许js对象接受来自其他服务器响应的内容

跨域

不同服务之间进行访问

跨域是指从一个域名的网页去请求另一个域名的资源,比如从www.baidu.com页面去请求www.google.com的资源,但是一般情况下不能这么做,它是由浏览器的同源资源策略造成的,是浏览器对JavaScript施加的安全限制,跨域的严格一点定义是,只要吃协议,域名,端口有任何一个的不同,就当做是跨域

只要请求协议,域名,端口其中一项不同,就属于跨域访问

所谓同源是指,域名,协议,端口均相同,只要有一个不同,就是跨域

在这里插入图片描述

为什么浏览器限制跨域访问

原因就是解决安全问题,如果一个网页可以随意访问另一个网站资源,就有可能会出现安全问题

为什么要跨域

有时公司内部有多个不同的子域,需要互相访问,所以就会进行跨域

如何解决跨域问题

前端解决

后端解决

后端可以配置一个过滤器,用于处理跨域问题

public class CorsFilter implements Filter {public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)throws IOException, ServletException {HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;//允许携带Cookie时不能设置为* 否则前端报错httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookiefilterChain.doFilter(servletRequest, servletResponse);}
}

JSON

JSON:JavaScript object Notation

全称为JavaScript对象表示法,

json就是一种公认的js识别的对象表示方式.对于java而言就是一种特定的字符串

json就是一种固定格式的字符串,前端可以直接使用

对象:{键:值,键:值}

集合:[{键:值,键:值},{键:值,键:值}]

在使用Json格式之前可以在java中导入相应的jar包

 <!--jackson--><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.14.2</version></dependency>

导入jar包后就可以使用已经写好的方法很方便的把对象转化为json格式的字符串

ObjectMapper objectMapper = new ObjectMapper();String jsonstr = objectMapper.writeValueAsString(students);writer.print(jsonstr);

转化为json格式的字符串后就可以更方便的传给前端js

后端标准响应数据格式

首先创建一个Result类,在其中定义code,message,result三种数据

public class Result {private  int code;private  String message;private  Object result;public Result(int code, String message, Object result) {this.code = code;this.message = message;this.result = result;}public int getCode() {return code;}public void setCode(int code) {this.code = code;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}public Object getResult() {return result;}public void setResult(Object result) {this.result = result;}
}

之后在需要使用的servlet中创建result对象

通过在不同的情境定义不同的内容进行分类

 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {PrintWriter writer = resp.getWriter();Result result = null;try {String name = req.getParameter("name");Student student = new Student();student.setAge(20);student.setGender("男");student.setName(name);student.setNumber(1);result = new Result(200, "查询成功",student);}catch (Exception e){result = new Result(500,"查询失败", null);}writer.print(new ObjectMapper().writeValueAsString(result));}

此后向前端传递的只有三个内容，code,message,result

只需要将result中的内容再次取出就可以在前端对象化调用
在这里插入图片描述