如何用JavaScript中的XMLHttpRequest对象发送HTTP请求？

使用XMLHttpRequest发送请求的JavaScript代码

创建一个XMLHttpRequest对象

我们需要创建一个XMLHttpRequest对象，这个对象用于与服务器交互，发送HTTP请求并接收响应。

 var xhr = new XMLHttpRequest();

配置请求

我们需要配置请求的类型、URL和是否异步处理。

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

这里我们使用了GET方法来从指定的URL获取数据，并将第三个参数设置为true，表示这是一个异步请求。

设置请求头（可选）

如果需要设置请求头，例如添加认证信息或指定接受的数据格式，可以使用以下代码：

 xhr.setRequestHeader('Content-Type', 'application/json'); xhr.setRequestHeader('Authorization', 'Bearer your_token_here');

发送请求

我们调用send()方法来发送请求。

 xhr.send();

监听事件

为了处理服务器返回的数据，我们需要监听readystatechange事件，当readyState属性发生变化时，该事件会被触发。

 xhr.onreadystatechange = function() {     if (xhr.readyState === 4) { // 4表示请求已完成，且响应已就绪         if (xhr.status === 200) { // 200表示成功的HTTP状态码             console.log(xhr.responseText); // 输出响应文本         } else {             console.error('Error:', xhr.status, xhr.statusText); // 输出错误信息         }     } };

完整示例代码

下面是一个完整的示例，展示了如何使用XMLHttpRequest发送一个GET请求并处理响应。

 var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.setRequestHeader('Authorization', 'Bearer your_token_here'); xhr.onreadystatechange = function() {     if (xhr.readyState === 4) {         if (xhr.status === 200) {             console.log(xhr.responseText);         } else {             console.error('Error:', xhr.status, xhr.statusText);         }     } }; xhr.send();

相关问题与解答

问题1：如何修改上述代码以发送POST请求？

答案：要发送POST请求，你需要更改open()方法的第一个参数为'POST'，并在send()方法中传递要发送的数据，以下是修改后的代码示例：

 var xhr = new XMLHttpRequest(); xhr.open('POST', 'https://api.example.com/data', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.setRequestHeader('Authorization', 'Bearer your_token_here'); xhr.onreadystatechange = function() {     if (xhr.readyState === 4) {         if (xhr.status === 200) {             console.log(xhr.responseText);         } else {             console.error('Error:', xhr.status, xhr.statusText);         }     } }; var data = JSON.stringify({ key: 'value' }); // 将数据转换为JSON字符串 xhr.send(data); // 发送数据

问题2：如何处理跨域请求？

答案：跨域请求通常受到浏览器的同源策略限制，要解决跨域问题，你可以使用CORS（跨源资源共享）机制，在服务器端，你需要设置适当的响应头来允许特定的来源进行访问，你可以在服务器上设置以下响应头：

 Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization

如果你只是在前端进行开发，并且对服务器没有控制权，你可以考虑使用代理服务器或者JSONP等技术来解决跨域问题。

小伙伴们，上文介绍了“JavaScript下通过的XMLHttpRequest发送请求的代码-javascript技”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。