AJAX学习笔记

发布时间：2020-12-15 21:50:06 所属栏目：百科来源：网络整理

导读：AJAX学习笔记 AJAX全称是：Asychronous JavaScript And XML，其主要的内容是：（1）使用XHTML和CSS的基于标准的表示技术。（2）使用DOM进行动态显示和交互。（3）使用XML和XSLT进行数据交互和处理。（4）使用XMLHttpRequest进行异步数据检索。（5）使用

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

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

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

2).注册回调函数

[javascript] view plain copy

xmlhttp.onreadystatechange=回调函数名;

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

3).设置连接信息

[javascript]

//第一个参数表示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).发送数据，开始和服务器端进行交互

[javascript]

xmlhttp.send(body);

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

5).接收响应数据

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

[javascript] //判断对象的状态时交互完成

if(xmlhttp.readyState==4){

//判断http的交互是否成功

if(xmlhttp.status==200){

//获取服务器端返回的数据

//获取服务器端输出的纯文本数据

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

[javascript]

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

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

[javascript]

StringBuilderbuilder=newStringBuilder();

builder.append("<message>");

builder.append("服务端响应内容").append("</message>");

out.println(builder.toString());

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

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

[javascript]vardomObj=xmlhttp.responseXML;

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

[javascript] //dom中利用getElementsByTagName可以根据标签名来获取元素节点，返回的是一个数组

varmessageNodes=domObj.getElementsByTagName("message");

//获取messageNode节点中的文本内容

//xml标签中的文本在DOM中是其标签所对应元素节点的子节点

if(messageNodes.length>0){

vartextNode=messageNodes[0].firstChild;

//对于文本节点来说，可以通过nodeValue的方式返回文本节点的内容

varresponseMessage=textNode.nodeValue;

。。。。

}else{

alert("XML数据格式错误，原始文本内容为："+xmlhttp.responseText);

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!