Ajax (asynchronous javascript and xml)
在没有ajax的时候，页面每次提交数据都必须销毁当前的页面，重新从服务器端获得一个页面。这样做不仅影响用户体验，而且会导致流量的浪费（都是钱啊）。为了避免这种情况，google在2005年通过其Goggle Suggest使AJAX变得流行起来。
(1)ajax的定义
在小天看来，ajax的本质就是利用浏览器提供的一个特殊的对象:XMLHttpRequest对象，也可以称为AJAX对象，向服务器发送异步请求。服务器返回部分数据（通常不需要返回完整页面），这样的话，用户的操作就不会被打断，也就避免了多余流量的浪费。
(2)获取ajax对象
首先，既然要利用XMLHttpRequest对象，当然要获取这个对象。但是，由于IE的一些黑历史，仗着自己当年的市场占有率高，就是莽 rua！它的ajax对象叫ActiveXObject。要区分浏览器来获取这个对象。但是jquery等js框架已经将这一步集成了。现在很难想象有人写js会不用jquery。所以这里只是大致了解一下就好了。辣鸡IE。壮哉我大chrome。
function getXhr(){var xhr = null;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject("Microsoft.XMLHttp");}return xhr;}
很难想象当年的IE有多大的勇气才敢逆时代前进。这样不兼容的例子真的很多很多，导致开发者都想放弃IE，更不用说用户了。
弱小和无知不是生存的障碍，傲慢才是。
（3）ajax对象的几个重要的属性
a.onreadystatechange:用来绑定一个事件处理函数，用来处理readystatechange事件。
注：当ajax对象的readyState属性值发生了任何改变（比如从0变成了1），就会产生readystatechange事件
b.readyState:有五个值（0，1，2，3，4），表示ajax对象与服务器通信的状态。其中，当值为4时，表示AJAX对象已经获得了服务器返回的所有数据。
哈哈，小天觉得，记住4就够啦。其他的不太懂。
c.responseText:获得服务器返回的文本数据。
d.responseXML:获得服务器返回的XML数据。
e.status:获得状态码。（比如说200表示成功，404啥的。。500啥的。。不想碰到啊 又想到了被抢课支配的恐惧）
（4）编程步骤
step1.获得ajax对象。（参见（2））
step2.发送请求。
有两种请求get或者post请求，其中区别优劣小天就不赘述了。
情形一 发送get请求
a.调用ajax对象的open方法
xhr.open(请求类型,请求地址,同步/异步（true表示异步）);
ps: ajax也可以发送同步请求，通俗的说，就是浏览器会锁定这个页面，用户感觉不到这个页面的刷新，但是在服务器做出响应之前，根本不可以对页面做出任何的操作。现在已经很少用ajax做同步处理了。拿一个异步的东西做同步，那不是傻吗。( ▼-▼ )。
eg:
xhr.open(‘get‘,‘check_uname.do?name=tom‘,true);
b.绑定事件处理函数
xhr.onreadystatechange=函数名;
eg:
xhr.onreadystatechange=f1;
c.发送请求
xhr.send(null);
情形二 发送post请求
a.xhr.open(‘post‘,‘请求地址‘,true);
b.xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);
c.xhr.onreadystatechange=函数名;
d.xhr.send(‘name=tom‘);
注：b步骤 按照http协议规范，如果发送的是post请求，在请求数据包里面，应该有content-type消息头。默认情况下，ajax对象不带消息头，所以需要调setRequestHeader方法来设置这个消息头。
step3.编写服务器端的程序
serlvet的话 就是通过PrintWriter来返回文本数据就可以了。也可以使用json
至于SpringMVC和ajax的结合，会单开一篇随笔。
step4.编写事件处理函数
function f1(){//先获得服务器返回的数据if(xhr.status == 200 && xhr.readyState == 4){var txt = xhr.responseText;//利用这些数据（txt）更新页面...}}
（5）实战：注册页面（get请求）
这个算是非常经典的AJAX的案例了。
需求就是：当用户输入用户名之后，判断用户名是否为Sally，如果是，那么文本框之后出现提示用户名已存在，如果不是Sally提示可以使用。
在写的时候，小天发现自己的jquery和javascript已经忘得差不多了( ╯□╰ )，不过还是勉强完成了。之后看来需要复习一下了。这个小案例没有使用jquery，但是对javascript一些很复杂的语法进行了封装。
//js工具类function getXhr(){var xhr = null;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject("Microsoft.XMLHttp");}return xhr;}//有种自己编写了jquery的感觉( ▼-▼ )function $(id){return document.getElementById(id);}function $F(id){return $(id).value;}//jsp页面<!DOCTYPE html><html><head><meta charset="UTF-8"><title>regist</title><script type="text/javascript" src="js/ajax.js"></script><script type="text/javascript">function check(){var xhr = getXhr();xhr.open(‘get‘,‘check.do?uname=‘+ $F(‘uname‘),true);xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){//获得服务器返回的数据var txt = xhr.responseText;$(‘uname_msg‘).innerHTML = txt;}};xhr.send(null);}</script></head><body style="font-size:30px;"> <form action="" method="get"> <fieldset> <legend>注册</legend> 用户名：<input id="uname" type="text" name="uname" onblur="check();" /> <span id= "uname_msg"></span><br/> 密码：<input type="password" name="pwd"/><br/> <input type="submit" value="注册"/> </fieldset> </form></body></html>//servlet页面public class ActionServlet extends HttpServlet{public void service(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{System.out.println("service()");//获得请求资源路径// http://ip:port/ajax-day01/check.doString action = request.getServletPath();//设置编码类型。response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();//依据分析的结果，进行不同的处理if("/check.do".equals(action)){String uname = request.getParameter("uname");System.out.println("uname:"+ uname);if("Sally".equals(uname)){out.println("帐号已经存在（╯－＿－）╯╧╧");}else{out.println("可以使用( ?? ω ?? )y");}}else if("/getLuck".equals(action)){Random r = new Random();int number = r.nextInt(8888);System.out.println("number:" + number);out.println(number);}}}注：这里没有把web.xml贴出来 很简单的配置，就不在此赘述了。
小天带你了解ajax
原文地址：http://www.cnblogs.com/sunknightt/p/7450193.html