學習筆記--Ajax:html格式返回數據

AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。

AJAX 是與服務器交換數據並更新部分網頁的藝術,在不重新加載整個頁面的情況下。

什麼是 AJAX ?

AJAX = 異步 JavaScript 和 XML。

AJAX 是一種用於創建快速動態網頁的技術。

通過在後臺與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。

傳統的網頁(不使用 AJAX)如果需要更新內容,必需重載整個網頁面。


接下來分別用3鍾格式返回數據的例子來說明:

一。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>

每個頁面對應相應的數據,可以自己定義!
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章