AJAX

捞月亮的小北

发布于 2023-12-01 09:30:35

960

发布于 2023-12-01 09:30:35

文章被收录于专栏：捞月亮的小北

1. 概述

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

‍

我们先来说概念中的JavaScript 和 XML

JavaScript 表明该技术和前端相关；
XML 是指以此进行数据交换。

1.1 作用

‍

AJAX 作用有以下两方面：

与服务器进行数据交换：通过 AJAX 可以给服务器发送请求，服务器将数据直接响应回给浏览器。如下图

我们先来看之前做功能的流程，如下图：

‍

‍

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

‍

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

‍

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…

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

‍

我们在用户名的输入框输入用户名，当输入框一失去焦点，如果用户名已经被占用就会在下方展示提示的信息；在这整个过程中也没有页面的刷新，只是在局部展示出了提示信息，这就是更新局部页面的效果。

1.2 同步和异步

知道了局部刷新后，接下来我们再聊聊同步和异步:

同步发送请求过程如下

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

异步发送请求过程如下

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

2. 快速入门

2.1 服务端实现

在项目的创建com.north.web.servlet ，并在该包下创建名为 AjaxServlet 的 servlet

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 响应数据
        response.getWriter().write("hello ajax~");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

2.2 客户端实现

在webapp 下创建名为 01-ajax-demo1.html 的页面，在该页面书写 ajax 代码

创建核心对象，不同的浏览器创建的对象是不同的

 var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

发送请求

//建立连接
xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
//发送请求
xhttp.send();

获取响应

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // 通过 this.responseText 可以获取到服务端响应的数据
        alert(this.responseText);
    }
};

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
       
    <meta charset="UTF-8" />
       
    <title>Title</title>
  </head>
  <body>
    <script>
      //1. 创建核心对象
      var xhttp;
      if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
      } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } //2. 发送请求
      xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
      xhttp.send(); //3. 获取响应

      xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          alert(this.responseText);
        }
      };
    </script>
  </body>
</html>