原生js+ajax实现获取html文件指定内容部分

request.html<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>p{text-align: center;background: saddlebrown;color

iuukai

1149人浏览 · 2020-06-07 14:11:10

iuukai · 2020-06-07 14:11:10 发布

request.html

<!--request.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p{text-align: center;background: saddlebrown;color: white;}
		</style>
	</head>
	<body>
		<div>
			<p>通过ajax获取另一个html</p>
			<a href="https://www.baidu.com">百度</a>
		</div>
	</body>
</html>

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h3>获取另一个html文档</h3>
		<div id="demo"></div>
		<script>
			// jq 使用 load() 方法
			
			var request;
			if (window.XMLHttpRequest) {
				request = new XMLHttpRequest();
			} else {
				request = new ActiveXObject('Microsoft.XMLHTTP');
			}
			request.responseType = 'document';
			request.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
					var ajaxHtml = this.responseXML;
					// var childs = Object.assign([], ajaxHtml.body.childNodes);
					var childs = [].slice.call(ajaxHtml.body.childNodes);
					for	(var i = 0; i < childs.length; i++) {
						document.querySelector('#demo').appendChild(childs[i]);
					}
					// console.log(this.responseXML);
				}
			}
			request.open('GET','test.html',true);
			request.send(null);

			//释放内存，销毁script
			document.body.removeChild(document.body.lastChild);
		</script>
	</body>
</html>