ToB企服应用市场:ToB评测及商务社交产业平台

标题: http request-01-XMLHttpRequest XHR 简单先容 [打印本页]

---

作者: 自由的羽毛    时间: 2024-8-17 14:57
标题: http request-01-XMLHttpRequest XHR 简单先容
http 请求系列

http request-01-XMLHttpRequest XHR 简单先容
http request-01-XMLHttpRequest XHR 标准
Ajax 详解-01-AJAX（Asynchronous JavaScript and XML）入门先容
Ajax XHR 的替代方案-fetch
Ajax XHR 的替代方案-fetch 标准
Ajax 的替代方案-axios.js
http 请求-04-promise 对象 + async/await
XHR 的官方学习资料 给出网址

以下是一些官方学习 XMLHttpRequest (XHR) 的资源网址：

• MDN Web Docs - XMLHttpRequest
  
  
  
  • MDN XMLHttpRequest Documentation
    
  • 这是最权势巨子和详细的 XHR 文档，提供了关于如何利用 XMLHttpRequest 的全面先容，包括属性、方法、事件和示例代码。
    
  
  
• WhatWG - XMLHttpRequest Standard
  
  
  
  • WhatWG XMLHttpRequest Standard
    
  • WhatWG 的标准文档详细描述了 XMLHttpRequest 的规范和实现细节，是相识其正式标准的良好资源。
    
  
  
• W3C - XMLHttpRequest Level 2 Specification
  
  
  
  • W3C XMLHttpRequest Level 2
    
  • W3C 的规范文档提供了 XMLHttpRequest Level 2 的详细描述，包括新增的功能和改进。
    
  
  

这些资源将资助你深入理解 XMLHttpRequest 的功能、用法和规范。
XHR 是什么?

XMLHttpRequest（XHR）是一个用于在客户端和服务器之间举行异步 HTTP 请求的 API，广泛用于动态更新网页内容，而无需重新加载整个页面。
只管它最初是为了处理 XML 数据而设计的，但它如今支持多种数据格式，并已成为 Web 开发中紧张的工具。
1. 根本概念

XMLHttpRequest 提供了在客户端（如浏览器）与服务器之间举行异步通信的能力，使得网页可以在不重新加载页面的情况下更新内容。
它的主要用途包括动态加载数据、提交表单以及与服务器举行及时交互。
2. 核心方法和属性

2.1 创建请求

1. const xhr = new XMLHttpRequest();

复制代码

2.2 配置请求

• open(method, url, async, user, password): 初始化请求。
  
  
  
  • method: HTTP 方法（如 GET、POST）。
    
  • url: 请求的 URL。
    
  • async: 是否异步（true 或 false）。
    
  • user 和 password: 可选的身份验证信息。
    
  
  

1. xhr.open('GET', 'https://example.com/data', true);

复制代码

2.3 发送请求

• send(body): 发送请求。body 参数用于发送数据（对于 GET 请求，通常为空）。
  

1. xhr.send();

复制代码

2.4 事件处理

• onload: 请求成功完成时触发。
  
• onerror: 请求失败时触发。
  
• onprogress: 请求进度更新时触发（适用于进度监控）。
  
• onabort: 请求被取消时触发。
  
• onreadystatechange: 请求状态改变时触发。
  

1. xhr.onload = function() {
2.   if (xhr.status >= 200 && xhr.status < 300) {
3.     console.log(xhr.responseText);
4.   } else {
5.     console.error('Request failed with status:', xhr.status);
6.   }
7. };
9. xhr.onerror = function() {
10.   console.error('Request error');
11. };

复制代码

2.5 紧张属性

• readyState: 请求的当前状态（0: UNSENT, 1: OPENED, 2: HEADERS_RECEIVED, 3: LOADING, 4: DONE）。
  
• status: HTTP 相应状态码（如 200、404、500）。
  
• statusText: 相应状态文本。
  
• responseText: 相应的文本内容。
  
• responseXML: 相应的 XML 文档（如果 Content-Type 是 application/xml 或 text/xml）。
  
• response: 根据相应范例（如 ArrayBuffer、Blob）返回的相应数据。
  

3. 利用示例

3.1 简单 GET 请求

1. const xhr = new XMLHttpRequest();
2. xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
3. xhr.onload = function() {
4.   if (xhr.status === 200) {
5.     console.log('Response:', xhr.responseText);
6.   } else {
7.     console.error('Error:', xhr.status, xhr.statusText);
8.   }
9. };
10. xhr.send();

复制代码

3.2 POST 请求

1. const xhr = new XMLHttpRequest();
2. xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
3. xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
4. xhr.onload = function() {
5.   if (xhr.status === 201) {
6.     console.log('Created:', xhr.responseText);
7.   } else {
8.     console.error('Error:', xhr.status, xhr.statusText);
9.   }
10. };
11. const data = JSON.stringify({ title: 'foo', body: 'bar', userId: 1 });
12. xhr.send(data);

复制代码

3.3 进度监控

1. const xhr = new XMLHttpRequest();
2. xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
3. xhr.onprogress = function(event) {
4.   if (event.lengthComputable) {
5.     const percentComplete = (event.loaded / event.total) * 100;
6.     console.log('Progress:', percentComplete.toFixed(2) + '%');
7.   }
8. };
9. xhr.onload = function() {
10.   if (xhr.status === 200) {
11.     console.log('Response:', xhr.responseText);
12.   } else {
13.     console.error('Error:', xhr.status, xhr.statusText);
14.   }
15. };
16. xhr.send();

复制代码

4. 优缺点

4.1 长处

• 广泛支持: 兼容大多数浏览器，包括较早版本。
  
• 灵活性: 支持多种 HTTP 方法和请求体格式。
  
• 进度监控: 能够监控请求的进度和状态变革。
  

4.2 缺点

• 复杂性: 处理异步操作和错误处理大概比力复杂，特别是嵌套的回调函数（“回调地狱”）。
  
• 现代替代品: 好比 fetch API 提供了更简便的语法和更强大的功能，例如流处理和更好的错误处理。
  

5. 现代替代

XMLHttpRequest 的一些功能和用途已经被更现代的 fetch API 所代替。fetch 提供了更简便的语法、支持 Promise 和流处理，使得异步操作和错误处理更为直观。
XHR 为什么须要？解决了什么问题

XMLHttpRequest (XHR) 是一种用于在浏览器和服务器之间举行异步通信的 API。它在 Web 开发中解决了多个关键问题，特别是在用户体验和动态网页更新方面。
以下是 XMLHttpRequest 须要的缘故原由及其解决的问题：
1. 页面异步更新

问题

• 传统的网页请求: 每次须要从服务器获取新数据或提交数据时，整个页面必须重新加载。这种方式会导致用户体验不流通，页面革新较慢。
  

解决方案

• XHR 的异步请求: 允许网页在不重新加载整个页面的情况下，从服务器获取数据并更新部分页面内容。这使得网页可以实现局部更新，而不是每次都革新整个页面，从而提高了用户体验和相应速率。
  

2. 提高用户体验

问题

• 页面停顿: 在传统的同步请求中，用户必须等待整个请求和相应过程完成，这大概导致页面停顿或冻结。
  

解决方案

• 异步处理: XMLHttpRequest 通过异步处理请求，允许浏览器在发出请求时继承执行其他操作，不会阻塞用户界面的交互。如许，用户可以继承与网页举行交互，而不会受到请求等待的影响。
  

3. 动态内容加载

问题

• 静态网页内容: 在没有异步请求的情况下，网页内容通常是静态的，所有内容都在页面加载时获取。
  

解决方案

• 动态内容加载: 通过 XMLHttpRequest，网页可以在运行时动态加载数据，并根据须要更新内容。好比，用户滚动到页面底部时主动加载更多数据（如无限滚动），或者基于用户输入及时更新搜索结果。
  

4. 背景数据处理

问题

• 用户交互时的数据提交: 用户在填写表单时，数据提交通常会导致页面重新加载，影响用户体验。
  

解决方案

• 表单提交: 利用 XMLHttpRequest 可以在不革新页面的情况下提交表单数据。这使得用户可以在不脱离当前页面的情况下完成数据提交和处理。
  

5. 局部更新和请求管理

问题

• 团体更新难度: 如果须要对部分页面内容举行更新，传统方法通常须要复杂的页面重载和数据处理。
  

解决方案

• 局部更新: XMLHttpRequest 允许通过指定的 URL 和请求方法，只更新页面的某一部分内容。这简化了局部更新的实现，并减少了对服务器的负担。
  

6. 进度监控

问题

• 缺乏反馈: 在传统请求中，用户无法得到请求进度的信息（如正在下载的进度）。
  

解决方案

• 进度事件: XMLHttpRequest 提供了 onprogress 事件，使得开发者可以及时监控请求的进度，并向用户提供反馈，例如表现下载进度条。
  

7. 与其他技术的兼容性

问题

• 旧版浏览器支持: 在 fetch API 出现之前，许多旧版浏览器不支持现代的 HTTP 请求 API。
  

解决方案

• 兼容性: XMLHttpRequest 作为较早的标准，得到了广泛的浏览器支持，包括旧版浏览器。这使得它在须要兼容旧版浏览器的应用中仍旧非常紧张。
  

XHR 的适用场景，优缺点

XMLHttpRequest（XHR）在 Web 开发中有一些特定的适用场景，以及它的长处和缺点。
以下是一些现实应用场景和它们的优缺点，用更接地气的方式来表明：
适用场景

• 动态内容更新
  
  
  
  • 场景: 当你希望在用户与网页交互时，动态更新页面的一部分内容，例如加载批评、文章或产品列表，而不须要重新加载整个页面。
    
  • 例子: 社交媒体平台上的帖子加载，电商网站上的产品筛选。
    
  
  
• 异步表单提交
  
  
  
  • 场景: 当用户填写表单并提交数据时，你希望在背景处理这些数据，而不革新整个页面。
    
  • 例子: 用户在批评框中输入内容并提交，数据直接上传到服务器，页面不会重载。
    
  
  
• 局部数据革新
  
  
  
  • 场景: 须要革新网页的某个部分的数据，而不是整个页面。例如，及时更新价格或天气信息。
    
  • 例子: 监控仪表板上更新服务器状态，新闻网站上及时更新新闻头条。
    
  
  
• 进度反馈
  
  
  
  • 场景: 须要监控和展示文件上传或下载的进度，让用户知道操作的进展。
    
  • 例子: 文件上传表单，下载大文件时表现进度条。
    
  
  
• 旧版浏览器兼容
  
  
  
  • 场景: 如果你的应用须要支持旧版浏览器，它大概不支持现代的 fetch API，但支持 XMLHttpRequest。
    
  • 例子: 针对利用老旧设备或浏览器的用户群体的应用。
    
  
  

长处

• 广泛支持
  
  
  
  • 长处: 几乎所有的浏览器都支持 XMLHttpRequest，包括许多旧版浏览器。
    
  • 现实感受: 你不须要担心用户的浏览器是否支持，因为它几乎能在所有情况中工作。
    
  
  
• 灵活性
  
  
  
  • 长处: 支持多种 HTTP 方法（GET、POST、PUT、DELETE 等），并且能够处理不同格式的相应数据。
    
  • 现实感受: 可以用来做各种各样的请求，好比从服务器获取 JSON 数据或发送表单数据。
    
  
  
• 进度监控
  
  
  
  • 长处: 提供 onprogress 事件，可以监控请求的进度。
    
  • 现实感受: 你可以给用户提供下载或上传的及时进度，提升用户体验。
    
  
  

缺点

• 复杂性
  
  
  
  • 缺点: 处理异步请求和相应大概会很复杂，尤其是在嵌套回调函数（“回调地狱”）的情况下。
    
  • 现实感受: 编写代码时大概会变得混乱，不容易维护。
    
  
  
• 没有内建的 Promise 支持
  
  
  
  • 缺点: 不像 fetch API，XMLHttpRequest 默认不支持 Promise，处理异步操作时须要利用回调函数。
    
  • 现实感受: 须要额外的工作来处理异步操作，代码大概不敷简便。
    
  
  
• 较少的功能扩展
  
  
  
  • 缺点: 与现代 API 好比 fetch 相比，XMLHttpRequest 在流处理和功能扩展方面有所限定。
    
  • 现实感受: 如果须要更高级的功能，好比流式处理大文件，XMLHttpRequest 大概无法满足需求。
    
  
  

XHR 的利用最佳实践

利用 XMLHttpRequest (XHR) 时，遵循一些最佳实践可以资助你写出更高效、可靠和可维护的代码。以下是一些现实的最佳实践：
1. 利用异步请求

• 实践: 总是将 XMLHttpRequest 的 async 参数设置为 true，以便异步处理请求。
  
• 来由: 异步请求不会阻塞用户界面，提高了用户体验。
  

1. const xhr = new XMLHttpRequest();
2. xhr.open('GET', 'https://example.com/data', true);
3. xhr.send();

复制代码

2. 处理请求状态变革

• 实践: 利用 onreadystatechange 事件来处理请求的不同状态。确保查抄 readyState 和 status 属性来确定请求是否成功完成。
  
• 来由: readyState 提供了请求的当前状态，status 表现 HTTP 相应状态码，资助你正确处理相应或错误。
  

1. const xhr = new XMLHttpRequest();
2. xhr.open('GET', 'https://example.com/data', true);
3. xhr.onreadystatechange = function() {
4.   if (xhr.readyState === 4) { // DONE
5.     if (xhr.status === 200) {
6.       console.log('Response:', xhr.responseText);
7.     } else {
8.       console.error('Error:', xhr.status, xhr.statusText);
9.     }
10.   }
11. };
12. xhr.send();

复制代码

3. 设置适当的请求头

• 实践: 根据须要设置请求头（例如 Content-Type）。如果你发送 JSON 数据，确保设置 Content-Type 为 application/json。
  
• 来由: 请求头可以影响服务器如何处理请求体，确保请求和相应数据格式的正确性。
  

1. const xhr = new XMLHttpRequest();
2. xhr.open('POST', 'https://example.com/data', true);
3. xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
4. const data = JSON.stringify({ key: 'value' });
5. xhr.send(data);

复制代码

4. 处理错误和超时

• 实践: 利用 onerror 事件处理网络错误，利用 ontimeout 处理超时情况。设置超时时间以防止请求挂起过久。
  
• 来由: 错误处理可以提供更好的用户反馈和规复机制，而超时处理可以避免长时间等待无相应的请求。
  

1. const xhr = new XMLHttpRequest();
2. xhr.open('GET', 'https://example.com/data', true);
3. xhr.timeout = 5000; // 设置超时时间为 5000 毫秒
5. xhr.ontimeout = function() {
6.   console.error('Request timed out');
7. };
9. xhr.onerror = function() {
10.   console.error('Request error');
11. };
13. xhr.onload = function() {
14.   if (xhr.status === 200) {
15.     console.log('Response:', xhr.responseText);
16.   }
17. };
19. xhr.send();

复制代码

5. 监控进度

• 实践: 利用 onprogress 事件来监控请求的进度，尤其是处理大文件上传或下载时。
  
• 来由: 进度反馈可以改善用户体验，让用户相识操作的进展。
  

1. const xhr = new XMLHttpRequest();
2. xhr.open('GET', 'https://example.com/largefile', true);
3. xhr.onprogress = function(event) {
4.   if (event.lengthComputable) {
5.     const percentComplete = (event.loaded / event.total) * 100;
6.     console.log('Progress:', percentComplete.toFixed(2) + '%');
7.   }
8. };
9. xhr.onload = function() {
10.   if (xhr.status === 200) {
11.     console.log('File downloaded successfully');
12.   }
13. };
14. xhr.send();

复制代码

6. 避免回调地狱

• 实践: 利用清晰的回调结构或考虑利用 Promises（如果须要兼容性，可以用 Promise 封装 XHR）。固然 XHR 自己不支持 Promise，但你可以创建自己的封装。
  
• 来由: 清晰的回调结构或利用 Promise 可以提高代码的可读性和可维护性。
  

1. function fetchData(url) {
2.   return new Promise((resolve, reject) => {
3.     const xhr = new XMLHttpRequest();
4.     xhr.open('GET', url, true);
5.     xhr.onload = function() {
6.       if (xhr.status === 200) {
7.         resolve(xhr.responseText);
8.       } else {
9.         reject(new Error(`Request failed with status ${xhr.status}`));
10.       }
11.     };
12.     xhr.onerror = function() {
13.       reject(new Error('Network error'));
14.     };
15.     xhr.send();
16.   });
17. }
19. // 使用
20. fetchData('https://example.com/data')
21.   .then(response => console.log('Response:', response))
22.   .catch(error => console.error('Error:', error));

复制代码

7. 处理不同数据格式

• 实践: 根据服务器相应的 Content-Type 处理数据。例如，如果相应是 JSON 格式，则调用 responseText 并利用 JSON.parse 剖析。
  
• 来由: 正确处理不同的数据格式确保数据剖析的准确性。
  

1. const xhr = new XMLHttpRequest();
2. xhr.open('GET', 'https://example.com/data', true);
3. xhr.onload = function() {
4.   if (xhr.status === 200) {
5.     const contentType = xhr.getResponseHeader('Content-Type');
6.     if (contentType.includes('application/json')) {
7.       const data = JSON.parse(xhr.responseText);
8.       console.log('JSON data:', data);
9.     } else {
10.       console.log('Response:', xhr.responseText);
11.     }
12.   }
13. };
14. xhr.send();

复制代码

8. 保持代码简便

• 实践: 尽量保持 XHR 请求代码简便，避免过多的嵌套和复杂逻辑。封装常用逻辑为函数可以提高可重用性。
  
• 来由: 简便的代码更易于维护和理解。
  

1. function createRequest(method, url, callback) {
2.   const xhr = new XMLHttpRequest();
3.   xhr.open(method, url, true);
4.   xhr.onload = function() {
5.     if (xhr.status >= 200 && xhr.status < 300) {
6.       callback(null, xhr.responseText);
7.     } else {
8.       callback(new Error(`Request failed with status ${xhr.status}`));
9.     }
10.   };
11.   xhr.onerror = function() {
12.     callback(new Error('Network error'));
13.   };
14.   xhr.send();
15. }
17. // 使用
18. createRequest('GET', 'https://example.com/data', (error, response) => {
19.   if (error) {
20.     console.error('Error:', error);
21.   } else {
22.     console.log('Response:', response);
23.   }
24. });

复制代码

总结

遵循这些最佳实践可以资助你在利用 XMLHttpRequest 时编写更高效、可靠和易于维护的代码。
固然 fetch API 提供了更现代的接口，但相识和把握 XMLHttpRequest 仍旧在许多情况下很紧张，尤其是在处理兼容性问题时。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4