前后端项目交互&异步请求&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");//是否携带cookie

        filterChain.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中的内容再次取出就可以在前端对象化调用