本文介绍如何利用JavaScript和XMLHttpRequest对象获取当前页面的完整HTML文档。通过判断浏览器支持情况处理跨浏览器差异，并演示如何发送GET请求至当前页面，最终将返回的响应文本赋值给页面元素以显示源码。
JS获取页面源码的实现原理
在实现过程中，有一个关键点需要特别注意：
关于innerText与textContent的使用，在渲染页面时不能直接使用innerHTML，否则内容会被解析。这两个属性的区别主要体现在非Firefox浏览器与Firefox浏览器之间的兼容性差异上。
具体实现代码如下：
var innerText = document.body.innerText ? 'innerText' : 'textContent';上述代码在脚本开头执行，目的是避免在后续操作中重复进行浏览器特性判断。
演示效果如下图所示：
完整演示示例：
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div id="test">
<pre>
休息休息
</pre>
</div>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
var connector = (function(){
var connector = null;
if(window.XMLHttpRequest){
connector = new XMLHttpRequest();
}else if(window.ActiveXObject){
connector = new ActiveXObject('Microsoft.XMLHTTP');
}
return connector;
})();
var innerText = document.body.innerText ? 'innerText' : 'textContent';
var handler = function(response){
document.getElementById('test').getElementsByTagName('pre')[0][innerText] = response;
}
connector.onreadystatechange = (function(callback){
return function(){
if(connector.readyState == 4){//这里connector.status == 200都省了。
callback.call(connector,connector.responseText);
}
}
})(handler);
connector.open('GET',location.href,true);//发送到本页面
connector.send();
</script>
</body>
</html>