在 JavaScript 中，你可以使用 fetch API 或者 XMLHttpRequest 对象来实现通过 GET 方式访问网址并获取返回的 HTML 内容。fetch API 是更现代、更推荐的方式。

下面我将分别介绍这两种方法：

—

方法一：使用 fetch API (推荐)

fetch API 提供了一种更简洁、更强大、更灵活的方式来发送网络请求。

javascript
async function fetchHtmlContent(url) {
try {
const response = await fetch(url); // 发起 GET 请求

// 检查响应状态码
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

// 获取文本内容 (HTML 是文本)
const htmlContent = await response.text();
console.log("获取到的 HTML 内容:");
console.log(htmlContent);
return htmlContent; // 返回 HTML 内容
} catch (error) {
console.error("获取 HTML 内容时出错:", error);
return null; // 出错时返回 null
}
}

// 示例用法:
const targetUrl = 'https://www.example.com'; // 替换为你想要访问的网址
fetchHtmlContent(targetUrl);


解释:

1. async function fetchHtmlContent(url): 定义一个异步函数，方便使用 await 关键字。
2. const response = await fetch(url);:
* fetch(url) 会向指定的 url 发起一个 HTTP GET 请求（默认就是 GET）。
* await 等待请求完成并返回一个 Response 对象。
3. if (!response.ok): response.ok 是一个布尔值，表示 HTTP 响应状态码是否在 200-299 的范围内 (成功)。如果不是，就抛出一个错误。
4. const htmlContent = await response.text();:
* response.text() 方法会以文本形式读取响应体。对于 HTML，这就是我们想要的。
* await 等待读取完成并返回字符串形式的 HTML 内容。
5. console.log(htmlContent);: 将获取到的 HTML 内容打印到控制台。
6. return htmlContent;: 返回获取到的 HTML 内容，以便在其他地方使用。
7. catch (error): 捕获在请求过程中可能发生的任何错误 (例如网络连接问题、服务器错误等)。

—

方法二：使用 XMLHttpRequest 对象 (较旧但仍可用)

XMLHttpRequest (XHR) 是 JavaScript 中用于进行异步 HTTP 请求的传统方式。

javascript
function fetchHtmlContentXHR(url, callback) {
const xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象

// 配置请求：GET 方法, 请求的 URL, 是否异步 (true 表示异步)
xhr.open('GET', url, true);

// 设置请求头 (可选，对于简单的 GET 通常不需要)
// xhr.setRequestHeader('Content-Type', 'text/html');

// 定义请求完成时的处理函数
xhr.onload = function() {
// 检查响应状态码
if (xhr.status >= 200 && xhr.status < 300) {
// 请求成功
const htmlContent = xhr.responseText; // 获取返回的文本内容
console.log("获取到的 HTML 内容:");
console.log(htmlContent);
if (callback) {
callback(htmlContent); // 调用回调函数，传递 HTML 内容
}
} else {
// 请求失败
console.error(`HTTP error! status: ${xhr.status}`);
if (callback) {
callback(null); // 出错时传递 null
}
}
};

// 定义请求发生错误时的处理函数
xhr.onerror = function() {
console.error("网络请求出错");
if (callback) {
callback(null); // 出错时传递 null
}
};

// 发送请求
xhr.send();
}

// 示例用法:
const targetUrlXHR = 'https://www.example.com'; // 替换为你想要访问的网址
fetchHtmlContentXHR(targetUrlXHR, function(html) {
if (html) {
// 在这里处理获取到的 html 内容
console.log("回调函数收到的 HTML 内容:", html.substring(0, 100) + "..."); // 只打印前100个字符
}
});


解释:

1. const xhr = new XMLHttpRequest();: 创建一个 XMLHttpRequest 对象。
2. xhr.open('GET', url, true);:
* 'GET': 指定请求方法为 GET。
* url: 要访问的网址。
* true: 表示请求是异步的。
3. xhr.onload = function() { ... };: 当请求完成时（无论成功或失败）都会调用此函数。
4. if (xhr.status >= 200 && xhr.status < 300): 检查 HTTP 状态码是否表示成功。
5. const htmlContent = xhr.responseText;: xhr.responseText 属性包含了服务器返回的文本内容（HTML）。
6. xhr.onerror = function() { ... };: 当发生网络错误（如无法连接到服务器）时调用此函数。
7. xhr.send();: 发送 HTTP 请求。对于 GET 请求，send() 方法不需要传递参数。
8. callback: XMLHttpRequest 是基于事件和回调的，所以通常会使用回调函数来处理异步返回的结果。

—

跨域问题 (CORS)

请注意，当你尝试通过 JavaScript 从一个域（例如 http://localhost:8000）请求另一个域（例如 https://www.example.com）的资源时，可能会遇到 跨域资源共享 (CORS) 的限制。

* 浏览器安全策略: 为了防止恶意网站窃取用户数据，浏览器会阻止 JavaScript 代码在不同源（协议、域名、端口）之间发送请求，除非服务器明确允许。
* 服务器端配置: 服务器必须在响应头中包含 Access-Control-Allow-Origin 等 CORS 相关的头部信息，来允许来自特定域或所有域的请求。
* fetch 和 XMLHttpRequest 的行为: 如果服务器没有正确配置 CORS，浏览器会阻止你的 JavaScript 代码访问响应。你会在浏览器的开发者工具控制台中看到 CORS 相关的错误信息。

如果你正在开发前端应用，并且遇到 CORS 问题，有几种处理方式：

1. 在服务器端配置 CORS: 这是最标准的解决方案。让提供 API 的服务器端添加 Access-Control-Allow-Origin 响应头。
2. 使用代理服务器: 在你的开发环境中，可以设置一个本地代理服务器。你的前端代码请求本地代理，代理再请求目标服务器，从而绕过浏览器的同源策略。
3. 在 Node.js 中使用 axios 或 node-fetch: 如果你是在 Node.js 环境中运行 JavaScript (例如后端服务)，则不受浏览器 CORS 策略的限制。可以使用 axios 或 node-fetch 库来发起 HTTP 请求。

—

总结:

* fetch API 是现代 JavaScript 中发起 HTTP 请求的首选方法，它更易于使用且功能更强大。
* XMLHttpRequest 是一个更早期的 API，但仍然有效。
* 在处理跨域请求时，要了解并考虑 CORS 问题。