简介
XMLHttpRequest 是 JavaScript 操作网页的重要接口之一，是进行前端数据请求最常用的方式。而 xmlhttprequest-ssl 则是在原生 XMLHttpRequest 基础上增加了 SSL/TLS 支持，使得前端可以安全连接 SSL/TLS 加密的网站。
安装
使用 npm 安装：
npm install xmlhttprequest-ssl
使用
创建实例
使用以下代码创建 xmlhttprequest-ssl 实例：
const XMLHttpRequest = require('xmlhttprequest-ssl').XMLHttpRequest; const xhr = new XMLHttpRequest();
发送请求
发送请求需要调用实例中的 open 和 send 方法。open 方法用于指定请求类型（GET/POST 等）及请求的 URL。send 方法用于发送请求。
xhr.open('GET', 'https://example.com', true); xhr.send();
监听状态变化
发送请求后，可以监听状态变化，并根据不同状态对响应进行处理。readyState 变量表示当前状态，其值为 0~4。其中，0 表示 XMLHttpRequest 刚刚创建，1 表示已经调用 open，2 表示已经调用 send，3 表示正在接收响应，4 表示响应已经接收完成。
另外，status 表示响应的 HTTP 状态码，如 200 表示成功，404 表示页面不存在等。
xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } };
设置请求头部
在发送请求时，可以设置请求头部，用于表明请求的类型、数据格式等信息。setRequestHeader 方法用于设置请求头部，需要传入两个参数，第一个参数为头部名称，第二个参数为对应的值。
例如，设置 content-type 头部：
xhr.setRequestHeader('content-type', 'application/json');
发送数据
在发送 POST 请求时，需要发送数据到服务器，可以使用 send 方法的参数来传递数据。向服务器发送 JSON 数据的方式如下：
xhr.send(JSON.stringify({ name: 'John', age: 30 }));
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- ------- ----- -------------- - --------------------------------------------- ----- --- - --- ----------------- --------------- ---------------------- ------ ------------------------------------ -------------------- ---------------------- - ---------- - -- --------------- --- - -- ---------- --- ---- - ------------------------------ - -- -----------展开代码
总结
通过学习 xmlhttprequest-ssl 的使用方法，可以更加安全地进行前端数据请求。同时，通过深入学习 XMLHttpRequest 的原理及其 API，也可以更好地掌握前端数据请求的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74753
