Ajax 作用:一种不用刷新整个页面便可以于服务器通讯的方法。
Ajax工作原理:
Ajax异步数据的读取:XMLHttpRequest对象。
Ajax数据格式:1.XML 2.JSON 3.HTML
3.传递HTML格式数据
3.1如果服务器通过 XMLHttpRequest 发送 HTML,文本将存储在 responseText 属性中。
3.2不必从 responseText 属性中读取数据。它已经是希望的格式,可以直接将它插入到页面中。
3.3插入 HTML 代码最简单的方法是更新这个元素的,innerHTML 属性。
例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<script type="text/javascript">
window.onload = function(){
var aNodes = document.getElementsByTagName("a");
for(var i = 0;i <aNodes.length;i++){
aNodes[i].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("details").innerHTML = request.responseText
}
}
}
return false;
}
}
}
</script>
<style type="text/css">
@import url("clearleft.css");
</style>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="files/andy.html">Andy</a>
</li>
<li>
<a href="files/richard.html">Richard</a>
</li>
<li>
<a href="files/jeremy.html">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>