AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。
AJAX 是與服務器交換數據並更新部分網頁的藝術,在不重新加載整個頁面的情況下。
什麼是 AJAX ?
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用於創建快速動態網頁的技術。
通過在後臺與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。
傳統的網頁(不使用 AJAX)如果需要更新內容,必需重載整個網頁面。
一。HTML
在項目中建一個文件夾用來存放數據的html
在index.html中:
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML//EN">
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<script type="text/javascript">
window.οnlοad=function(){
//1.獲取節點
var aNodes=document.getElementsByTagName("a");
for(var i=0;i<aNodes.length;i++){
aNodes[i].οnclick=function(){
//3.創建XMLHttpRequest對象
var request=new XMLHttpRequest();
//4.準備發送請求數據:url
var method="GET";
var url=this.href;
//5.調用XMLHttpRequest的open方法
request.open(method,url);
//6.調用XMLHttpRequest的send方法
request.send(null);
//7.爲XMLHttpRequest添加onreadystatechange響應函數
request.onreadystatechange=function(){
//8.判斷響應函數是否完成,當onreadystatechange對象的readystate爲4的時候
if(request.readyState ==4){
//9.判斷響應是否可用,當onreadystatechange對象的status屬性爲200或304時候
if(request.status==200||request.status==304){
//10.打印響應結果
document.getElementById("divtext").innerHTML=request.responseText;
}
}
};
//2.添加事件,修改默認行爲
return false;
};
}
};
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li><a href="files/andy.html">andy</a></li>
<li><a href="files/jeremy.html">jeremy</a></li>
<li><a href="files/richar.html">richar</a></li>
</ul>
<div id="divtext"> </div>
</body>
</html></span>
在andy.html / jeremy.html / richar.html中
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<body>
<h2><a href="#">andy</a></h2>
<a href="#">http://www.baidu.com</a>
</body>
</html></span>
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<body>
<h2><a href="#">jeremy</a></h2>
<a href="#">http://www.baidu.com</a>
</body>
</html>
</span>
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<body>
<h2><a href="#">richar</a></h2>
<a href="#">http://www.baidu.com</a>
</body>
</html>
</span>
每個頁面對應相應的數據,可以自己定義!