学步园

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对象

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

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

2).注册回调函数

xmlhttp.onreadystatechange = 回调函数名; 

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

3).设置连接信息

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

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

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

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

xmlhttp.send(body); 

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

5). 接收响应数据

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

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

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类型：

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

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

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

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

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

var domObj = xmlhttp.responseXML; 

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

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