一小时搞定Ajax

 

 

一小时搞定Ajax，严重建议参考xmlhttp手册
传说中的Ajax,入门其实很容易。当然深入的东西就多了、了解其原理，学习就快多了。
原理：
  UI-->XMLHttpRequest-->Ajax engine-->server-->Ajax engine-->XMLHttpRequest-->UI
  其中Ajax engine是我们不能看到的、对于我们是透明层。所以我们可以理解为
  UI-->XMLHttpRequest-->server-->XMLHttpRequest-->UI

                  jsp                  servlet            jsp      
  
  1.我们利用javascript创建XMLHttpRequest对象
  2。调用XMLHttpRequest的open()方法，参数1 http请求方式 2：http服务 3：同步或者异步
  3： onreadystatechange 事件要相应的javascript函数，回调
  4： 发送请求 send（）
  5：onBlur="validate();
  6：添加Servlet 配置到容器
  7: 在servlet 添加相关的业务，把验证信息，写回客户端
   response.getWriter（）
  8: 用ajax 的异步功能
  9： 如何解决缓存
      在请求的url上加上时间戳
  10 ： 返回中文的问题
         response.setContentType("text/html");
       response.setCharacterEncoding("GB18030");
       也可以在filter里面添加
   
  11 : 通过post 提交（POST乱码问题，比较麻烦，2次解码）
       url ：为请求服务地址，后面不用带参数
       open：参数为 post
       在 send之前要设置xmlhttprquest 的requestHeader
      xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
      send ：要按照规则组串
 12：  当readState <4的时候xmlHttpRequest 取不到 status 属性值
       一般只有等于4的时候，servlet 与client的交互才结束。

jsp文件中对应代码段为

1.name文本输入框中onBlur="validate();"

2.javascript脚本（以上12条）

  var xmlhttp;
  function validate(){
  var name = document.getElementById("name").value
  if(name.length>=6){
   //创建XMLHttpRequest，ie和其他浏览器不一样，所以要区别一下
     if(window.ActiveXObject){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     } else if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
     }
    
    
//     var url = "admin/userValidateServlet.action?name="+name+"&tm="+new Date().getTime();//加个时间戳
//     //alert(url);
//     xmlhttp.open("Get",url,true);//打开连接用get方法，URL路径，同步
//     xmlhttp.onreadystatechange = callback;//状态改变时，调用callback方法
//     xmlhttp.send(null);//发送
//以上为get提交方法
           var url = "admin/userValidateServlet.action";
           xmlhttp.open("Post",url,true);
           xmlhttp.onreadystatechange = callback;
           xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
           xmlhttp.send("name="+name+"&password=123334");
          

     }
    
    
      //xmlhttp.onreadystatechange = callback;
  }
  
  
  function callback(){
  
    if(xmlhttp.readyState==4){//当状态变为4时
        //alert(xmlhttp.status);
        if(xmlhttp.status==200){
            var info = xmlhttp.responseText;//获得server传来的信息。
             document.getElementById("error_info").innerHTML=info;
         }   
            
     }
  // alert("callback");
  }
        
     
3.显示标签<span id="error_info"></span>

4.server端servlet

      response.getWriter().write("用户已存在");
          response.getWriter().flush();

重点注意：如果在一个页面上发起多个ajax的请求，要创建多个XmlHttpRequest 对象，否则会出现多线程的问题

最终显示的结果不用说自然就知道了

 

还有以xml读取 未完待续！！！！

评论

1 楼 magicyz 2009-05-25  

请问如何才能从将servlet的处理结果(有可能是一个ArrayList<Object>形式)传给jsp页面？？
最近正在做这方面，有很多不解！！
期待您的回答！