告诉你AJAX怎么玩

千言万语也无法详尽的描述ajax的魅力，那就先下水试试吧（临渊羡鱼，不如退而结网）

下面就结合这样一个案例来体验一下，需求是：用ajax实现网站用户唯一性校验。描述如下：

1.打开一个网站页面，输入用户名，点击校验按钮。

2.系统收到信息后进行比较判断，如果存在，则在当前页面提示“用户帐户信息已存在”，否则，提示“用户帐户可用”。

这里，客户端就要用到ajax，服务器我们用Servlet来实现。

首先，设计一个html页面,命名为accountCheck.html,具体代码见附件
其中,页面上有一个输入框,名称叫做accountNo,在输入框的旁边有一个div标签,它是做什么的呢?对了,它就是用于动态的显示我们的提示信息用的.按照web开发的原理,要想触发实践,在我们的实例中必须在按钮上加上onclick事件触发动作,而当单击事件发生后,则去执行我们的js函数checkAccount()(是不是弱智了点啊,觉得土的话,接着往下看,下面就是传说中的javascript)

 

 <script>
 var http_request;
 
 /*按钮点击时触发checkAccount函数*/
 function checkAccount(){
  var account = document.getElementById("accountNo");
  var serverUrl = "CheckAccountServlet";
  var requestMethod = "post";
  var requestData = "account="+account.value;
  sendRequestByAjax(requestMethod,serverUrl,requestData,doResponse);
 }
 
 /*具体负责处理服务器返回数据的函数*/
 function doResponse(){
  //当服务器将数据返回给客户端时,readyState状态值为4
 
  if(http_request.readyState==4){ 
   //当服务器返回的数据是正常的数据时,status状态值为200
  
   if(http_request.status==200){
    //通过XMLHttpRequest对象的responseText属性获取
    //服务器返回的文本信息
       var returnMsg = http_request.responseText;
       showMessage(returnMsg);
   }
  
  }
 }
 
 /*用ajax方式发送数据到url指定的服务器地址上*/
 function sendRequestByAjax(method,url,data,dataHandler){
 
  //获取XMLHttpRequest对象
 
  http_request = getAjaxObject();
 
  //设置当服务器数据返回后,处理服务器返回数据的js函数
  //这里处理函数名称是以参数形式给出
 
  http_request.onreadystatechange = dataHandler;
 
  //与指定的url地址建立连接
  //第一个参数可以选择传递为Post或者Get,表示请求方式
  //第二个参数表示请求的服务器地址
  //第三个参数如果为true,表示只有建立连接成功后才执行后面的js代码
  //如果为false,则相反
 
  http_request.open(method,url,true);
 
  //如果是以post方式发送数据,则必须加上如下代码,否则服务器将会收不到数据
  //setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
 
  if("post"==method.toLowerCase()){
   http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  }
  //真正发送数据
  //如果method指定是Get方式发送数据,则这里send函数参数data=null
  //如果method指定是Post方式发送数据,则这里send函数参数
  //具体的数据data(参数data的数据格式为:name=zhang&money=10000)
 
  http_request.send(data);
 }
 
 /*
 *最终目的只有一个,就是获得XMLHttpRequest对象(只有有了它以后,
 *才能以ajax方式发送请求数据)
 *函数内部的实现代码是为了兼容不同浏览器类型
 */
 function getAjaxObject(){
   var xmlHttpRequest;
   if(window.XMLHttpRequest){//Mozilla,IE7.0
  xmlHttpRequest = new XMLHttpRequest();
  if(xmlHttpRequest.overrideMimeType){
   xmlHttpRequest.overrideMimeType("text/xml");
  }
   }else if(window.ActiveXObject){//IE
  try{
    xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
    try{
   xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
     }catch(e){}
  }
   }
   return xmlHttpRequest;
 }
 
 /*显示服务器返回的信息到div标记中*/
 function showMessage(message){
  //根据id获取div元素对象
  var msgDiv = document.getElementById("msg");
  //通过设置div元素的innerHTML属性来完成信息的显示
  msgDiv.innerHTML = message;
 }
 </script>

够你看的了吧,慢慢看,每一个函数都有详细的注释,希望你能成为ajax高手.

哦,你已经看懂了吗?如果看懂了,把如上代码copy到accountCheck.html的标签之内,至此客户端的代码已经ok.

接下来,我们再来看看服务器端代码如何编写,前文已经说过,服务器端我们用Servlet来实现.具体代码如下:

public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  doPost(request,response);
 }

 /**
  * The doPost method of the servlet.

  *
  * This method is called when a form has its tag value method equals to post.
  *
  * @param request the request send by the client to the server
  * @param response the response send by the server to the client
  * @throws ServletException if an error occurred
  * @throws IOException if an error occurred
  */
 public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  //获取客户端请求帐户数据
  String accountNo = request.getParameter("account");
  //如果输出信息中包含中文信息,则需要设置字符集编码为gb2312
  //否则,客户端收到的信息将会是乱码
  response.setContentType("text/html;charset=gb2312");
  //设置响应报文头,使浏览器不做数据缓存
  response.setHeader("Cache-Control","no-cache");
  PrintWriter out = response.getWriter();
  if("zhangsan".equalsIgnoreCase(accountNo)){
   out.println("用户帐户信息已存在");
  }else{
   out.println("用户帐户可用");
  }
  //信息输出完成后,关闭输出流
  out.close();
 }

OK,现在我们终于可以歇口气来看看我们的成果啦.我将本文的全部代码以附件的形式附上,望大家测试评判!