devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【Ajax技术】学习总结，详细介绍 + 伪Ajax + 异步获取用户列表信息 + 输入框动态信息提示（代码+图例）_设计程序实现查找用户,并异步加载数据

作者：weixin_40725706 | 2024-07-16 23:42:11

赞

踩

设计程序实现查找用户,并异步加载数据

学习自：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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

在这里插入图片描述
在这里插入图片描述

（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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

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");
        }
    }

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

测试
在这里插入图片描述
在这里插入图片描述
传输类型为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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

后台响应方法（此方法的类用@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;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在这里插入图片描述
在这里插入图片描述

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
@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
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这里插入图片描述
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/836779
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号