AJAX的基本概念
是构建网页的一种综合使用JavaScript和XML的技术。
其实质是HTML网页的异步传输技术：
表现形式：在等待网页的传输过程中，用户依然可以和系统进行交互。
好处：页面不用刷新就可以更新内容。
典型的流程：
1. 客户端出发异步操作
2. 创建新的XMLHttpRequest对象。
3. 与Server进行连接
4. 服务器端进行连接处理
5. 返回包含处理结果的XML文档
6. XMLHttpRequest对象接收处理结果并分析
7. 更新页面
XMLHttpRequest对象：
是一个浏览器内置的对象，通过它提起对服务器端的请求，可以通过javascript提起请求，如果要提起多个请求，就需要多个XHR对象。
这个请求在提起的时候，不会刷新页面，在后台运行。
请求的结果被预先定义好的方法（javacript）来处理。
例子程序：
对用户名进行检查：
1.客户端的触发
<tr>
<td class="altbg1"width="21%">用户名:</td>
<td class="altbg2"><inputid="userid"name="username"size="25"maxlength="25"type="text"onblur="validate()">
<spanid="usermsg"></span>
</tr>
要注意，使用的是onblur事件，onblur 事件会在对象失去焦点时发生。
οnblur="validate()" 是在对象失去焦点时发生的事件。
varreq;//定义全局变量
functionvalidate() {
var idField =document.getElementById("userid"); //获取当前需要传递的页面元素
varurl = "Validate.jsp?id="+ escape(idField.value); //通过validate页面来相应请求，id就是传递的值。escape是个特殊函数，可以把传递的值，转换成为url的特殊编码。比如空格可以转成%20
不同的浏览器，使用不同的方式来创建并初始化XHRequest对象。
if(window.XMLHttpRequest){ //netscope浏览器
req =new XMLHttpRequest();
} else if(window.ActiveXObject) { //
req =new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器
}
//打开这个对象，本例当中，使用get方式来打开，给定的网址：url，true的意思是使用异步模式。第一个参数，可以是get，post，put，delete，第二个参数，是需要送到的地址。第三个就是看，是否是异步模式。true为异步模式，false为同步模式。
req.open("GET", url,true);
//readyState是XHR的状态。
0为uninitialized未初始化，
1为loading请求还没有发到客户端，只是建立的连接，
2为loaded，请求已经发送到客户端，并得到了http头部信息。
3为interactive，服务器提交的内容正在取得之中，
4为completed。已经取完了，服务器处理完毕。onreadystatechange，就是说当状态变化的时候，就调用callback方法。
//callback为调用的方法。注意callback不要带括号。
req.onreadystatechange = callback;
//通过send把请求提交到服务器端
req.send(null);
}
下面我们来写callback方法：
functioncallback() {
if(req.readyState == 4){ //真正的完成
if(req.status == 200){ //sever的正确反馈
//alert(req.responseText);//弹窗方式。
//反馈回来的是一个xml，如下代码解析xml。把xml文档当成一个对象传递过来，从对象当中，以TagName来取得相应的元素
varmsg = req.responseXML.getElementsByTagName("msg")[0];
//alert(msg);//msg本身是一个object。
//调用另外一个function，setMsg（）
setMsg(msg.childNodes[0].nodeValue);
}
}
}
下面我们来写setMsg（）；
functionsetMsg(msg) {
//alert(msg);
mdiv = document.getElementById("usermsg");
if(msg =="invalid") {
mdiv.innerHTML ="<font color='red'>usernameexists</font>";
} else {
mdiv.innerHTML ="<font color='green'>congratulations! you canuse this username!</font>";
}
}
Server处理方式：
Server处理请求的方式不变， 输出什么都没关系，都可以直接输出语句。
<%
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-store"); //HTTP1.1 阻止浏览器进行缓冲
response.setHeader("Pragma","no-cache"); //HTTP1.0 阻止浏览器进行缓冲
response.setDateHeader("Expires", 0);//prevents catching at proxy server 阻止浏览器进行缓冲
System.out.println(request.getParameter("id"));
//check the database
response.getWriter().write("<msg>valid</msg>");
%>
