Ajax概述

1.什么是Ajax开发模式?

对于每个用户的行为，在传统的Web应用模式中，将生成一次HTTP请求，而在Ajax应用开发模式中，将变成对Ajax引擎的一次JavaScript调用。在Ajax应用开发模式中通过JavaScript实现在不刷新整个页面的情况下，对部分数据进行更新，从而降低了网络流量，给用户带来更好的体验。

2.Ajax使用的技术有哪些？

1）XMLHttpRequest对象（最为核心的技术），下面介绍其常用方法：

open("method","URL")；//其中method用于请求的类型，一般为GET或POST。URL为请求地址

send(content); //conteent为指定发送的数据，可以是DOM对象的实例，输入流或者字符串。没有参数可以为null

setRequestHeader("header","value"); //用于为请求的HTTP头设置值。必须在调用open()方法后才能使用

abort(); //abort()方法用于停止或放弃当前异步请求

getResponseHeader(); //用于以字符串形式返回指定的HTTP头信息。

getAllResponseHeaders(); //用于以字符串形式返回完整的HTTP头信息

下面介绍XMLHttpRequest对象常用属性：

onreadystatechange // 用于指定状态改变时所触发的事件处理器

readyState // 用于获取请求的状态

responseText // 用于获取服务器的响应，表示为字符串

responseXML // 属性用于获取服务器的响应，表示为XML

status // status属性用于返回服务器的HTTP的状态码

statusText //用于返回HTTP状态码对应的文本，如OK或Not Found

2)XML技术

3)JavaScript技术

4)CSS技术

5)DOM技术

3.如何初始化XMLHttpRequest对象？

1. if (window.XMLHttpRequest) //非IE浏览器  
2. {                          
3.       http_request = new XMLHttpRequest();  
4. }  
5. else if (window.ActiveXObject) //IE浏览器  
6. {                     
7.     try   
8.     {  
9.         http_request = new ActiveXObject("Msxml2.XMLHTTP");  
10.     }   
11.     catch (e)   
12.     {  
13.         try   
14.         {  
15.             http_request = new ActiveXObject("Microsoft.XMLHTTP");  
16.         }  
17.         catch (e)   
18.         {  
19.         }  
20.     }  
21. }   

4.Ajax的重构（封装处理）：

首先为什么要重构呢？因为XMLHttpRequest对象的实例在处理事件完后就会被销毁，如果不进行封装处理每次都要写一大段相同的代码，进行封装处理后下次直接调用重构函数就好，减少了大量冗余的代码。增加了可维护性。

Ajax重构大致可以分为以下3三个步骤。

一 创建一个单独的JS文件,名称为AjaxRequest.js,并且在该文件中编写重构Ajax 所需的代码

具体代码如下：

[js] view plain copy

1. var net = new Object();  // 定义一个全局的变量  
2. // 编写构造函数  
3. net.AjaxRequest = function(url,onload,onerror,method,params)  
4. {  
5.     this.req = null;  
6.     this.onload = onload;  
7.     this.onerror =(onerror)？onerror：this.defaultError;  
8.     this.loadDate(url,method,params);  
9. }  
10. // 编写用于初始化XMLHttpRequest 对象并指定处理函数,最后发送HTTP 请求的方法  
11. net.AjaxRequest.prototype.loadDate = function(url,method,params)  
12. {  
13.     if(！method)   // 设置默认的请求方式为GET  
14.     {  
15.         method =“GET”;                                                               
16.     }  
17.     if(window.XMLHttpRequest)  
18.     {                                                   // 非IE 浏览器  
19.         this.req = new XMLHttpRequest();   // 创建XMLHttpRequest 对象                                           
20.     }   
21.     else if(window.ActiveXObject)  
22.     {                                       // IE 浏览器  
23.         try  
24.         {  
25.             this.req = new ActiveXObject(“Microsoft.XMLHTTP”);    // 创建XMLHttpRequest 对象  
26.         }   
27.         catch(e)  
28.         {  
29.              try  
30.              {  
31.                 this.req = new ActiveXObject(“Msxml2.XMLHTTP”); // 创建XMLHttpRequest 对象  
32.              }   
33.              catch(e)  
34.              {  
35.              }  
36.          }  
37.     }  
38.     if(this.req)  
39.     {  
40.         try  
41.         {  
42.             var loader = this;  
43.             this.req.onreadystatechange = function()  
44.             {  
45.                 net.AjaxRequest.onReadyState.call(loader);  
46.             }  
47.             this.req.open(method,url,true);          // 建立对服务器的调用  
48.             if(method ==“POST”)  
49.             {                // 如果提交方式为POST  
50.                 this.req.setRequestHeader(“Content-Type”,“application / x-www-form-urlencoded”);    // 设置请求的内容类型  
51.                 this.req.setRequestHeader(“x-requested-with”,“ajax”);    // 设置请求的发出者  
52.             }  
53.             this.req.send(params);                                                  // 发送请求  
54.         }   
55.         catch(err)  
56.         {  
57.             this.onerror.call(this);                                            // 调用错误处理函数  
58.         }  
59.     }  
60. }  
61.    
62. // 重构回调函数  
63. net.AjaxRequest.onReadyState = function()  
64. {  
65.     var req = this.req;  
66.     var ready = req.readyState;                                             // 获取请求状态  
67.     if(ready == 4)  
68.     {                                                             // 请求完成  
69.         if(req.status == 200)  
70.         {                                                // 请求成功  
71.             this.onload.call(this);  
72.         }  
73.         else  
74.         {  
75.             this.onerror.call(this);                                    // 调用错误处理函数  
76.         }  
77.     }  
78. }  
79. // 重构默认的错误处理函数  
80. net.AjaxRequest.prototype.defaultError = function()  
81. {  
82.     alert(“ 错误数据\ n \ n 回调状态：”+ this.req.readyState +“\ n 状态：”+ this.req.status);  
83. }  

 

 

二 在需要应用Ajax 的页面中应用以下的语句包括步骤一中创建的JS 文件

<script language =“javascript”src =“AjaxRequest.js”> </ script>

 

三 在应用Ajax 的页面中编写错误处理的方法,实例化Ajax 对象的方法和回调函数

具体代码如下：

[js] view plain copy

1. <script language =“javascript”>  
2. / ****************** 错误处理的方法*************************** *********** /  
3. function onerror()  
4. {  
5.     alert(“ 您的操作有误！”);  
6. }  
7. / ****************** 实例化Ajax 对象的方法*********************** ****** /  
8. function getInfo()  
9. {  
10.     var loader = new net.AjaxRequest(“getInfo.jsp？nocache =”+ new Date().getTime(),deal_getInfo,onerror,“GET”);  
11. }  
12. / ************************ 回调函数*********************** *************** /  
13. function deal_getInfo()  
14. {  
15.     document.getElementById(“showInfo”).innerHTML = this.req.responseText;  
16. }  
17. </ script>