当前位置： 首页 > article >正文

使用XMLHttpRequest进行AJAX请求的详解

article 2025/1/10 1:38:11

前言

Ajax的核心是XMLHttpRequest对象，它允许浏览器在不刷新页面的情况下与服务器通信，从而实现局部更新页面内容的效果。本文将通过几个具体的代码示例，详细介绍如何使用XMLHttpRequest对象进行GET和POST请求，并解释每个步骤的作用和注意事项。

1. 创建XMLHttpRequest对象

代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 兼容性处理
        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        console.log(xhr);
    </script>
</body>
</html>

代码解析

在这段代码中，我们创建了一个XMLHttpRequest对象。为了确保兼容性，我们使用了条件判断：

  • window.XMLHttpRequest：现代浏览器都支持这种方式。
  • new ActiveXObject('Microsoft.XMLHTTP')：用于兼容IE6等旧版本浏览器。

通过这种方式，我们可以确保代码在不同浏览器环境下都能正常工作。

2. 发送GET请求

代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1. 创建XMLHttpRequest对象
        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

        // 2. 与服务器建立连接
        xhr.open('get', 'http://localhost:8888/test/first', true);

        // 3. 发送请求
        xhr.send();

        // 4. 等待响应
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && /^(2|3)\d{2}$/.test(xhr.status)) {
                console.log(xhr.responseText);
            }
        };
    </script>
</body>
</html>

代码解析

这段代码展示了如何发送一个GET请求：

  1. 创建对象：同上一步骤。
  2. 建立连接：使用xhr.open()方法指定请求方式（GET）、URL和是否异步（true表示异步）。
  3. 发送请求：调用xhr.send()方法发送请求。
  4. 等待响应：通过xhr.onreadystatechange事件监听器来处理服务器响应。当readyState为4且状态码为2xx或3xx时，表示请求成功，可以处理响应数据。

3. 发送POST请求

代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="请求数据">
    <script>
        const btn = document.querySelector('input');
        btn.onclick = function () {
            let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
            xhr.open('post', 'http://localhost:8888/test/fourth', true);
            xhr.onload = function () {
                console.log(JSON.parse(xhr.responseText));
            };
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send('name=张三&age=18');
        };
    </script>
</body>
</html>

在这里插入图片描述

代码解析

这段代码展示了如何发送一个POST请求：

  1. 获取页面元素：通过document.querySelector选择按钮元素，并为其添加点击事件。
  2. 创建对象：同上。
  3. 建立连接：使用xhr.open()方法指定请求方式（POST）、URL和是否异步。
  4. 注册事件：设置xhr.onload事件处理函数，用于处理服务器返回的数据。
  5. 设置请求头：使用xhr.setRequestHeader()方法设置请求头，指定内容类型为application/x-www-form-urlencoded，即表单格式。
  6. 发送请求：通过xhr.send()方法发送请求体数据，数据格式为键值对字符串。

4. 处理JSON数据

代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let str = '{"id": 1, "name": "苹果", "price": 30}';
        console.log(str); // 输出原始JSON字符串

        let obj = JSON.parse(str);
        console.log(obj); // 输出解析后的对象

        obj.price = 50; // 修改价格

        str = JSON.stringify(obj);
        console.log(str); // 输出修改后的JSON字符串
    </script>
</body>
</html>

在这里插入图片描述

代码解析

这段代码展示了如何处理JSON数据：

  1. 定义JSON字符串：定义一个包含商品信息的JSON字符串。
  2. 解析JSON字符串：使用JSON.parse()方法将JSON字符串转换为JavaScript对象。
  3. 修改对象属性：直接操作对象属性，如修改商品价格。
  4. 序列化对象：使用JSON.stringify()方法将JavaScript对象转换回JSON字符串。

5. 同步与异步请求

代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 异步请求
        let xhrAsync = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        xhrAsync.open('get', 'http://localhost:8888/test/second', true);
        xhrAsync.onload = function () {
            console.log(JSON.parse(xhrAsync.responseText));
        };
        xhrAsync.send();

        // 同步请求
        let xhrSync = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
        xhrSync.open('get', 'http://localhost:8888/test/second', false);
        xhrSync.send();
        console.log(JSON.parse(xhrSync.responseText));
    </script>
</body>
</html>

代码解析

这段代码展示了同步和异步请求的区别：

  1. 异步请求：通过设置open()方法的第三个参数为true，请求会在后台执行，不会阻塞主线程。响应处理通过onload事件完成。
  2. 同步请求：通过设置open()方法的第三个参数为false，请求会阻塞主线程，直到服务器响应返回。响应处理可以直接在send()之后进行。

需要注意的是，同步请求会导致页面卡顿，通常不推荐使用，除非有特殊需求。

6. 表单提交与AJAX结合

代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
        <label for="">
            请输入姓名：
            <input type="text" name="userName" id="">
        </label>
        <label for="">
            请输入密码：
            <input type="password" name="password" id="">
        </label>
        <p><input type="submit" value="注册"></p>
    </form>
    <script>
        const form = document.querySelector('form');
        form.addEventListener('submit', function (event) {
            event.preventDefault(); // 阻止默认提交行为

            let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
            xhr.open('post', 'http://localhost:8888/test/register', true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.onload = function () {
                console.log(JSON.parse(xhr.responseText));
            };
            xhr.send(`userName=${form.userName.value}&password=${form.password.value}`);
        });
    </script>
</body>
</html>

在这里插入图片描述

代码解析

这段代码展示了如何将表单提交与AJAX结合：

  1. 阻止默认提交行为：通过event.preventDefault()防止表单自动提交。
  2. 创建并配置XMLHttpRequest对象：同上。
  3. 发送POST请求：从表单中获取用户输入的数据，并将其作为请求体发送。
  4. 处理响应：通过xhr.onload事件处理服务器返回的数据。

结尾

通过上述代码示例，我们详细介绍了如何使用XMLHttpRequest对象进行GET和POST请求、处理JSON数据、以及同步与异步请求的区别。这些技术点在实际开发中非常常用，掌握它们可以帮助开发者构建更加高效和响应迅速的Web应用。


http://www.kler.cn/a/474238.html

相关文章：

  • 【mysql】流程控制
  • API架构风格的深度解析与选择策略：SOAP、REST、GraphQL与RPC
  • Spring Boot教程之四十九：Spring Boot – MongoRepository 示例
  • VSCode Live Server 插件安装和使用
  • SpringBoot日常：集成Kafka
  • 结构化日志和集中日志服务
  • 使用 uniapp 开发微信小程序遇到的坑
  • 毕业项目推荐：基于yolov8/yolov5/yolo11的动物检测识别系统（python+卷积神经网络）
  • Mac M2基于MySQL 8.4.3搭建（伪）主从集群
  • 【Go】：全面掌握 Sentinel — 构建高可用微服务的流量控制、熔断、降级与系统防护体系
  • [Unity] 【图形渲染】Unity Shader光照基础2-标准光照模型
  • Android - NDK ：JNI实现异步回调
  • 我用Ai学Android Jetpack Compose之TextField
  • Spring MVC详细介绍
  • 如何查看本地sql server数据库的ip地址
  • oracle创建dblink
  • element（vue2）表格插槽
  • 第十一届蓝桥杯Scratch05月stema选拔赛真题—报数游戏
  • 滑动窗口——串联所有单词的子串
  • Linux好用软件
  • C++ 入门第26天：文件与流操作基础
  • 记录一次MySQL:caching_sha2_password报错
  • Linux中增加swap分区
  • 比QT更高效的一款开源嵌入式图形工具EGT-Ensemble Graphics Toolkit
  • 【gRPC】对称与非对称加解密和单向TLS与双向TLS讲解与go案例
  • vue 点击按钮复制文本功能（同时解决http不安全问题）