初学Ajax和jQuery

以最简单的登陆为例

基本上form是相同的，没做过美工的活真痛苦......

   

  

  

    账号:
   

    密码:
   

    管理员
    普通成员

   
   
   

   

Ajax

创建XMLHttpRequest对象：

function createXMLHttpRequest(){
        if(window.ActiveXObject){
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }
    }   

获取表单元素值：

    var account = document.getElementById("account").value;    
     var password = document.getElementById("password").value;
     var type = document.getElementsByName("type");

   //对于radio元素作如下操作取值（应该有更简便方法）

     var typeid;
      for(var i = 0; i < type.length; i++)
      {
          if(type[i].checked)
         typeid=i;
      }

设置post方法向后台传值：

    var queryString = "account="+account+"&password="+password+"&type="+typeid+"";

      //实验证明路径不处理不行啊- -

    var localObj = window.location;
      var contextPath = localObj.pathname.split("/")[1];
      var basePath = localObj.protocol+"//"+localObj.host+"/"+contextPath;
      var server_context=basePath;

       //下面才是重点

      xhr.onreadystatechange = handleStateChange;
      xhr.open("POST",server_context+"/AjaxLogin",true);

       //post方法需要用，否则值传不到后台

      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");

      xhr.send(queryString);

       //有关的JavaScript处理函数

   function handleStateChange(){
       if(xhr.readyState == 4){
        if(xhr.status == 200){
         parseResults();
        }
       }
   }
   function parseResults(){
       var responseDiv = document.getElementById("serveResponse");
       responseDiv.innerHTML = xhr.responseText;
   }

jQuery

有关jQuery的引入，在这里吃过亏

    <script language="javascript" src="../js/jquery.min.js"></script>//务必注意"../"表示的是你的webroot目录
    <script language="javascript" src="../js/jquery.form.js"></script>

目前我的理解jQuery就是对Ajax的简化，故只写他的简化函数

获取元素值：

    var account = $("#account").val();
     var password = $("#password").val();
     var typeid = $("input[@type=radio][checked]").val();

//post方法目前还有问题

   $.post(server_context+"/AjaxLogin",queryString,
        function(data){
         $("#serveResponse").html(decodeURI(data))}
         )

基本的servlet的web.xml文件配置就不用多说了吧~

后台用out.print();来输出response信息

 本文用 菊子曰发布