详解Ajax技术

详解Ajax技术

最近在学习java web开发且在开发一个小的项目，在这个过程中Ajax技术的使用频率相当高，所以决定写下这篇文章，加深自己对该技术的理解，也算是对所学到知识的一个总结。同时在此将这篇文章分享给需要的攻城狮们，希望能够一起学习，一起进步。

什么是Ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网
页开发技术。讲到Ajax技术,就必须要跟传统网络技术对比，只有在对比中才能体现Ajax技术的优越性以及Ajax
如何提高了用户体验。

Ajax开发模式和传统开发模式的比较

从Ajax的简写中可以知道Ajax技术最主要的特点就是异步（Asynchronous），那在Ajax技术出现之前网络世界就是同步的，那是个怎样的世界呢？举个例子，假设你在填写一张有100个字段的表单，里面包含姓名、年龄以及你从小学、中学在到大学所有的简历、经历，认识的人等等，总的来说这是一张复杂而又神奇的表单。你花了好长一段时间才把全部字段都填写完毕并且提交，等了5分钟之后，服务器才告诉你少写了一个字段，这个字段是你小学老师的性别，你费了好长一段时间来查找并填写完毕后再次提交，又等了5分钟之后服务器告诉你，你的邮箱已经被注册，如此往复…这便是同步的网络世界，只要是填写较为复杂的表单都是噩梦般的体验。下图同步请求客服端和服务端的处理过程：

应用Ajax技术，同样是填写那张100多个字段的表单，当你填写完邮箱地址之后，服务器端实时地向服务器端发送请求且服务器端也实时地响应客户端的请求，这个过程并不影响用户继续完成其他字段的填写，而且客户端能够得到实时地获取到服务器端的响应信息（比如在页面出现一行字提醒邮箱已经被注册），这个过程是没有重新刷新和加载页面的，在完成整个表单的字段时便能顺利提交。这个过程很好地提升了用户体验。下图为异步请求客服端和服务端的处理过程：

Ajax应用的技术

Ajax使用的技术中，最为核心的就是XMLHttpRequest,它是具有应用程序接口的JavaScript对象，能够使用超文本传输协议（HTTP）连接一个服务器，是微软公司为了满足开发者的需要，于1999年在IE 5.0浏览器率先推出的。通过XMLHttpRequest对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新页面，也不用每次都要将数据处理工作一次性交给服务器来完成，这样既减轻了服务器负担，又加快了响应速度，缩短了用户的等待时间。

XMLHttpRequest对象的初始化

在使用XMLHttpRequest对象发送请求和处理响应之前，首先需要初始化该对象，但是由于XMLHttpRequest不是W3C标准，所以对于不同的浏览器，初始化的方法也是不同的。通常情况下只需要考虑两种情况，一种是IE浏览器，另一种是非IE浏览器。下面分别进行介绍。

IE浏览器：通过把XMLHttpRequest实例化为一个ActiveX对象：

var http_request = new ActiveXObject("Msxml2.XMLHTTP");
//或者
var http_request = new ActiveXObject("Microsoft.XMLHTTP");

上面两种语法中，Msxml2.XMLHTTP和Microsoft.XMLHTTP是针对IE浏览器不同版本而进行设计的，目前比较常用的是是这两种。

非IE浏览器：非IE浏览器（如Firefox,Opera，Mozilla，Safari等）把XMLHttpRequest对象实例为一个本地JavaScript对象。具体方法如下：

var http_request=new XMLHttpRequest();

为了提高程序的兼容性，可以创建一个跨浏览器的XMLHttpRequest对象。具体代码如下：

if(window.XMLHttpRequest){//非IE浏览器
http_request=new XMLHttpRequst（）;
}else if(window.ActiveXObject){//IE浏览器
try{
http_request=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
http_request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}

XMLHttpRequest对象的常用方法

open()方法

open()方法用于设置进行异步请求目标的URL、请求方法以及其他参数信息。其具体语法如下：

open("method","URL"[,anyncFlag[,"userName"[,"password"]]]);

参数说明:
method: 用于指定请求的类型，一般为GET或POST。

URL:用于指定地址，可以是绝对地址或者相对地址，并且可以传递查询字符串。

anyncFlag:可选参数，用于指定请求方式，异步请求为true，同步请求为false，默认情况下是true。

userName:可选参数，用于指定请求用户名，没有时可以省略。

password:可选参数，用于指定请求密码，没有事可以省略。

//设置异步请求目标为request.jsp,请求方法为GET
http_request.open("GET","request.jsp",true);

send()方法

send()方法用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应位置。其语法格式如下：

send(content);

参数说明
content:用于指定发送的数据，可以是DOM对象的实例、输入流或字符串。如果没有参数传递，可以设置为null。

//向服务器发送一个不包含任何参数的请求
http_request.send(null);

setRequestHeader()方法

setRequestHeader()方法用于为请求HTTP头设置值。其具体代码格式如下：

setRequestHeader("header","value");

参数说明
header:用户指定HTTP头。

value:用于指定的HTTP头设置值

*setRequestHeader()方法必须在调用open()方法之后才能调用

//在发送POST请求时，需要设置Content-Type 请求头的值为“application/x-www-form-urlencoded”，
//这时通过setRequestHeader()方法进行设置。
http_Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

abort()方法

abort()方法用于停止或放弃当前异步请求。其语法格式如下：

abort();

getResponseHeader()方法

getResponseHeader()方法用于以字符串形式返回指定的HTTP头信息。其语法格式如下：

getResponseHeader("headerLabel");

参数说明
hederLabel：用于指定HTTP头，包括Server、Content-Type和Date等。

//获取HTTP头Content-Type的值
http_request.getResponseHeader("Content-Type");

getAllResponseHeaders（）方法

getAllResponseHeaders()方法用于以字符串形式返回完整的HTTP头信息，其中包括Server、Date、Content-Type和Content-Length。具体语法如下：

getAllResponseHeaders();

XMLHttpRequest对象的常用属性值

XMLHttpRequest对象提供了一些常用的属性，通过这些属性可以获取服务器的响应状态及响应内容。

onreadystatechange属性

onreadystatechange属性用于指定状态改变时所触发的事件处理器。在Ajax中，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数。

//指定状态改变时出发JavaScript函数getResult的代码
http_request.onreadyStateChange=getResult;
//注意：在指定所触发的事件处理器时，所调用的JavaScript函数不能添加小括号及指定参数名但可以使用匿名函数。例如：
http_request.onreadystatechan=function(){
getResult("添加的参数");//调用带参数的函数
};

readystate属性

readyState属性用于获取请求的状态。该属性共包括5个属性值，如下表所示：



responseText属性

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

responseXML属性

responseXML属性用于获取服务器的响应，表示为XML。这个对象可以解析为一个DOM对象。

status属性

status属性用于返回服务器端的HTTP状态码，常用的状态码如下表所示：

Ajax技术的使用

与服务器通讯——发送请求与处理响应

发送请求

Ajax可以通过XMLHttpRequest对象实现异步方式向后台发送请求。通常情况下，Ajax发送请求有两种，一种是GET请求，另一种是POST请求。这两种请求都需要经过一下4个步骤。

1.初始化XMLHttpRequest对象。（代码在上面已经给出）

2.为XMLHttpRequest对象指定一个返回结果处理函数（即回调函数），用于对返回结果进行处理。具体代码如下：

http_request.onreadystatechange=getResult;

3.创建一个与服务器的连接。在创建时，需要指定发送请求的方法（即GET或POST），以及设置是否采用异步方式发送请求。

//采用异步方式发送GET方式的请求
http_request.open('GET',url,true);
//采用异步方式发送POST方式的请求
http_request.open('POST',url,true);
//*说明：1.在open（）方法中的URL参数，可以是JSP页面地址，Servlet的映射地址
//2.在指定的URL参数时，最好将一个时间戳追加到改URL参数的后面，这样可以防止因浏览器缓存结果而不能实时得到最新结果。例如：可以指定URL参数为以下代码：
String url="deal.jsp?nocache="+new Date().getTime();

4.向服务器发送请求。XMLHttpRequest对象的send()方法可以向服务器发送请求，该方法需要传递一个参数，如果发送的是GET请求，可以将参数设置为null；如果发送的是POST请求，可以通过该参数指定要发送的请求参数。

//向服务器发送GET请求
http_request.send(null);
//向服务器发送POST请求
var param="user="+form1.user.value+"&pwd="+form1.pwd.value+"&email"+form1.email.value;//组合参数

//**注意：在发送POST请求前，还需要设置正确的请求头
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//这句代码应在http_request.send(param)语句之前

http_request.send(param);//向服务器发送请求

处理服务器响应

在向服务器发送请求时，需要通过XMLHttpRequest对象的onreadystatechange属性指定一个回调函数，用于处理服务器响应。在这个回调函数中，首先需要判断服务器的请求状态，保证请求已完成；然后再根据服务器的HTTP状态码，判断服务器对请求的响应是否成功，如果成功，则获取服务器的响应反馈给客户端。

XMLHtttpRequest对象提供了两个用来访问服务器响应的属性，一个是responseText属性，返回字符串响应；另一个是responseXML属性，返回XML响应。字符串响应通常应用在不是特别复杂的情况下，例如，将响应显示在提示对话框中，或者响应只是显示成功或失败的字符串；XML响应通常用来响应较为复杂的情况，应用XMLHttpRequest对象的response属性，可以生成一个XML文档，如今的浏览器都提供了很好的解析XML文档对象的方法。由于JSON的出现，JSON已基本取代了XML传输方式，已经很少使用第二种响应方式。

//回调函数的具体代码
function getResult(){
if(http_request.readyState==4){//判断请求状态
if(http_request.status==4){//请求成功，开始处理返回结果
alert(http_request.responseText);
}else{
alert("您请求的页面有错误！");
}
}
}

Ajax重构

Ajax的实现主要依赖与XMLHttpRequest对象，但是在调用其进行异步数据传输中，由于XMLHttpRequest对象的实例在处理事件完成后就会被销毁，所以如果不对该对象进行封装处理，在下次需要调用它时就要重新重新构建，而每一次构建都需要写一大段代码，使用起来很不方便。虽然现在有很多开源的Ajax框架提供了对XMLHttpRequest对象的封装方案，而且使用起来也很方便，但是如果使用这些框架，通常需要加载很多额外的资源，这势必会浪费很多服务器资源。JavaScript支持OO编码风格，所以我们可以将Ajax所必需的功能封装在对象中。

Ajax重构的3个步骤

1.创建一个单独的JS文件，名称可以自己取（此处命名为AjaxRequest.js）,并在文件中编写重构Ajax所需的代码。具体代码如下：

var net =new Object();//定义一个全局变量
//构造函数
net.AjaxRequest=function(url,onload,onerror,method,params){
this.req=null;
this.onload=onload;
this.onerror=(onerror)?onerror:this.defaultError;
this.loadDate(url,method,params);
}
//编写用于初始化XMLHttRequest对象并指定处理函数，最后发送HTTP请求方法
net.AjaxRequest.prototype.loadDate=function(url,method,params){
if(!method){
method="GET";
}
if(window.XMLHttpRequest){//非IE浏览器
this.req=new XMLHttpRequest();
}else if(window.ActiveXObject){//IE浏览器
this.req=new ActiveXObject("Microsoft.XMLHTTP");
}
if(this.req){
try {
var loader=this;
this.req.onreadystatechange=function(){
net.AjaxRequest.onReadyState.call(loader);
}
this.req.open(method, url, true);//建立对服务器的调用
if(method=="POST"){
this.req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//设置请求的内容类型
this.req.setRequestHeader("x-requested-with", "ajax");//设置请求的发出者
}
this.req.send(params);
} catch (e) {
// TODO: handle exception
this.onerror.call(this);//调用错误处理函数
}
}
}
//重构回调函数
net.AjaxRequest.onReadyState=function(){
var req=this.req;
var ready=req.readyState;
if(ready==4){
if(req.status==200){
this.onload.call(this);
}else{
this.onerror.call(this);
}
}
}
//重构默认的错误处理函数
net.AjaxRequest.prototype.defaultError=function(){
alert("错误数据\n\n回调状态："+this.req.readyState+"\n:"+this.req.status);
}

2.在需要应用Ajax的页面中应用以下语句来引用步骤（1）中创建的JS文件。

<--指定src路径是需要注意路径的正确性-->
<script language="javasctipr" src="AjaxRequest.js"></sctipt>

3.在应用Ajax的页面编写错误处理的方法、实例化Ajax对象的方法和回调函数。具体代码如下：

<script>
/************错误处理的方法************/
function onerror(){
alert("您的操作有误！");
}
/************实例化Ajax对象方法************/
function getInfo(){
var loader=new new.AjaxRequest("getInfo.jsp?nocache="+new Date().getTime(),deal_getInfo,onerror,"GET");
}
/*************回调函数***********/
function deal_getInfo(){
document.getElementById("showInfo").innerHTML=this.req.responseText;
}
</script>

用第三方库（jQuery）实现Ajax

在网络开发过程中，我们很少直接通过上述的方法来使用Ajax,而是直接通过第三方的框架来实现相关的功能。这些第三方的框架直接封装了Ajax的各个功能，使用时我们无需考虑浏览器的兼容性等问题，而是直接的使用相关的方法来实现Ajax，这样就简化了整个开发的过程。上面也提到过，就是用框架实现会加载更多的资源，服务器的压力会相对大，但一般应用的的开发都并未考虑这一点。以上花了相当大的篇幅来讲解Ajax原生方法，主要为了能够更好地了解Ajax技术各个功能的具体实现过程，在开发过程中能够更好地解决遇到相关问题，正所谓，知其然且要知其所以然。

jQuery实现Ajax介绍

jQuery.ajax([settings])方法
参数说明:
type:类型：“POST”或“GET”，默认为“GET”

url: 发送请求的地址

data：是一个对象，连同请求发到服务器的数据

dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动默认根据HTTP包MIME信息来只能判断，一般我们采用JSON格式，可以设置为“JSON”

success：是一个方法，请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串

error :是一个方法，请求失败是调用此方法。传入XMLHttpRequest对象

//使用jQuery前需要引入相关的文件，也可以直接引用在线的静态资源库
<script>
$(function{
$("#btn").click(function(){//给某个按钮添加点击事件
$.ajax({//直接调用这种方法使用Ajax
type:"GET";
url:"getInfo.jsp?id=001&nocache="+new Date().getTime();
data:{//如果type为post时要指定data传入参数
id:$("#id").val(),
name:$("#username").val(),
//以JSON键值对形式传值，无需手动拼接
},
dataType:"json",//预期服务器返回的数据类
success:function(){/*做一些事情*/},
error:function(){/*做一些事情*/}
});
});
});
</script>