软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

一小时搞定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读取 未完待续!!!!