XMLHttpRequest是一种在Web应用程序中发送HTTP请求和接收响应的API。它为前端开发人员提供了一种与服务器进行交互的方式，但很多人只知道如何使用它来获取数据，并不知道如何更好地利用它。
基础用法
XMLHttpRequest最基本的用法就是向服务器发送请求并处理响应。以下是一个简单的例子：
const xhr = new XMLHttpRequest();
xhr.open('GET', '/data');
xhr.onload = function() {
console.log(xhr.response);
};
xhr.send();这个例子发送了一个 GET 请求，获取了服务器上的 /data 资源，并将响应输出到控制台。
异步编程
XMLHttpRequest默认是异步的，也就是说，当它发送请求的时候，JavaScript会继续执行后面的代码，而不会等待请求完成。因此，在使用XMLHttpRequest时，需要考虑到异步编程的问题。
以下是一个使用Promise封装XMLHttpRequest的例子：
-- -------------------- ---- -------
-------- --------------- ---- ----- -
------ --- ------------------------- ------- -
----- --- - --- -----------------
---------------- -----
---------- - ---------- -
-- ----------- -- --- -- ---------- - ---- -
----------------------
- ---- -
---------- -----------------------
-
--
----------- - ---------- -
---------- -------------- ---------
--
---------------
---
-
-------------- --------
------------------------ -
----------------------
--
---------------------- -
---------------------
---这个例子使用了 Promise 封装 XMLHttpRequest，并通过 then 和 catch 处理异步操作的结果和错误。
跨域请求
由于浏览器的同源策略，XMLHttpRequest默认不能跨域发送请求。但是，可以通过设置服务器端的 Access-Control-Allow-Origin 头来允许跨域请求。
以下是一个示例：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
console.log(xhr.response);
};
xhr.send();在这个例子中，我们向 https://api.example.com 发送了一个 GET 请求，并成功地接收到了响应。但是，如果服务器没有设置 Access-Control-Allow-Origin 头，则会出现跨域错误。
FormData对象
当需要向服务器提交表单数据时，可以使用FormData对象。它可以轻松地将表单数据转换为键值对，并且支持文件上传。
以下是一个示例：
-- -------------------- ---- -------
----- ------------
------ ----------- ----------------
------ --------------- ----------------
------ ----------- ------------
------- -----------------------------
-------
--------
----- ---- - ----------------------------------
------------------------------- --------------- -
-----------------------
----- ---- - --- ---------------
----- --- - --- -----------------
---------------- -----------
---------- - ---------- -
--------------------------
--
---------------
---
---------在这个例子中，我们使用 FormData 对象将表单数据转换为键值对，并将其作为 POST 请求发送到服务器。
总结
XMLHttpRequest是一个非常有用的API，可以帮助前端开发人员与服务器进行交互。在学习和使用它的过程中，需要注意以下几个方面：
- 异步编程
- 跨域请求
- FormData对象
通过深入了解XMLHttpRequest的用法和原理，我们可以更好地利用它，提高Web应用程序的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10364
