一、ajax技术之传统的b/s结构
在我们刚刚开始web开发时，我们用的是b/s模型的，我们请求浏览器数据，然后服务器返回html页面，浏览器对页面进行渲染。比如我们在浏览器输入一个http://www.iteye.com/网页。返回的数据是：
然后浏览器根据html文档数据进行渲染，得到web页面。
再想想我们的应用程序，如qq、微信之类的，我们只看到数据的更新与发送，而不像web程序一样，返回整个页面，浏览器再对其处理然后显示其内容。
我们在浏览传统的web页面时，都会感觉到页面的刷新，特别是当页面内容比较多的时候，即使我们只更新一个值，最终都会这样处理。
这时，我们就会想，为什么我们只要一个数据的更新或查询的时候，其它没有变动的地方也要跟着这个数据重新更新一遍，这样数据的冗余比较大，这样服务器的压力也大。我们有没有一种方法只更新一部分的数据，而不要再更新其它不用更新的数据，就像桌面应用程序或app一样呢。既然有这个需求，就会用相应的技术应运而生，就是现在用的很普遍的ajax技术。
二、ajax技术简介
Ajax全称为异步javascript和xml技术。即通过javascript向服务器提交请求（即为http的请求，get、post等），并对返回的响应进行处理，比如向网页面写入数据，已达到更新数据的目的而不需要更新整个页面。Xml（可扩展标记语言）可以用来标记数据，定义数据类型，可用于数据的传输。即可以用xml的来对数据进行组织，用于ajax技术中的浏览器和服务器之间的数据传输。
而ajax的核心就是，通过对象XMLHTTPRequest与服务器进行交互。通过这个对象，浏览器可以在不更新整个页面下获取想要的数据。就如下图：
我们可以用过浏览器观察用了ajax技术的网站，我们进入iteye的注册页面，http://www.iteye.com/signup：
当我们输入一个已存在的用户名时，我们可以用浏览器来查看它的相应。
Xhr就是查看XMLHTTPRequest对象处理的请求，我们可以看到，它只返回一个用户已存在的信息，而没有整个页面的html文档。
二、ajax实例
接下来我们就是要实现上面的那个功能。
要想用到ajax技术，我们就必须获取XMLHTTPRequest对象，XMLHTTPRequest对象是浏览器内置的对象，如ie7+、Firefox、Chrome、Safari和Opera浏览器都有内建的XMLHTTPRequest对象。
Js只需通过一行代码就可以建立一个XMLHTTPRequest对象：
var request=new XMLHTTPRequest();
如果是老版本的ie浏览器，如ie6、5，则要使用ActiveX对象。
var requestnew ActiveXObject("Microsoft.XMLHTTP");
1）以下是建立一个XMLHTTPRequest对象的一个函数。
var request;
function getRequestObject(){
if(window.ActiveXObject){
//判断是否是ie浏览器，若是ie浏览器，因为只有ie浏览器才支持ActiveX对象
request = new ActiveXObject("Microsoft.XMLHTTP");
//若是支持，可以用这条语句创建一个XMLHttpRequest对象
}else if(window.XMLHttpRequest){
//若是其它的浏览器，判断是浏览器否有内建的XMLHttpRequest对象，
request= new XMLHttpRequest();
//若可以，则建立一个XMLHTTPRequest对象
}else{
window.alert("你的浏览器不支持XMLHttpRequest，无法使用AJAX！");
}
}
由于ajax是后面才有的技术，一些老式的浏览器可能不支持，或者一些老式的ie浏览器支持的方式不一样。这样也是为了兼容各种浏览器的使用。这样，通过调用这个函数，我们的XMLHTTPRequest对象既可以创立。
2）下面是一个回调函数，即当通过XMLHTTPRequest对象我们发送一个请求之后，获得服务器的响应之后，立马执行这个函数，处理返回的响应。
function processResult(){
//首先，我们判断是否一个成功的请求是否已成功的相应。
if((request.readyState==4)&& (request.status==200)){
//request对象（即XMLHttpRequest对象）的readyState属性若为4，则证明响应数据接受完成
//request对象的status属性代表服务器返回的http状态码，200表示成功返回
alert("服务器返回的消息是"+request.responseText);
//alert方法向浏览器提示返回的数据
document.getElementById("divName").innerHTML=request.responseText;
//向相应的页面的更新返回的数据
}
}
上面用到了几个XMLHTTPRequest的属性，下面我们来详细地看一看这些属性及其值代表的含义。
（1）readyState属性，表示XMLHTTPRequest对象的状态：
0：表示未初始化，即XMLHTTPRequest对象已创建，但是还未调用open方法（方法后面讲）；
1：open方法已经调用，但是send方法还没调用；
2：send方法已经调用，但是还没有接收数据；
3：正在接受数据，即http相应头已经接受，但尚未接收完成；
4：表示数据接收完成。（即为上面那个的方法判断，只有接收完成之后，服务器才能处理数据）
（2）Status，即为http服务器返回的状态码，200表示成功，404表示未找到，500表示服务器出现了错误。
if((request.readyState==4)&& (request.status==200))这里的if判断就是判断是否已经完成了一个http的请求并已成功返回。
（3）Onreadystatechange，请求的状态发生改变是的事件触发器，它就是要绑定一个回调函数，就是上面的那个processResult()函数，当请求的状态发生改变时就会执行这个函数。
（4）responseText，服务器返回的文本的内容，这个直接就是服务器返回的内容文本形式，通过这个属性可以直接获取文本内容。
（5）responseXML，若服务器相应的是xml内容，同时还会判断xml是否符规范，不符合则内容会出现问题。可以通过js解析出xml的内容。
（6）statusText，服务器返回状态的文本信息。
3）下面是一个使用XMLHTTPRequest的方法。
function sendRequest(i){
alert(i);
getRequestObject();
//创建XMLHttpRequest对象
request.onreadystatechange=processResult;
//绑定回掉函数，前面的属性说明了设置onreadystatechange这个属性的作用
request.open("POST","UserinfoAction.do?action=register",true);
//指定与服务器的请求的方法，post或get等，还有请求的地址，url，还有是否异步，true为异步
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//设置请求头
var userName = document.getElementById("textName").value;
//获取id为textName的值
request.send("userName="+userName);
//向服务器发送请求，userName，即用户名
}
我们接下来介绍XMLHTTPRequest的方法：
（1）Open(string method,string url,boolean asynch,String username,string password)
Method设置与服务器的交互方法，有post、get等等方法，即向服务器请求的方法是用post方法还是get方法；
Url代表请求的地址；
Asynch是一个boolean数据格式，为true表示异步方法，为false表示同步方法；
Open方法就是设定这三个值，就是确定我们用什么方法请求服务器，请求地址，是否异步。
（2）Send(content)向服务器发送请求，若采用异步方式，则立即返回。Content为null时表示不发送数据，但发送请求。一般get方法用null，post方法content设置为post提交的数据。
（3）SetRequestHeader(String header,String Value)设置请求头，设置HTTP请求中的指定头部header的值为value，此方法需在open方法以后调用，一般在post方式中使用。
（4）getAllResponseHeaders()，返回包含Http的所有响应头信息，其中相应头包括Content-length,date,uri等内容。返回值是一个字符串，包含所有头信息，其中每个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔！
（5）getResponseHeader(String header)返回HTTP响应头中指定的键名header对应的值。
（6）Abort()停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。
4）sendRequest绑定一个事件，当事件触发后执行。
然后我们在页面中的表单的账号输入框的onblur事件处理方法。当我们输入一个用户名时，失去光标后，就会触发onblur事件，执行sendRequest方法，获得服务器反馈的信息，以检测该用户名是否已被注册。
账号：<input type="text" id="textName" name="textName" onblur="sendRequest(1);"> <div id="divName" style="color: red"></div> <br> 密码：<input type="password" name="textPassword" onblur="sendRequest(2);"> <input type="submit" value="注册">
5）下面是服务器端处理请求后返回数据的action，通过PrintWriter的对象执行输出数据返回给浏览器。PrintWriter对象在讲reponse已经说过其作用了。如果不是用过ajax技术接收，则直接在浏览器上显示返回的数据。若通过了ajax技术接收，则有XMLHTTPRequest对象处理，交给js来把数据更新到页面。
public class UserinfoAction implements Action {
@Override
public String execute(HttpServletRequest request, HttpServletResponse response) {
String action = request.getParameter("action");
String url = null;
if (action.equals("login")) {
url = login(request, response);
} else if (action.equals("register")) {
url = register(request, response);
}
return url;
}
public String login(HttpServletRequest request, HttpServletResponse response) {
String name = request.getParameter("textName");
String password = request.getParameter("textPassword");
if (name.equals(password)) {
HttpSession session = request.getSession();
session.setAttribute("name", name);
session.setAttribute("password", password);
return "main.jsp";
}
return "error.jsp";
}
public String register(HttpServletRequest request, HttpServletResponse response) {
try {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String name = request.getParameter("userName");
PrintWriter out = response.getWriter();
if (name.equals("admin")) {
out.println("该账号已被注册！！!");
} else {
out.println("该账号是可用账号！！!");
}
out.flush();
out.close();
} catch (UnsupportedEncodingException e1) {
e1.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}