html怎么发送网络请求

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 // 允许携带的请求头信息

html怎么发送网络请求

相关推荐

发表回复