JavaScript发送HTTP请求教程：GET和POST详解

想要在您的网页上动态加载数据或与服务器交互吗？掌握使用JavaScript发送HTTP请求是关键！本教程将为您详细介绍如何使用XMLHttpRequest对象和fetch函数发送GET和POST请求，并提供清晰易懂的代码示例，助您快速上手。

1. 使用XMLHttpRequest发送HTTP请求

XMLHttpRequest对象是传统发送HTTP请求的方式，它提供了更大的灵活性和控制权。

发送GET请求

以下代码演示了如何使用XMLHttpRequest发送GET请求：javascriptfunction sendGetRequest(url, callback) { const xhr = new XMLHttpRequest(); xhr.open('GET', url, true);

xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { callback(xhr.responseText); } };

xhr.send();}

// 使用示例const apiUrl = 'https://api.example.com/data';sendGetRequest(apiUrl, function(response) { console.log(response);});

发送POST请求

使用XMLHttpRequest发送POST请求与GET请求类似，但需要设置请求头并传递请求体：javascriptfunction sendPostRequest(url, data, callback) { const xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.setRequestHeader('Content-type', 'application/json');

xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { callback(xhr.responseText); } };

xhr.send(JSON.stringify(data));}

// 使用示例const apiUrl = 'https://api.example.com/data';const requestData = { name: 'John Doe', age: 25 };sendPostRequest(apiUrl, requestData, function(response) { console.log(response);});

2. 使用Fetch API发送HTTP请求

fetch函数是现代浏览器提供的更简洁的发送HTTP请求的方式，它返回一个Promise对象，使异步操作更易于处理。

发送GET请求

以下代码演示了如何使用fetch函数发送GET请求：javascriptfunction sendGetRequest(url) { return fetch(url) .then(response => response.text()) .then(data => console.log(data)) .catch(error => console.log(error));}

// 使用示例const apiUrl = 'https://api.example.com/data';sendGetRequest(apiUrl);

发送POST请求

使用fetch函数发送POST请求需要设置请求方法、请求头和请求体：javascriptfunction sendPostRequest(url, data) { return fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(response => response.text()) .then(data => console.log(data)) .catch(error => console.log(error));}

// 使用示例const apiUrl = 'https://api.example.com/data';const requestData = { name: 'John Doe', age: 25 };sendPostRequest(apiUrl, requestData);

总结

本教程介绍了使用XMLHttpRequest对象和fetch函数发送GET和POST请求的两种常用方法。选择哪种方法取决于您的具体需求和编码偏好。

希望本教程能够帮助您更好地理解如何使用JavaScript发送HTTP请求，并在您的Web开发项目中运用自如！