1. 程式人生 > >Ajax----學習(1)----js中的ajax

Ajax----學習(1)----js中的ajax

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>