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对象
if(window.XMLHttpRequest){ //针对FireFox,IE7,IE8等以及其他类型的浏览器 xmlhttp = new XMLHttpRequest(); //针对某些特定版本的mozillar浏览器的bug进行修正 if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //针对IE6以下版本的浏览器 //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js数组中 //排在前面的版本较新 var activexName = ["MSZXML2.XMLHTTP","Microsoft.XMLHTTP"]; for(var i = 0; i < activexName.length; i++){ try{ //取出一个空间名进行创建，如果创建成功就终止循环 //如果失败，抛出异常，然后可以继续循环，继续尝试创建 xmlhttp = new ActiveXObject(activexName[i]); break; }catch(e){ } } } //确认XMLHTTPRequest对象创建成功 if(!xmlhttp){ alert("XMLHTTPRequest对象创建失败！"); return; }
这是使用AJAX的XMLHTTPRequest对象最复杂的一部，因为需要针对IE和其他类型的浏览器创建这个对象的不同方式写不同的代码。
2).注册回调函数
xmlhttp.onreadystatechange = 回调函数名;
注意：注册回调函数时，只需要函数名，不需要加括号，如果加上括号，就会把函数的返回值注册上，这是错误的。
3).设置连接信息
//第一个参数表示Http请求的方式，主要是get和post //第二个参数表示请求的url地址，get方式请求参数也在url中 //第三个参数表示采用异步还是同步方式交互，true表示异步 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). 接收响应数据
注意：这一步是在回调函数中执行的。
//判断对象的状态时交互完成 if(xmlhttp.readyState == 4){ //判断http的交互是否成功 if(xmlhttp.status == 200){ //获取服务器端返回的数据 //获取服务器端输出的纯文本数据 var responseText = xmlhttp.responseText; 显示操作。。。 } }
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(); builder.append("<message>"); builder.append("服务端响应内容").append("</message>"); out.println(builder.toString());
3). 客户端JavaScript中AJAX处理的5个步骤只有第5步回调方法有所区别，其他的都完全一样。回调方法中的处理如下：
A. 使用responseXML方式来接受XML数据的DOM对象
var domObj = xmlhttp.responseXML;
B. 使用DOM API处理接收到的XML数据
//dom中利用getElementsByTagName可以根据标签名来获取元素节点，返回的是一个数组 var messageNodes = domObj.getElementsByTagName("message"); //获取messageNode节点中的文本内容 //xml标签中的文本在DOM中是其标签所对应元素节点的子节点 if(messageNodes.length > 0){ var textNode = messageNodes[0].firstChild; //对于文本节点来说，可以通过nodeValue的方式返回文本节点的内容 var responseMessage = textNode.nodeValue; 。。。。 }else{ alert("XML数据格式错误，原始文本内容为："+ xmlhttp.responseText); }