持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

写在前面😘

大一电子信息工程新生，请多多关照，希望能在掘金记录自己的学习历程！

一、Ajax概述

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

1️⃣Ajax作用

与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器
- 使用AJAX和服务器进行通信，以达到使用 ==HTML+AJAX==来替换JSP页面

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

2️⃣AJAX是基于现有的Internet标准

AJAX是基于现有的Internet标准，并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

3️⃣同步和异步

同步发送请求过程如下

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

异步发送请求过程如下

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

4️⃣Ajax工作原理

AJAX

网页中发生一个事件（页面加载、按钮点击）
由 JavaScript 创建 XMLHttpRequest 对象
XMLHttpRequest 对象向 web 服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 JavaScript 执行正确的动作（比如更新页面）

二、Ajax快速入门

1️⃣客户端实现

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

a.创建xhr对象

xhr对象：即XMLHttpRequest 对象，用于在后台与服务器交换数据，XMLHttpRequest 是 AJAX 的基础。

注意：不同的浏览器创建的对象是不同的

var xhttp;
if (window.XMLHttpRequest) {
    // 现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）
    xhttp = new XMLHttpRequest();
    } else {
    // 老版浏览器 code for IE6, IE5
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

b.发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

//建立连接
xhttp.open("GET", "http://localhost:8080/tomcat/AjaxServlet");
//发送请求
xhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。string：仅用于 POST 请求

c.获取响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

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

XMLHttpRequest 对象属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。0：请求未初始化1：服务器连接已建立2：请求已收到3：正在处理请求4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号200: "OK"403: "Forbidden"404: "Not Found"如需完整列表请访问 Http 消息参考手册
statusText	返回状态文本（比如 "OK" 或 "Not Found"）

2️⃣服务端实现

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

@WebServlet(name = "AjaxServlet", value = "/ajax")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //  响应数据
        response.getWriter().write("Hello,Ajax!");
    }

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

三、Ajax案例

需求：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在

1️⃣前端实现

<script>
    /**
     * 用户名输入框光标失去焦点事件
     */
    document.getElementById("username").onblur = function () {
        // 1.创建Ajax核心对象xhr
        var xhttp;
        if (window.XMLHttpRequest) {
            // 现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）
            xhttp = new XMLHttpRequest();
        } else {
            // 老版浏览器 code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        // 2.发送Ajax请求
        // 2.1建立连接
        let username = this.value;
        xhttp.open("GET", "http://localhost:8080/PracticeDemo/register?username=" + username,);
        // 2.2发送请求，携带username参数
        xhttp.send();
        // 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';
                }
            }
        }
    }
</script>

2️⃣后端实现

@WebServlet(name = "RegisterServlet", value = "/register")
public class RegisterServlet extends HttpServlet {
    //获取sqlSession对象
    private SqlSession sqlSession = MyBatisUtils.openSession();
    //获取userMapper接口的代理对象
    private userMapper uMapper = sqlSession.getMapper(userMapper.class);

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1.获取输入的用户名和密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        // 2.注册用户
        // 2.1执行RegisterSelect()方法
        User user = uMapper.RegisterSelect(username);
        // 2.2获取字符输出流，并设置content type
        response.setContentType("text/html;charset=utf-8");
        PrintWriter writer = response.getWriter();
        // 2.2判断是否重名,不重名则注册成功，否则注册失败
        if (user != null) {
            writer.write("true");
            //            writer.write("<h1>该用户名已被注册</h1>");
        } else if (username != null && password != null) {
            writer.write("<h1>注册成功</h1>");
            uMapper.RegisterAdd(username, password);
            //提交事务
            sqlSession.commit();
        }
        //        //2.3释放资源
        //        sqlSession.close();
    }

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

写在后面🍻

感谢观看啦✨
有什么不足，欢迎指出哦💖
掘金的运营同学审核辛苦了💗

Ajax入门教程