用 JavaScript 从 URL 获取 HTML

1. 使用 XMLHttpRequest() 获取带有 URL 的 HTML 代码
2. 使用 jQuery 获取带有 URL 的 HTML 代码

使用浏览器开发工具可以轻松查看网页的源代码。

但是 JavaScript 为我们提供的有趣功能是，我们可以在我们的页面上获取不同网页的源代码，而无需访问该页面。这篇文章展示了实现这一目标的各种方法。

使用 XMLHttpRequest() 获取带有 URL 的 HTML 代码

XML HTTP Request (XHR) 主要用于在不刷新页面的情况下从 URL 中检索数据。因此它们可用于从不同的页面获取 HTML 代码。

function makeHttpObject() {
  if ('XMLHttpRequest' in window)
    return new XMLHttpRequest();
  else if ('ActiveXObject' in window)
    return new ActiveXObject('Msxml2.XMLHTTP');
}

var request = makeHttpObject();
request.open('GET', '/', true);
request.send(null);
request.onreadystatechange = function() {
  if (request.readyState == 4) console.log(request.responseText);
};

在上面的例子中，我们首先让 HTTP 对象成为一个 HTTP 请求。

然后我们使用 open() 和 send() 方法初始化并发送 get 请求。当响应可用时，我们打印 HTML 代码。

使用 jQuery 获取带有 URL 的 HTML 代码

jQuery.ajax() 用于执行异步 HTTP 请求。它将发送请求的 URL 和设置（一组键值对）作为参数。

$.ajax({
  url: '/',
  success: function(data) {
    console.log(data);
  }
});

在上面的示例中，我们为 HTTP 请求传递了 URL，如果请求成功，我们打印返回的数据（即网页的 HTML 代码）。