📅 最后修改于: 2023-12-03 15:08:20.683000 🧑 作者: Mango
在编写网页爬虫或者需要获取网页内容的项目中，我们通常需要获取网页的源代码。而使用 JavaScript 可以轻松地实现这个功能。本文将介绍如何使用 JavaScript 获取网页源代码。
我们可以使用 XMLHttpRequest 对象发送一个请求，然后在 onload 事件中获取到服务器返回的数据。代码如下：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com', true);
xhr.onload = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var sourceCode = xhr.responseText;
console.log(sourceCode);
}
};
xhr.send();
上述代码将会向 http://example.com 发送一个 GET 请求，并在获取到响应后，在控制台中打印网页的源代码。
我们可以以 百度首页 为例进行代码演示。
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.baidu.com', true);
xhr.onload = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var sourceCode = xhr.responseText;
console.log(sourceCode);
}
};
xhr.send();
在控制台中将会打印出百度首页的源代码。我们可以看到前端渲染后的 HTML 代码：
<!DOCTYPE html>
<!--STATUS OK-->
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="always" name="referrer">
<link rel="dns-prefetch" href="//s1.bdstatic.com"/>
...
</html>
如果需要发送 POST 请求，则需要传入 POST 参数，并且在 xhr.open 方法中指定 POST 方法。
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onload = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var sourceCode = xhr.responseText;
console.log(sourceCode);
}
};
xhr.send('foo=bar&baz=qux');
在上述代码中，我们向 http://example.com 发送了一个POST请求，并传入了参数 foo=bar&baz=qux。
通过以上方法，我们可以使用 JavaScript 轻松地获取任何网站的源代码。这对于编写网页爬虫或者开发需要使用网页内容的应用程序来说是非常有用的。