Ajax

Ajax

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行

发送请求的方式/标签

方式一：浏览器输入地址，回车

方式二：在html中，使用script/link/img请求外部资源时，会自动发送请求

方式三：a标签，form表单标签，需要手动控制提交产生请求，往往需要在新的页面上获得响应信息

方式四：运行js代码产生请求

我们通过事件触发JS代码运行发送请求，响应后我们可以通过JS代码动态处理是否要跳转页面，还是将要响应的信息通过DOM编程显示在dom树中

Ajax的实现方式

原生JS的实现方式，代码繁琐，涉及到回调函数问题

使用第三方封装好的工具 jquery

使用框架 VUE axios

使用原生JS的实现方式

借助于XMLHttpRequest类实异步请求（xhr）

其对象有以下方法：

  • readState 返回xhr的状态，其中4为正常响应
  • status 返回xhr的响应状态码，其中200为正常响应
  • responseText 返回后端响应体中的数据，可选择使用Dom编程直接显示或使用Bom编程跳转页面
  • open 设置请求的发送方式和请求资源的路径和参数
  • send 发送请求
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function getMessage() {
            //实例化一个xmlHttpRequest
            var xhr = new XMLHttpRequest();

            //设置XMLHttpRequest对象的回调函数
            //xhr.readState 1 2 3 4
            //xhr.status 响应状态码 响应行状态码
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //xhr.responseText 后端响应回来的响应体中的数据
                    //使用Dom编程在页面中显示信息
                    var inputEle = document.getElementById("message")
                    inputEle.value = xhr.responseText
                    //使用Bom编程的window对象跳转指定位置
                    // window.location.href="http://www.baidu.com"
                }
            }

            //设置请求的发送方式和请求资源的路径及参数
            xhr.open("GET", "/hello?username=zhangshan")

            //发送请求
            xhr.send()
        }
    </script>
</head>
<body>
<button onclick="getMessage()">按钮</button>
<input type="text" name="" id="message">
</body>
</html>
JAVA > java-web
Ajax
http://blog.170827.xyz/2024/04/25/Ajax/
作者
XIAOBAI
发布于
2024年4月25日
许可协议