浏览器内置对象XMLHttpRequest

        XMLHttpRequest 是浏览器提供的一个内置对象，用于在客户端和服务器之间进行异步通信。它是一种由浏览器提供的 JavaScript API（应用程序编程接口），开发者可以通过 JavaScript 代码来使用它。通过 XMLHttpRequest，开发者可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分页面内容。

主要特点

1. 异步通信：

   • XMLHttpRequest 允许在后台与服务器进行数据交换，而不会阻塞用户界面。这意味着用户可以继续与页面交互，而数据请求在后台进行。

2. 多种数据格式支持：

   • 虽然名字中包含“XML”，但实际上 XMLHttpRequest 可以处理多种数据格式，包括 JSON、HTML、纯文本等。

3. 跨域请求：

   • 通过 CORS（跨域资源共享）策略，XMLHttpRequest 可以处理跨域请求，但需要在服务器端进行相应的配置。

4. 事件驱动：

   • XMLHttpRequest 以事件驱动的方式工作，开发者可以通过监听 load、error、progress 等事件来处理请求的不同状态。

基本用法

以下是使用 XMLHttpRequest 发送 GET 请求的基本示例：

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求：方法、URL、是否异步
xhr.open('GET', 'https://api.example.com/data', true);

// 定义请求完成后的处理函数
xhr.onload = function() {
    if (xhr.status === 200) {
        // 请求成功，处理响应数据
        console.log('成功', xhr.responseText);
    } else {
        // 请求失败，处理错误
        console.error('请求失败，状态码: ', xhr.status);
    }
};

// 定义请求失败时的处理函数
xhr.onerror = function() {
    console.error('网络错误或请求被阻止');
};

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

XMLHttpRequest 的生命周期

1. 创建对象：

   var xhr = new XMLHttpRequest();
   

2. 配置请求：

   xhr.open('GET', 'url', true);
   

3. 定义事件处理函数：

   • onload：请求成功完成时触发。
   • onerror：请求失败时触发。
   • onprogress：在请求过程中触发，用于显示进度条等。

4. 发送请求：

   xhr.send();
   

5. 处理响应：

   • responseText：返回的数据为文本格式。
   • responseXML：返回的数据为 XML 格式。
   • status：HTTP 状态码（如 200 表示成功）。
   • statusText：状态码的文本描述（如 “OK”）。

总结

        XMLHttpRequest 是浏览器提供的一个强大工具，使得开发者可以在不刷新页面的情况下，与服务器进行数据交互。它支持多种数据格式，并且以异步方式工作，极大地增强了 Web 应用的交互性和响应性。然而，随着 Fetch API 的出现，一些开发者已经开始转向使用 Fetch API，因为它提供了更现代的接口和更简洁的语法。

原文地址：https://blog.csdn.net/2301_80892630/article/details/143608836

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！