【Ajax技术】学习总结，详细介绍 + 伪Ajax + 异步获取用户列表信息 + 输入框动态信息提示（代码+图例）

最新推荐文章于 2023-02-20 14:50:04 发布

超周到的程序员

最新推荐文章于 2023-02-20 14:50:04 发布

阅读量279

点赞数 1

分类专栏： SSM框架 JavaScript 大前端技术文章标签： ajax web java html

本文链接：https://blog.csdn.net/m0_46360532/article/details/115556402

版权

SSM框架同时被 3 个专栏收录

29 篇文章 2 订阅

订阅专栏

大前端技术

14 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

学习自：https://www.bilibili.com/video/BV1aE41167Tu?p=25、
https://www.runoob.com/php/php-ajax-intro.html

一、简介

AJAX（Asynchronous JavaScript and XML，异步的JS和XML）是一种用于创建快速动态网页的技术。AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。

二、常见应用

（1）百度的输入框

在这里插入图片描述

由上图可知，当我们改动输入框中的内容时，在不刷新整个页面的情况下，将发送请求类型为xhr的请求，xhr即XMLHttpRequest (XHR) 是一种创建 AJAX 请求的 JavaScript API 。它的方法提供了在浏览器和服务器之间发送请求的能力。

（2）百度图片

百度图片也是利用了Ajax技术，开始只展示部分内容，随着用户的下拉，将会按需产生新的内容。
在这里插入图片描述

（3）微博等

微博的浏览也是如此…

三、实例

（1）伪Ajax，同样效果的局部刷新

注意：这不是Ajax，只是为了引出真正的Ajax先做了一个表面上看似同样效果的页面

利用iframe标签实现，将百度搜索页面放入iframe标签中，因为iframe加载的页面地址与属性src对应，因此，用JS + input标签的方式，可通过将地址信息输入到标签中，再将标签输入框中的内容赋给iframe的src属性值即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function LoadPage() {
            let targetUrl = document.getElementById('url').value;
            console.log(targetUrl);
            document.getElementById('iframePosition').src = targetUrl;
        }
    </script>
</head>
<body>
    <div>
        <p>请输入要加载的地址：</p>
        <p>
            <input id="url" type="text" value="https://www.baidu.com/" />
            <inpute id="iframePosition" type="button" value="提交" onclick="LoadPage()" />
        </p>
    </div>

    <div>
        <h3>加载页面的位置：</h3>
        <iframe id="iframePosition" style="width: 100%; height: 500px;"></iframe>
    </div>
</body>
</html>

在这里插入图片描述

（2）jQuery Ajax

1）介绍

Ajax 的核心是 XMLHttpRequest 对象（XHR）。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

jQuery Ajax本质就是 XMLHttpRequest，JQuery对它进行了封装，提供多个与 Ajax 有关的方法，更加便捷。

在这里插入图片描述

2）实例1

首先配置环境中最重要的一点就是，配置静态资源过滤，否则js文件也被当成请求，给DispatchServlet，去寻找Servlet，然而他只是个静态资源文件，因此肯定就报请求错误了
在这里插入图片描述
index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script>
        function a1() {
            $.post({
                url: "${pageContext.request.contextPath}/a1",
                data: {'name': $("#username").val()},
                success: function (data, status) {
                    alert(data + ", " + status);
                }
            });
        }

    </script>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
</head>
<body>
<%--失去焦点时，发起一个请求（携带信息）到后台--%>
用户名：<input type="text" id="username" onblur="a1()">
</body>
</html>

AjaxController

@RestController
public class AjaxController {

    @RequestMapping("/t1")
    public String test() {
        return "hello";
    }

    @RequestMapping("/a1")
    public void ajax1(String name, HttpServletResponse response) throws IOException {
        if ("admin".equals(name)){
            response.getWriter().print("true");
        } else {
            response.getWriter().print("false");
        }
    }

}

测试
在这里插入图片描述

传输类型为xhr

原理图，绿色框中为前端部分，前后端通过JSON传递信息
在这里插入图片描述

3）实例2（加载获取用户列表）

test2.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">
    </tbody>
</table>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        $("#btn").click(function () {
            $.post("${pageContext.request.contextPath}/a2", function (data) {
                console.log(data);
                let myHtml = "";
                for (let i = 0; i < data.length; i++) {
                    myHtml += "<tr>" +
                            "<td>" + data[i].name + "</td>" +
                            "<td>" + data[i].age + "</td>" +
                            "<td>" + data[i].sex + "</td>" +
                            "</tr>";
                }
                $("#content").html(myHtml)
            })
        })
    })
</script>
</body>
</html>

后台响应方法（此方法的类用@RestController标注），即ajax提交post请求，交给此方法，此方法再传递JSON给前端页面，前端页面中的js代码再解析后端传递来的data数据，生成对应 html dom，从而在不加载整个页面的情况下将数据展示在前端页面

@RequestMapping("/a2")
public List<User> a2() {
    List<User> userList = new ArrayList<User>();
    //添加数据
    userList.add(new User("zlc1", 1, "男"));
    userList.add(new User("zlc2", 2, "man"));
    userList.add(new User("zlc3", 3, "male"));

    return userList;
}

在这里插入图片描述

4）实例3（实现输入框中信息提示）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>
        function a1() {
            $.post({
                url: "${pageContext.request.contextPath}/a3",
                data: {'name': $("#name").val()},
                success: function (data) {
                    if (data.toString() == 'OK') {
                        $("#userInfo").css("color", "green");
                    } else {
                        $("#userInfo").css("color", "red");
                    }
                    $("#userInfo").html(data);
                }
            });
        }

        function a2() {
            $.post({
                url: "${pageContext.request.contextPath}/a3",
                data: {'pwd': $("#pwd").val()},
                success: function (data) {
                    if (data.toString() == 'OK') {
                        $("#pwdInfo").css("color", "green");
                    } else {
                        $("#pwdInfo").css("color", "red");
                    }
                    $("#pwdInfo").html(data);
                }
            });
        }
    </script>
</head>
<body>
<p>
    用户名:<input type="text" id="name" onblur="a1()"/>
    <span id="userInfo"></span>
</p>
<p>
    密码:<input type="text" id="pwd" onblur="a2()"/>
    <span id="pwdInfo"></span>
</p>
</body>
</html>

@RequestMapping("/a3")
public String ajax3(String name, String pwd) {
    String msg = "";
    //模拟数据库中存在数据
    if (name != null) {
        if ("admin".equals(name)) {
            msg = "OK";
        } else {
            msg = "用户名输入错误";
        }
    }
    if (pwd != null) {
        if ("123456".equals(pwd)) {
            msg = "OK";
        } else {
            msg = "密码输入有误";
        }
    }
    return msg; //由于@RestController注解，将msg转成json格式返回
}

在这里插入图片描述

超周到的程序员

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
【Ajax技术】学习总结，详细介绍 + 伪Ajax + 异步获取用户列表信息 + 输入框动态信息提示（代码+图例）

文章目录一、简介二、常见应用（1）百度的输入框（2）百度图片（3）微博等三、实例（1）伪Ajax，同样效果的局部刷新（2）jQuery Ajax一、简介AJAX（Asynchronous JavaScript and XML，异步的JS和XML）是一种用于创建快速动态网页的技术。AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。二、常见应用（1）百度的输
复制链接

扫一扫