JAVAEE-补充

同步、异步请求

同步

表单向后端发送请求,属于同步请求

同步: 发一个请求, 服务器响应一次, 会用响应的内容覆盖带浏览器中内容. 这样会打断前端其他的正常操作,在现在的前端中,显得不太友好

异步

异步: 不同步 前端正常输入时,可以同时与后端进行交互,后端响应的数据不会影响前端正常操作. 可以使用一个js中提供的对象,向后端发送请求, 服务器响应的内容,会被js对象接收. 然后在js中,用接收到内容的,局部的更新网页,这样整个过程页面不会出现刷新,覆盖操作. 不会打断页面的正常操作.

Ajax 阿贾克斯 异步技术

ajax简介

  Ajax 全称为：“Asynchronous JavaScript and XML”（异步JavaScript 和 XML）

  使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验

  Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest） 异步地向服务器发送请求服务器返回部分数据，浏览器让你去利用这些数据对页面做部分的更新，整个过程，页面无刷新，不打断用户的操作

<script>
	function checkAccount(account) {
		//location.href="http://127.0.0.1:8080/webBack/reg?account="+account;
        //发送的是同步的请求
		//现在的前后端交互,基本都是基于ajax的异步交互技术
		var httpobj  = new XMLHttpRequest();
		httpobj.open("get",
        "http://127.0.0.1:8080/webBack/reg?account="+account,true);
		httpobj.send();
		httpobj.onreadystatechange = function() {
			//接收后端响应的数据
			//alert(httpobj.responseText);
			document.getElementById("aid").innerHTML = httpobj.responseText;               //存在一个跨域问题,浏览器默认不让前端8848接收来自其他服务器的响应数据
		}
	}
</script>

跨域问题

简介

前后端交互中出现一个跨域问题: 属于前端问题

在前端服务页面中(8848) 接收后端服务器响应的数据(8080) 使用ajax技术前端后交互,前端默认会进行阻止,不让前端服务接收其他后端的数据. 为了安全性

协议,域名,端口有一个不相同就是属于跨域问题

跨域问题解决

前端解决, 后端解决,在响应头中设置说明,告知浏览器,此次的响应是可靠的

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


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);
    }
}

axios框架

下载axios

https://unpkg.com/axios/dist/axios.min.js

导入

将下载好的axios.min.js文件放置在js目录中

<script src="js/axios.min.js"></script>

get/post请求

get

<script>
	function checkAccount(account) {
		axios.get("http://127.0.0.1:8080/webBack/reg?account="+account)
        .then(function(resp){
		//console.log(resp);//获取到后端响应的数据
        //console.log(resp.data);
		document.getElementById("aid").innerHTML = resp.data;
	}) 
</script>

post

<script>
	function checkAccount(account) {			
        axios.post("http://127.0.0.1:8080/webBack/reg",
        "account="+account+"&age=20")
        .then(function(resp){
		    document.getElementById("aid").innerHTML = resp.data;
		})
	}
</script>

响应格式

类似map

axios.get('/user')
.then(function(response) {
console.log(response.data);//后端返回数据,默认为json格式
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});

这里就可以响应我们自己想要的数据即可

document.getElementById("aid").innerHTML = resp.data;

JSON数据格式

来源

涉及到了两种不同语言之间进行数据交互 以前java把数据写入到一个xml文件中,把xml文件传给前端 ,前端解析此做法非常复杂. 现在交互中,产生一种轻量级的数据格式{name:"jim",age:20}

前端与后端都能识别

简介

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式

数据在键值对中

数据由逗号分隔

大括号保存对象

方括号保存数组

{“name”:”value”,”sex”:”男”}

后端处理实例

ObjectMapper objectMapper = new ObjectMapper();
String s = objectMapper.writeValueAsString(student);
System.out.println(s);
resp.getWriter().print(s);

前端实例

axios.post("http://127.0.0.1:8080/webBack/reg","num="+num).then(function(resp){
	console.log( resp.data.num);
	console.log( resp.data.name);
	console.log( resp.data.gender);
	console.log( resp.data.phone);
})