AJAX基础

文章目录

什么是 AJAX

异步的 JavaScript 和 XML
AJAX(Asynchronous JavaScript And Xml)

AJAX 的作用

image.png
没有 AJAX 数据的访问使用 Servlet + JSP

image.png

有了 AJAX 可以和服务器进行通信，使用 HTML + AJAX 替代 JSP 页面

image.png

  • 所用1：替代 JSP 的页面，简化开发流程
  • 作用2：做到前后端的分离，使用 JSP 前后端都需要开发，做不到前后端的分离
    前端：HTML + AJAX
    后端：数据的操作
  • 作用3：不重新加载整个页面的情况下，可以局部更新页面，因为是异步的

同步和异步之间的区别

同步：请求提交的时候，需要等待服务器的响应，响应之后才能执行后续的操作，也就是说客户端这个时候不能进行其他的操作；

异步：请求提交的时候，不需要服务器的响应，可以执行其他的操作，无感知操作，用户体验好一些；

image.png

AJAX 简单入门

首先是原生代码的开发流程，比较繁琐，使用的不多，后面结合框架使用；

image.png

前端代码

<!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 {
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2. 发送请求
            xhttp.open("GET", "http://localhost:80/filter-demo/ajaxServlet");
            xhttp.send();

            //3. 获取响应
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    alert(this.responseText);
                }
            };

        </script>
    </body>
</html>

后端代码

@WebServlet("/ajaxServlet")
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);
    }
}

小案例

image.png

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img src="imgs/a.jpg">
                    <a href="#" id="changeImg">看不清？</a>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>

<script>

    //1. 给用户名输入框绑定 失去焦点事件
    document.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:80/filter-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';
                }
            }
        };

    }
</script>
</body>
</html>

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 接收用户名
        String username = request.getParameter("username");

        // 调用 service 查询 user 对象 ，测试 ajax 这里给一个 flag 表示一下即可
        // 假设查询到的用户名自是存在的
        boolean flag = true;

        // 响应标记
        response.getWriter().write("" + flag);
        System.out.println("doGet...");
    }

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

Axios 异步框架 (了解即可)

image.png

对于原生代码的封装，直接引入发送请求并且获取结果即可

image.png

JSON

查看下面这篇博客即可

https://juejin.cn/post/7074879657648062495/

posted @   YIMENG-0  阅读(18)  评论(0)  编辑  收藏  举报
相关博文：
· jQuery 相关的学习
· JSON 基础知识点梳理
· AJAX详解
· AJAX基础使用
· AJAX学习(1)
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示