<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function(){
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method, url);
request.send(null);
request.onreadystatechange = function(){
if(request.readyState == 4) {
if(request.status == 200 || request.status == 304) {
document.getElementById("showDetails").innerHTML = request.responseText;
}
}
}
return false;
}
}
</script>
</head>
<body>
<a href="content/people.html">Bob</a>
<div id="showDetails"></div>
</body>
</html>
<h2>bob</h2>
<p>age: 15</p>
<p>gender: male</p>
HTML由一些普通文本组成，如果服务器通过XMLHTTPRequest发送HTML，文本将储存在responseText属性中。
不必从responseText属性中读取数据，它已经是希望的格式，可以直接将它插入到页面中。
插入HTML代码最简单的方法是更新这个元素的innerHTML属性。
优点：
-从服务器端发送的HTML代码吗在浏览器端不需要用JavaScript进行解析
-HTML的可读性好
-HTML代码块与innerHTML属性搭配，效率高
缺点：
-若需要Ajax更新一篇文档的多个部分，HTML不合适
网友评论