Ajax详述

冷不防 2021-08-11 11:35 393阅读 0赞

【一】Ajax

> **1.ajax被认为是异步JS和XML的缩写（Asynchronous JavaScript and XML）。现在，允许浏览器与服务器通信无须刷新当前页面的技术叫做Ajax。**
> 
> **2.WEB传统模型与Ajax模型**
> 
>  *  **WEB的传统模型：客户端向服务器发送一个请求，服务器返回整个页面。**
>  *  **Ajax的模型是：数据在客户端与服务器之间独立传输。服务器不再返回整个页面。**
> 
> **3.XMLHttpRequest:是创建Ajax的最佳选择，实际上把Ajax当成XMLHttpRequest对象的代名词。**
> 
> **4.Ajax工具包**
> 
> 1.  服务器端语言：Ajax与服务器端语言无关。
> 2.  **XHTML标准化呈现。**
> 3.  **XML描述数据的格式。**
> 4.  **DOM实现动态显示和交互。**
> 5.  **使用JS绑定和处理数据**
> 6.  **XMLHttpRequest对象进行异步数据的读取**
> 
> 5.Ajax缺陷
> 
> 1.  由于JS和Ajax引擎导致的浏览器的兼容
> 2.  页面局部刷新，导致后退等功能失效。
> 3.  对流媒体的支持没有FLash、Java Applet好
> 4.  一些手持设备（如手机、PDA等）支持性差

Ajax工作原理：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoZV9CZXN0X0hhY2tlcg_size_16_color_FFFFFF_t_70][]

【二】**XMLHttpRequest的方法和属性**

> 1、方法
> 
> abort():停止当前请求。
> 
> getAllResponseHeaders():把Http请求的所有响应首部作为键/值对返回。
> 
> getResponseHeader("header"):返回指定首部的串值。
> 
> open("method","url"):简历对服务器的调用。
> 
>                                  method参数可以是get,post,put
> 
>                                 url参数可以是相对的或绝对的url
> 
> send(content):向服务器发送请求。
> 
> setRequestHeader("header","value"):把指定首部设置为所提供的值。
> 
> 2、属性
> 
> onreadystatechange:每个状态改变都会触发这个事件处理器，通常会调用一个JavaScript函数。
> 
> readyState:请求的状态。
> 
>                   0表示未初始化，还没有调用open方法。  
>                   1表示正在加载，open方法已被调用，但send方法还没有被调用。  
>                   2表示已加载完毕，send已被调用，请求开始。  
>                   3表示交互中，服务器正在发送响应。  
>                   4表示完成，响应发送完毕。
> 
> responseText:服务器的响应，表示为一个串。
> 
> responseXML:服务器的响应，表示为XML，这个对象可以解析为DOM对象。
> 
> status:服务器的Http状态码。
> 
>            404没有找到页面（Not Found）
> 
>            403禁止访问（Forbidden）
> 
>            500内部服务器出错（Internal Service Error）
> 
>            200一切正常（OK）
> 
>            304没有被修改（Not Modified）

利用XMLHttpRequest实例与服务器进行通信包含3个关键部分：  
1.onreadystatechange事件处理函数，由服务器触发。服务器会通知客户当前的通信状态。改变readyStatus属性是服务器与客户端连接操作的一种方式。每次readyState属性的改变都会触发readystatechange事件。

2.open(method,url,asynch)方法允许用一个Ajax调用服务器发送请求  
3.send()方法

> method:请求类型，类似于"GET"或"POST"的字符串。若只想用服务器检索一个文件，为不需要发送任何数据，使用GET;若需要向服务器发送数据，用POST。  
> url：路径字符串，可以是绝对路径或是相对路径。在某些情况，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个url中。如果对每个请求的响应不同，就会带来不好的结果。为了避免浏览器缓存结果，在URL后追加时间戳即可。  
> asynch：表示请求是否要异步，默认值为true。一般不用这个参数。

【三】返回数据

1.在服务端Ajax是一门与语言无关的技术，从服务端接收数据的时候，那些数据必须以浏览器能够理解的格式发送。服务器端的编程语言只能有三种格式返回数据：  
XML----responseXML  
JSON----responseText  
HTML----responseText

2.举例：

<1>XML

//chinese.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <details>
    	<object>Chinese</object>
    	<score>70</score>
    	<level>B</level>
    </details>
    
    //math.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <details>
    	<object>Math</object>
    	<score>95</score>
    	<level>A</level>
    </details>
    
    //english.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <details>
    	<object>English</object>
    	<score>60</score>
    	<level>C</level>
    </details>
    
    //index.html
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</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){
    							var result=request.responseXML;
    							var object=result.getElementsByTagName("object")[0].firstChild.nodeValue;
    							var score=result.getElementsByTagName("score")[0].firstChild.nodeValue;
    							var level=result.getElementsByTagName("level")[0].firstChild.nodeValue;
    							
    							/* alert(object);
    							alert(score);
    							alert(level); 
    							最终格式---
    							<h2>Chinese</h2>
    							<h2>70</h2>
    							<h2>B</h2>
    							*/
    							
    							var h2NodeObject=document.createElement("h2");
    							h2NodeObject.appendChild(document.createTextNode(object));
    							
    							var h2NodeScore=document.createElement("h2");
    							h2NodeScore.appendChild(document.createTextNode(score));
    							
    							var h2NodeLevel=document.createElement("h2");
    							h2NodeLevel.appendChild(document.createTextNode(level));
    							
    							var detailsNode=document.getElementById("details");
    							detailsNode.innerHTML="";
    							detailsNode.appendChild(h2NodeObject);
    							detailsNode.appendChild(h2NodeScore);
    							detailsNode.appendChild(h2NodeLevel);
    						}
    					}
    				}
    				return false;
    			}
    		}
    	}
    </script>
    </head>
    <body>
    	<h1>小明的成绩</h1>
    	<a href="files/chinese.xml">语文</a>
    	<a href="files/math.xml">数学</a>
    	<a href="files/english.xml">英语</a>
    	
    	
    	<div id="details"></div>
    </body>
    </html>

输出：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoZV9CZXN0X0hhY2tlcg_size_16_color_FFFFFF_t_70 1][]

<2>JSON

//student.js
    {
    	"name":"zhangsan",
    	"age":12,
    	"address":{"county":"China","province":"shanxi","city":"xian"}
    }
    
    //teacher.js
    {
    	"name":"zhanglaoshi",
    	"age":36,
    	"address":{"county":"China","province":"shanxi","city":"xianyang"}
    }
    
    
    //index.html
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</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){
    							var str=request.responseText;
    							var object=eval("("+str+")");
    							var name=object.name;
    							var age=object.age;
    							var address=object.address.city; 
    							
    							/* alert(name);
    							alert(age);
    							alert(address); */
    							var h2Node1=document.createElement("h2");
    							h2Node1.appendChild(document.createTextNode(name));
    							var h2Node2=document.createElement("h2");
    							h2Node2.appendChild(document.createTextNode(age));
    							var h2Node3=document.createElement("h2");
    							h2Node3.appendChild(document.createTextNode(address));
    							
    							var details=document.getElementById("details");
    							details.innerHTML="";
    							details.appendChild(h2Node1);
    							details.appendChild(h2Node2);
    							details.appendChild(h2Node3);
    						}
    					}
    				}
    				
    				return false;
    			}
    		}
    	}
    </script>
    </head>
    <body>
    	<h1>校园十佳信息公布榜</h1>
    	<ul>
    		<li>
    			<a href="js/teacher.js">十佳老师</a>
    		</li>
    		<li>
    			<a href="js/student.js">十佳学生</a>
    		</li>
    	</ul>
    	<div id="details">
    	</div>
    </body>
    </html>

输出：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoZV9CZXN0X0hhY2tlcg_size_16_color_FFFFFF_t_70 2][]

<3>HTML

//one.html
    <h1>这是第一个答案：</h1>
    <h2>one</h2>
    
    //two.html
    <h1>这是第二个答案：</h1>
    <h2>two</h2>
    
    //three.html
    <h1>这是第三个答案：</h1>
    <h2>three</h2>
    
    //index.html
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</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 url=this.href;
    				var method="GET";
    				request.open(method,url);
    				request.send(null);
    				
    				request.onreadystatechange=function(){
    					/* alert(request.readyState); */
    					if(request.readyState==4){
    						/* alert(request.status); */
    						if(request.status==200||request.status==304){
    							document.getElementById("details").innerHTML=request.responseText;
    						}
    					}
    				}
    				return false;
    			}
    		}
    		
    	} 
    </script>
    </head>
    <body>
    	<h1>CHOOSE</h1>
    	<ul>
    		<li><a href="files/one.html">点击一处</a></li>
    		<li><a href="files/two.html">点击二处</a></li>
    		<li><a href="files/three.html">点击三处</a></li>
    	</ul>
    	
    	<div id="details"></div>
    </body>
    </html>

输出：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoZV9CZXN0X0hhY2tlcg_size_16_color_FFFFFF_t_70 3][]  
3.小结：

*  若应用程序不需要与其他的应用程序共享数据的时候，使用HTML片段来返回数据；
 *  如果数据需要重用，JSON文件在性能和文件大小方面有优势；
 *  当远程应用程序未知时，XML文档是首选，因为XML是web服务领域的“世界语”。

【四】补充

1.JSON比XML更轻巧，是 JS的原生格式。JSON的规则很简单：对象是一个无序的“‘名称/值’”对集合。一个独享以“｛”开始，“｝”结束。每个名称后跟一个“：”，“‘名称/值’对”之间使用“，”分隔。  
举例：将一个字符串转成Json,使用eval(),  
eg:  
var jsonObject="name:wangerxiao";  
var name=eval("("+jsonObject+")");  
alert(name);//输出“wangerxiao”  
eval()可以把一个字符串转为本地的JS代码来执行

2.JS与Ajax的区别  
1.javascript是一种在客户端执行的脚本语言。ajax是基于javascript的一种技术，它主要用途是提供异步刷新（只刷新页面的一部分，而不是整个页面都刷新）。一个是语言,一个是技术,两者有本质区别.  
2.javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它是利用了一系列相关的技术其中就包括javascript。

3.GET、POST

> <script>  
>     window.οnlοad=function()\{  
>         document.getElementsByTagName("a")\[0\].οnclick=function()\{  
>             //创建XMLHttpRequest对象  
>             var request=new XMLHttpRequest();  
>             //发送请求的数据URL  
>             var url=this.href+"?time="+new Date();               
>            ** var method="POST";  
>             request.open(method,url);  
>             request.setRequestHeader("ContentType","application/x-www-form-urlencoded");  
>             request.send("testPOST");**  
>               
>              //为XMLHttpRequest对象添加onreadystatechange响应函数  
>             request.onreadystatechange=function()\{  
>                  if(request.readyState==4)\{  
>                       
>                         if(request.status==200||request.status==304)\{  
>                             alert(request.responseText);  
>                         \}  
>                  \}  
>             \};    
>           
>             //取消a节点的默认行为  
>             return false;   
>         \}  
>     \}  
> </script>
> 
> <script>  
>     window.οnlοad=function()\{  
>         document.getElementsByTagName("a")\[0\].οnclick=function()\{  
>             //创建XMLHttpRequest对象  
>             var request=new XMLHttpRequest();  
>             //发送请求的数据URL  
>             var url=this.href+"?time="+new Date();  
>             **var method=    "GET";   
>               
>             //调用open方法  
>             request.open(method,url);  
>             //调用send方法  
>             request.send(null);**  
>               
>              //为XMLHttpRequest对象添加onreadystatechange响应函数  
>             request.onreadystatechange=function()\{  
>                  if(request.readyState==4)\{  
>                       
>                         if(request.status==200||request.status==304)\{  
>                             alert(request.responseText);  
>                         \}  
>                  \}  
>             \};    
>           
>             //取消a节点的默认行为  
>             return false;   
>         \}  
>     \}  
> </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoZV9CZXN0X0hhY2tlcg_size_16_color_FFFFFF_t_70]: /images/20210811/1815a83fc09a4f999d9689fb362c9537.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoZV9CZXN0X0hhY2tlcg_size_16_color_FFFFFF_t_70 1]: /images/20210811/3ccf402e54e5468e9e109581756bee38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoZV9CZXN0X0hhY2tlcg_size_16_color_FFFFFF_t_70 2]: /images/20210811/fda510889658456dad2dea516c6e4f76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoZV9CZXN0X0hhY2tlcg_size_16_color_FFFFFF_t_70 3]: /images/20210811/5fc7a27bb9164e64bea257bdc7555640.png