JavaWeb中异步交互的关键——Ajax

@[toc]

AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

先说概念 JavaScript 和 XML，JavaScript 表明该技术与前端相关；XML 是指数据交换。

AJAX 作用有以下两个方面：

1. 与服务器进行数据交换：AJAX可以向服务器发送请求，服务器可以直接向浏览器响应数据。如下图所示

让我们来看看以前的功能流程，如下图所示：

如上图，Servlet 调用业务逻辑层后，将数据存储到域对象中，然后跳转到指定的 jsp 页面，在页面上使用 EL表达式 和 JSTL 数据显示标签库。

我们学习了AJAX 后，就可以使用AJAX和服务器进行通信 HTML+AJAX替换JSP页面在下图中，浏览器发送请求servlet，servlet 调用业务逻辑层后，将数据直接响应回浏览器页面，页面使用 HTML 数据显示。

2. 异步交互：是的不要重新加载整个页面与服务器交换数据并与服务器交换数据更新一些网页如：搜索联想、用户名是否可用验证等。

我们经常看到上图所示的效果，在我们输入一些关键字(例如 奥运）之后，相关内容将在下面联想出来，联想出来的这部分数据必须存储在百度的服务器上，但我们没有看到页面重新刷新。这就是 更新局部页面 的效果。

了解局部刷新后，我们来谈谈同步和异步：

• 同步发送请求的过程如下：

浏览器页面在向服务器发送请求时，浏览器页面不能在服务器处理请求时进行其他操作。浏览器页面只能在服务器响应结束后继续进行其他操作。

• 异步发送请求的过程如下如下：

浏览器页面向服务器发送请求，浏览器页面也可以在服务器处理请求时进行其他操作。

需求：在完成用户注册时，当用户名输入框失去焦点时，检查用户名是否存在于数据库中

• 完成前端的逻辑

1. 用户名输入框绑定光标失去焦点事件 onblur
2. 发送 ajax请求携带username参数
3. 处理响应：是否显示提示信息

• 后端完成的逻辑

1. 接收用户名
2. 调用service查询user。这个案例是为了演示前后端的异步交互，所以这里我们不做业务逻辑处理
3. 返回标记

整体流程如下：

定义名为 SelectUserServlet servlet。代码如下:

@WebServlet("/selectUserServlet")public class SelectUserServlet extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //1. 接收用户名        String username = request.getParameter("username");        //2. 调用service查询user对象，此处不进行业务逻辑处理，直接给 flag 赋值为 true，表示用户名占用        boolean flag = true;        //3. 响应标记        response.getWriter().write("" + flag);    }    @Override    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        this.doGet(request, response);    }}

将 04-资料\1. 验证用户名案例\1. 静态页面 将下面的文件整体复制到项目下 webapp 下。并在 register.html 页面的 body 在标签结束前编写 script 在标签中实现以下逻辑

第一步:将光标绑定到用户名输入框中，失去焦点事件 onblur

第二步：发送 ajax请求携带username参数

在 第一步 书写并发送绑定匿名函数 ajax 请求的代码

因为我们发送的是 GET 要求，所以需要在 URL 从输入框中获得的用户名数据后拼接。我们在 第一步 用户名数据可以通过以下代码在绑定的匿名函数中获取

// 获取用户名的值varr username = this.value;  //this ： 谁绑定事件，this代表谁

需要携带数据 URL 修改为：

xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);

第三步：处理响应：是否显示提示信息

当 this.readyState == 4 && this.status == 200 当条件满足时，表明数据已成功响应。

此时，有必要判断响应数据是否存在响应 "true" 字符串表示用户名已被占用并给出错误提示；如果不是用户名未被占用，则清除错误提示

综上所述，前端完成代码如下：

//1. 绑定用户名输入框 失去焦点事件documentent.getElementById("username").onblur = function () {    //2. 发送ajax请求    // 获取用户名的值    var username = this.value;    //2.1. 创建核心对象    var xhttp;    if (window.XMLHttpRequest) {        xhttp = new XMLHttpRequest();    } else {        // code for IE6, IE5        xhttp = new ActiveXObject("Microsoft.XMLHTTP");    }    //2.2. 发送请求    xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);    xhttp.send();    //2.3. 获取响应    xhttp.onreadystatechange = function() {        if (this.readyState == 4 && this.status == 200) {            //alert(this.responseText);            //判断            if(this.responseText == "true"){                //用户名存在，显示提示信息                document.getElementById("username_err").style.display = '';            }else {                ///用户名不存在 ，提示信息清晰                document.getElementById("username_err").style.display = 'none';            }        }    };}

Axios 封装原生AJAX，简化书写。

Axios官网是：https://www.axios-http.cn

axios 使用相对简单，分为以下两个步骤：

• 引入 axios 的 js 文件

<script src="js/axios-0.18.0.js"></script>

• 使用axios 发送请求并获得响应结果

• 发送 get 请求

axios({    method:"get",    url:"http://localhost:8080/ajax-demo1/aJAXDemo1username=zhangsan"}).then(function (resp){    alert(resp.data);})

• 发送 post 请求

axios({    method:"post",    url:"http://localhost:8080/ajax-demo1/aJAXDemo1”，    data:"username=zhangsan"}).then(function (resp){    alert(resp.data);});

axios() 它用于发送异步请求，用于小括号 js 与对象传递请求相关的参数：

• method 属性：用于设置请求模式。取值为 get 或者 post。
• url 属性:用于书写要求的资源路径。如果是， get 请求，请求参数需要拼接到路径后面，格式如下： url?参数名=参数值&参数名2=参数值2。
• data 属性：作为请求体发送的数据。也就是说，如果是 post 如果要求，则需要将数据视为 data 属性的值。

then() 匿名函数需要传递。 then() 匿名函数被称为匿名函数 回调函数，这意味着匿名函数在发送请求时不会被调用，而是在成功响应后被调用。回调函数中 resp 参数是对响应数据的输入行封装对象，通过 resp.data 响应数据可以获取。

用于接收请求的servlet定义代码如下：

@WebServlet("/axiosServlet")public class AxiosServlet extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        System.out.println("get...");        //1. 接收请求参数        String username = request.getParameter("username");        System.out.println(username);        //2. 响应数据        response.getWriter().write("hello Axios~");    }    @Override    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        System.out.println("post...");        this.doGet(request, response);    }}

• 引入 js 文件

<script src="js/axios-0.18.0.js"></script>

• 发送 ajax 请求

• get 请求

axios({    method:"get",    url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"}).then(function (resp) {    alert(resp.data);})

• post 请求

axios({    method:"post",    url:"http://localhost:8080/ajax-demo/axiosServlet",    data:"username=zhangsan"}).then(function (resp) {    alert(resp.data);})

整体页面代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script src="js/axios-0.18.0.js"></script><script>    //1. get   /* axios({        method:"get",        url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"    }).then(function (resp) {        alert(resp.data);    })*/    //2. post  在js中{} 表示js对象，这个js对象有三个属性    axios({        method:"post",        url:"http://localhost:8080/ajax-demo/axiosServlet",        data:"username=zhangsan"    }).then(function (resp) {        alert(resp.data);    })</script></body></html>

为方便起见， Axios 所有支持的请求方法都提供了别名。如下：

• get 请求 ： axios.get(url[,config])
• delete 请求 ： axios.delete(url[,config])
• head 请求 ： axios.head(url[,config])
• options 请求 ： axios.option(url[,config])
• post 请求：axios.post(url[,data[,config])
• put 请求：axios.put(url[,data[,config])
• patch 请求：axios.patch(url[,data[,config])

而且我们只关注 get 请求和 post 请求。

入门案例 get 请求代码可以改为以下几点：

axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {    alert(resp.data);});

案例中的 post 请求代码可以改为以下几点：

axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {    alert(resp.data);})