ajax的使用

Asynchronous Javascript and XML

典型的流程

1.客户端触发异步操作

2.创建新的XMLHttpRequest对象

3.与Server进行连接

4.服务器端进行连接处理

5.返回包含处理结果的XML文档

6.XMLHttpRequest对象接收处理结果并分析

7.更新页面

客户端触发：

<input type=text id="username" name="username" size="30" maxlength="10" onblur="validate()"/>
<span id=restext></span>

创建XHR：

<script type="text/javascript">
 var req;
 function validate() {
　　if(window.XMLHttpRequest) {
   　　　req = new XMLHttpRequest();
     } else if (window.ActiveXObject) {
     　　req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var username = document.getElementById("username");
    var url = "registervalidate.jsp?username=" + escape(username.value);
    req.open("GET", url, true);
    req.onreadystatechange=callback;//此处为回调函数（钩子函数）没有括号，使用的是函数指针
    req.send(null);
 }
 
 function callback() {
 　if (req.readyState == 4) {
    　　if (req.status == 200) {
     　　　var msg = req.responseXML.getElementsByTagName("msg")[0];//XMLHttpRequest对象接收处理结果并分析
        　　setMsg(msg.childNodes[0].nodeValue);//更新页面
   　　} 
   }
 }
 
 function setMsg(msg) {
  　　document.getElementById("restext").innerHTML="<font color='red'>" + msg + "</font>";
 }
</script>

server处理方式（registervalidate.jsp中的内容），返回包含处理结果的XML文档：

<%
 //可以采用清除缓存的方法（最好全写），如下
 response.setContentType("text/xml");
 response.setHeader("Cache-Control", "no-store"); //HTTP1.1 
 response.setHeader("Pragma", "no-cache"); //HTTP1.0
 response.setDateHeader("Expires", 0);
 response.getWriter().write("<msg>invalid</msg>");
%>