同步与异步的区别和ajax的使用方法

同步方法：

       同步方法表明调用一旦开始，调用者必须等待方法执行完成，才能继续执行后续方法。

异步方法：

       当一个方法执行时不必去等待该方法全部执行完成后才去执行该方法后续的方法。调用者无需等待其中方法执行完成，就可以继续执行后续方法。

同步请求：

        发起表单的请求，是同步的，必须要等待服务器响应回来结果后，才可以继续对向后执行，响应回来的问题的内容，会将整个网页内容覆盖掉。

异步请求：

       异步的向服务器发送请求，服务器返回内容，可以实现对网页内容做局部更新。

异步请求如何实现？

       发送异步请求，也就是表示浏览器同时可以做多件事情。

       在浏览器中提供XMLHttpRequest对象，可以使用此对象向服务器代理发送请求，这样的请求就是异步的.服务器响应方式与之前没有任何区别，响应的内容不会覆盖整个网页，响应内容会被XMLHttpRequest对象接收，就可以在js中局部的更新网页内容，使用XMLHttpRequest对象向另一个服务发送请求是可以发送过去的， 但是浏览器不允许在当前服务页面接收另一个服务器响应的内容。
       解决办法:前端可以解决后端也可以解决响应时在响应头中告诉浏览器我是安全的.

1.在后端添加跨域器

@WebFilter(urlPatterns = "/*")
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;
        System.out.println("跨域过滤器");
        //允许携带Cookie时不能设置为* 否则前端报错
        httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域
                                                              // 在使用时将origin替换成信任的IP
        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);
    }
}

2.Ajax 简介

● Ajax 全称为：“Asynchronous JavaScript and XML”（异步JavaScript 和 XML, 使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了 用户体验。

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

创建 XMLHttpRequest 对象

● XMLHttpRequest对象：发送请求到服务器并获得返回结果

● 所有现代浏览器 都内建了 XMLHttpRequest 对象，通过一行简单的JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。

● new XMLHttpRequest();

XMLHttpRequest

 

Get 方式

● Get方式提交：

xmlhttp.open("GET","testServlet?name="+userName,true);

xmlhttp.send();

 

 axios框架安装

axios是一个HTTP的网络请求库

1.使用脚手架命令行安装：npm install axios

//在main.js中导入网络请求库

//导入网络请求库
import axios from 'axios';
//定义后端地址
axios.defaults.baseURL = "http://127.0.0.1:8089/webBack/";
//将axios绑定到Vue对象中
Vue.prototype.$http = axios;

2.在Vue组件中的函数体中使用axios框架向后端发送请求

通过后端返回的值进行判断是否进行页面跳转