用 JavaScript 从 URL 获取 HTML
Harshit Jindal
2023年1月30日
2022年5月10日
使用浏览器开发工具可以轻松查看网页的源代码。
但是 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 代码)。
注意
以上解决方案不适用于跨域请求。
Author: Harshit Jindal
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