AJAX学习笔记

AJAX学习笔记

AJAX全称是：Asychronous JavaScript And XML，其主要的内容是：（1）使用XHTML和CSS的基于标准的表示技术。（2）使用DOM进行动态显示和交互。（3）使用XML和XSLT进行数据交互和处理。（4）使用XMLHttpRequest进行异步数据检索。（5）使用javascript将以上技术融合在一起。

先从AJAX流行的一些框架或者库之间比较开始：jquery是一个轻量级的，纯粹用于前台页面开发的Javascript库，与jquery类似的是prototype，它们都是对javascript的一些封装库。dojo和ext也是纯粹的页面端框架，这两个是比较重量级的AJAX框架，提供了很多可以做出非常好前端效果的API和控件。DWR框架和前面提到的AJAX框架或库不太一样，DWR是一个提供从页面javascript直接调用服务器端java代码的AJAX框架。另外，Google也有一个叫做jwt的AJAX框架，其定位是服务器端的AJAX框架，如果不会写javascript，可以使用java写出javascript效果，使用编译器编译出javascript。

 

传统的网页应用与AJAX的区别：

传统的网页应用方式：

1). 同步方式，浏览器每次向服务器发请求到服务器响应返回之前的这段时间，用户体验是中断的不连续的。

2). 服务器端向浏览器端返回的是页面。

3). 传统应用请求发送是通过浏览器的Form组装的数据。

AJAX方式

1). AJAX使用XMLHTTPRequest请求方式是异步的，浏览器向服务器发出请求后会注册一个回调函数，服务器端的响应返回之后调用回调函数，在这段时间可以继续做其他事情，用户的体验是连续的。

2). AJAX方式服务器端向浏览器端返回的是用户感兴趣的XML文本数据，即AJAX是按需取数据，不用取很多的冗余数据。

3). AJAX是方式是通过写javascript函数，使用AJAX引擎发送请求。

 

一个简单例子分析AJAX的工作原理：

AJAX使用的5个步骤：

1).创建XMLHTTPRequest对象

[javascript] view plaincopy

1. if(window.XMLHttpRequest){  
2.        //针对FireFox,IE7,IE8等以及其他类型的浏览器  
3.        xmlhttp = new XMLHttpRequest();  
4.        //针对某些特定版本的mozillar浏览器的bug进行修正  
5.        if(xmlhttp.overrideMimeType){  
6.            xmlhttp.overrideMimeType("text/xml");  
7.        }  
8.     }else if(window.ActiveXObject){  
9.        //针对IE6以下版本的浏览器  
10.        //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js数组中  
11.        //排在前面的版本较新  
12.        var activexName = ["MSZXML2.XMLHTTP","Microsoft.XMLHTTP"];  
13.        for(var i = 0; i < activexName.length; i++){  
14.            try{  
15.               //取出一个空间名进行创建，如果创建成功就终止循环  
16.               //如果失败，抛出异常，然后可以继续循环，继续尝试创建  
17.               xmlhttp = new ActiveXObject(activexName[i]);  
18.               break;  
19.            }catch(e){            
20.            }  
21.        }  
22.     }  
23.     //确认XMLHTTPRequest对象创建成功  
24.     if(!xmlhttp){  
25.        alert("XMLHTTPRequest对象创建失败！");  
26.        return;  
27.     }  

 

这是使用AJAX的XMLHTTPRequest对象最复杂的一部，因为需要针对IE和其他类型的浏览器创建这个对象的不同方式写不同的代码。

2).注册回调函数

[javascript]  view plain copy

1. xmlhttp.onreadystatechange = 回调函数名;  

 

注意：注册回调函数时，只需要函数名，不需要加括号，如果加上括号，就会把函数的返回值注册上，这是错误的。

3).设置连接信息

[javascript]  view plain copy

1. //第一个参数表示Http请求的方式，主要是get和post  
2. //第二个参数表示请求的url地址，get方式请求参数也在url中  
3. //第三个参数表示采用异步还是同步方式交互，true表示异步  
4. xmlhttp.open(method, url, async, username, password);  

 

注意：POST方式稍微有些区别，需要自己设置http请求头如下：

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

4). 发送数据，开始和服务器端进行交互

[javascript]  view plain copy

1. xmlhttp.send(body);  

 

注意：同步方式下，send这句会在服务器端数据回来之后才执行完成，异步方式下，send这句会立刻完成执行。Get方式此处发送的数据为null。

5). 接收响应数据

注意：这一步是在回调函数中执行的。

[javascript]  view plain copy

1. //判断对象的状态时交互完成  
2.        if(xmlhttp.readyState == 4){  
3.               //判断http的交互是否成功  
4.               if(xmlhttp.status == 200){  
5.                      //获取服务器端返回的数据  
6.                      //获取服务器端输出的纯文本数据  
7.                      var responseText = xmlhttp.responseText;  
8.                      显示操作。。。  
9.               }  
10.        }  

 

 

XMLHTTPRequest的一些常用属性和方法：

1).abort()方法：停止当前请求。

2).getAllResponseHeaders()方法：返回包含HTTP请求的所有响应头信息，其中响应头包括Content-Length,Date,URI等内容。返回值是一个字符串，包含所有头信息，其中每一个键名和键值用冒号分开，每一组键之间用CR和LF(回车加换行符)来分隔。

3).getResponseHeader(String header)方法：返回HTTP请求的响应头中指定的键名header对应的值。

4). open(String method, String url, Boolean asynch, String username, String password)方法：建立对服务器的调用。其中method表示HTTP调用方法，一般使用“GET”,“POST”。url表示调用的服务器请求地址。asynch表示十分采用异步方式，true表示异步。后面两个参数是提供http认证机制需要的用户名和密码。

5). send(content)方法：向服务器发出请求，如果采用异步方式，该方法会立即返回。Content可以不指定，其内容可以是DOM对象，输入流或是字符串。

6). setRequestHeader(String header, String value)方法：设置HTTP请求头中指定header的值为value。此方法需在open方法以后调用。

7). onreadystatechange属性：请求状态改变的事件触发器（readState变化时会调用此方法）。通常是一个javascript函数。

8). readyState属性：请求状态。0=未初始化，1=open方法成功调用以后，2=服务器已经应答客户端的请求，3=交互中，Http头信息已经接收，响应数据尚未接收，4=完成，数据接收完成。

9). responseText属性：服务器返回的文本内容。

10). responseXML属性：服务器返回的兼容DOM的XML内容。

11). status属性：服务器返回的状态码。200表示成功，404表示未找到。

12). statusText属性：服务器返回的状态码的文本信息。

 

XMLHTTPRequest接收XML格式的响应数据

1). 服务端HTTP Response的响应头信息内容类型设置为xml类型：

[javascript]  view plain copy

1. response.setContentType("text/xml;charset=GB2312");  

 

2). 服务器端返回数据需要封装成xml格式，即数据的内容需要放在xml标签对之中，如：

[javascript]  view plain copy

1. StringBuilder builder = new StringBuilder();  
2. builder.append("<message>");  
3. builder.append("服务端响应内容").append("</message>");  
4. out.println(builder.toString());  

 

3). 客户端JavaScript中AJAX处理的5个步骤只有第5步回调方法有所区别，其他的都完全一样。回调方法中的处理如下：

A. 使用responseXML方式来接受XML数据的DOM对象

[javascript] view plaincopy

1. var domObj = xmlhttp.responseXML;  

 

B. 使用DOM API处理接收到的XML数据

[javascript]  view plain copy

1. //dom中利用getElementsByTagName可以根据标签名来获取元素节点，返回的是一个数组  
2. var messageNodes = domObj.getElementsByTagName("message");  
3. //获取messageNode节点中的文本内容  
4. //xml标签中的文本在DOM中是其标签所对应元素节点的子节点  
5. if(messageNodes.length > 0){  
6.     var textNode = messageNodes[0].firstChild;  
7. //对于文本节点来说，可以通过nodeValue的方式返回文本节点的内容  
8. var responseMessage = textNode.nodeValue;  
9. 。。。。  
10. }else{  
11.     alert("XML数据格式错误，原始文本内容为："+ xmlhttp.responseText);  
12.     }