JavaScript发送HTTP请求: XMLHttpRequest和Fetch API教程

JavaScript发送HTTP请求: XMLHttpRequest和Fetch API教程

在Web开发中，经常需要使用JavaScript发送HTTP请求与服务器进行交互。JavaScript提供了两种主要的发送HTTP请求的方式：XMLHttpRequest对象和fetch API。

使用XMLHttpRequest对象

XMLHttpRequest对象是传统的发送HTTP请求的方式。它提供了一种灵活但相对底层的API。javascriptfunction sendHttpRequest(url, method, data, callback) { var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { callback(JSON.parse(xhr.responseText)); } }; xhr.send(JSON.stringify(data));}

// 示例用法var url = 'https://api.example.com/endpoint';var method = 'POST';var data = { key1: 'value1', key2: 'value2' };

sendHttpRequest(url, method, data, function(response) { console.log(response);});

代码解释:

1. 创建一个XMLHttpRequest对象。2. 使用open()方法初始化请求，指定HTTP方法、URL和是否异步。3. 设置请求头，例如Content-Type。4. 监听onreadystatechange事件，并在请求完成时处理响应。5. 使用send()方法发送请求。

使用fetch API

fetch API是现代的发送HTTP请求的方式。它提供了更简洁、更语义化的API，并且基于Promise。javascriptfunction sendHttpRequest(url, method, data, callback) { fetch(url, { method: method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(function(response) { if (response.ok) { return response.json(); } throw new Error('Network response was not OK.'); }) .then(function(responseData) { callback(responseData); }) .catch(function(error) { console.error('Error:', error); });}

// 示例用法var url = 'https://api.example.com/endpoint';var method = 'POST';var data = { key1: 'value1', key2: 'value2' };

sendHttpRequest(url, method, data, function(response) { console.log(response);});

代码解释:

1. 使用fetch()方法发送请求，传入URL和请求选项。2. 使用then()方法处理响应。3. 检查响应状态码，如果成功则解析响应体。4. 使用catch()方法处理错误。

选择哪种方法？

fetch API通常是更好的选择，因为它更简洁、更易于使用。但是，如果需要支持旧版浏览器，则可能需要使用XMLHttpRequest对象。

注意: 以上只是一些基本示例，在实际应用中可能需要根据具体情况进行适当的修改和错误处理。