初学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信息

 本文用 菊子曰发布