用 JavaScript 从 URL 获取 HTML

Harshit Jindal 2023年1月30日 2022年5月10日
  1. 使用 XMLHttpRequest() 获取带有 URL 的 HTML 代码
  2. 使用 jQuery 获取带有 URL 的 HTML 代码
用 JavaScript 从 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 代码)。

注意
以上解决方案不适用于跨域请求。
Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn