HTML 是一种用于创建网页的标记语言，它本身并不具备发送网络请求的功能，通过 JavaScript 这种客户端脚本语言，我们可以在 HTML 页面中实现与服务器之间的通信，本文将介绍如何使用 JavaScript 的 XMLHttpRequest 对象和 Fetch API 来发送网络请求。
1. XMLHttpRequest
XMLHttpRequest（XHR）是一个浏览器内置的对象，用于在后台与服务器进行数据交换，从而实现异步更新页面内容，以下是一个简单的 XHR 示例：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.open("GET", "https://api.example.com/data", true);
xhr.send();
在这个示例中，我们首先创建了一个新的 XMLHttpRequest 对象，我们定义了一个名为 onreadystatechange 的事件处理函数，该函数会在请求的状态发生变化时被调用，当请求完成（readyState 为 4）且成功（status 为 200）时，我们将打印服务器返回的数据。
接下来，我们使用 open 方法初始化一个 GET 请求，指定请求的 URL（在本例中为 "https://api.example.com/data"）以及是否异步执行（true），我们使用 send 方法发送请求。
2. Fetch API
Fetch API 是现代浏览器提供的一种更简洁、更强大的网络请求方法，以下是一个简单的 Fetch API 示例：
fetch("https://api.example.com/data") .then(function(response) { if (!response.ok) { throw new Error("HTTP error " + response.status); } return response.text(); }) .then(function(text) { console.log(text); }) .catch(function(error) { console.log("Error: " + error); });
在这个示例中，我们使用 fetch 函数发起一个 GET 请求，我们使用 then 方法处理响应，如果响应状态正常（response.ok 为 true），我们将响应体解析为文本并打印出来，如果响应状态不正常，我们将抛出一个错误，我们使用 catch 方法捕获并处理可能发生的错误。
3. 跨域请求
当我们尝试从一个域名访问另一个域名的资源时，可能会遇到跨域问题，为了解决这个问题，我们需要在服务器端设置允许跨域请求，以下是一些常见的跨域解决方案：
JSONP：JSONP（JSON with Padding）是一种跨域数据交互的方法，它利用了 <script 标签的跨域特性，需要注意的是，JSONP 只支持 GET 请求。
CORS：CORS（Cross-Origin Resource Sharing）是一种更为现代的跨域解决方案，它允许服务器指定哪些来源的请求可以访问其资源，要实现 CORS，需要在服务器端设置相应的响应头。
Access-Control-Allow-Origin: * // 允许所有来源的请求访问资源 Access-Control-Allow-Methods: GET,POST,PUT,DELETE // 允许访问的方法类型 Access-Control-Allow-Headers: Content-Type,Authorization // 允许携带的请求头信息
相关问题与解答：
1、问题：为什么有时候我们在浏览器的控制台中看到 HTTP 错误代码，如 "404 Not Found"？
答案：HTTP 错误代码是由服务器返回的，用于表示请求的处理结果。"404 Not Found" 表示服务器找不到请求的资源，这些错误代码可以帮助我们诊断和解决网络请求的问题。
2、问题：Fetch API 和 XHR 有什么区别？哪个更好？
答案：Fetch API 和 XHR 都是用于发起网络请求的方法，但它们之间有一些区别，Fetch API 提供了一种更简洁、更现代的方式来处理网络请求，支持 Promise、async/await等现代 JavaScript 特性，而 XHR 则提供了更多的控制和灵活性，但语法相对繁琐，在实际开发中，可以根据项目需求和个人喜好选择合适的方法。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/385753.html
微信扫一扫 