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>

Ajax----学习（1）----js中的ajax

猜你喜欢