AJAX

最新推荐文章于 2025-06-10 14:14:46 发布

我和寂世

最新推荐文章于 2025-06-10 14:14:46 发布

阅读量89

点赞数

分类专栏： JavaWeb 文章标签： ajax 服务器 javascript

原文链接：https://www.bilibili.com/video/BV1Qf4y1T7Hx?p=145

版权

JavaWeb 专栏收录该内容

11 篇文章

订阅专栏

一、概述

概念：AJAX(Asynchronous JavaScript And XML)：异步的JavaScript和XML。
作用：
A. 与服务器进行数据交换（请求和响应的交流），通过AJAX可以给服务器发送请求，并获取服务器响应的数据。（使用AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面）
B. 异步通信：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。如：搜索时打两个字后面就会有搜索建议联想、用户输入完用户名马上在当前页面校验是否可用。

在这里插入图片描述

同步和异步：

同步在调用一个方法后，没有得到返回值前不能往后执行。简单来说，同步就是必须一件一件事做，等前一件做完了才能做下一件事。
异步在调用一个方法后，可以在没有得到返回值时继续往后执行。一般在返回值返回时通过状态、通知和回调来通知调用者上一个方法调用完成了。
对于通知调用者的三种方式，具体如下：
状态
即监听被调用者的状态（轮询），调用者需要每隔一定时间检查一次，效率会很低。
通知
当被调用者执行完成后，发出通知告知调用者，无需消耗太多性能。
回调
与通知类似，当被调用者执行完成后，会调用调用者提供的回调函数。
同步和异步的区别：请求发出后，是否需要等待结果，才能继续执行其他操作。

二、快速入门

编写AjaxServlet，并使用response输出字符串。
创建XMLHttpRequest对象，用于和服务器交换数据。
向服务器发送请求。
获取服务器响应数据。
html中后三步的代码：

<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/MavenWeb02/ajaxServlet");
    xhttp.send();

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

三、案例

在这里插入图片描述
参考视频

四、Axios异步框架

作用：对原生的AJAX进行封装，简化书写。官网

（一）Axios快速入门

HTML的<script>标签中：
在这里插入图片描述

（二）Axios请求方式别名

在这里插入图片描述

五、JSON（HTML和客户端交互数据的格式）

概念：JavaScript Object Notation。JavaScript对象表示法。
JSON语法简单，层次结构鲜明，多用于作为数据载体，在网络中进行数据传输。

（一）基础语法

在这里插入图片描述

（二）JSON和JAVA对象转换

在这里插入图片描述
eg：

        //java对象转json
        User user = new User(2021230, "zhangsan", "000000");
        String jsonString = JSON.toJSONString(user);
        System.out.println(jsonString);

        //json转java对象
        User user1 = JSON.parseObject(jsonString, User.class);
        System.out.println(user1);

（三）案例

查询表格里的所有数据，下面是HTML中的代码

<body>
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">

</table>

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

<script>
    let status = "";
    let tables = "    <tr>\n" +
        "        <th>序号</th>\n" +
        "        <th>品牌名称</th>\n" +
        "        <th>企业名称</th>\n" +
        "        <th>排序</th>\n" +
        "        <th>品牌介绍</th>\n" +
        "        <th>状态</th>\n" +
        "        <th>操作</th>\n" +
        "    </tr>"
    window.onload = function () {
        axios({
            method: "get",
            url: "http://localhost:8080/brand_demo/selectAllServlet",
        }).then(function (response) {
        
            <!-- response.data表示接收服务端发送的数据 -->
            let brands = response.data;
            for (let i = 0; i < brands.length; i++) {
                let brand = brands[i];
                if (brand.status == 0)
                    status = "禁用";
                else
                    status = "启用";
                tables += "    <tr align=\"center\">\n" +
                    "        <td>" + (i + 1) + "</td>\n" +
                    "        <td>" + brand.brandName + "</td>\n" +
                    "        <td>" + brand.companyName + "</td>\n" +
                    "        <td>" + brand.description + "</td>\n" +
                    "        <td>" + brand.ordered + "</td>\n" +
                    "        <td>status</td>\n" +
                    "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                    "    </tr>"
            }

            //设置表格数据
            document.getElementById("brandTable").innerHTML = tables;
        })
    }

</script>
</body>