Ajax的post方法的使用

zerofire

刚开始学Ajax，看到很多网上的代码都用Get方法提交参数，Tomcat默认ISO编码实在是让人头痛，对付乱码我都是用过滤器做字符编码过滤的，Get方法过滤器监听不到，所以我一直喜欢使用Post方法，下面对Ajax Get和Post方法做一对比

GET：
<mce:script type="text/javascript"><!--       var xmlHttpRequest;       function createXMLHttpRequest(){           try          {          // Firefox, Opera 8.0+, Safari           xmlHttpRequest=new XMLHttpRequest();           }        catch (e)           {           // Internet Explorer          try            {              xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");             }          catch (e)             {               try               {                 xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");                }             catch (e)                {                alert("您的浏览器不支持AJAX！");                return false;                }             }           }         }       //发送请求函数       function sendRequestPost(url,param){           createXMLHttpRequest();           xmlHttpRequest.open("GET",url+"?"+param,true);           xmlHttpRequest.onreadystatechange = processResponse;       }       //处理返回信息函数       function processResponse(){           if(xmlHttpRequest.readyState == 4){               if(xmlHttpRequest.status == 200){                   var res = xmlHttpRequest.responseText;                   window.alert(res);               }else{                   window.alert("请求页面异常");               }           }       }       //身份验证函数       function userCheck(){           var userName = document.loginForm.username.value;           var psw = document.loginForm.password.value;           if(userName == ""){               window.alert("用户名不能为空");               document.loginForm.username.focus();               return false;           }           else{               var url = "Servlet/userLogin_do";               var param = "userName="+userName+"&psw="+psw;               sendRequestPost(url,param);           }       }   // --></mce:script>  <mce:script type="text/javascript"><!--var xmlHttpRequest;function createXMLHttpRequest(){try    {   // Firefox, Opera 8.0+, Safari    xmlHttpRequest=new XMLHttpRequest();    } catch (e)    {  // Internet Explorer   try      {   xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");      }   catch (e)      {      try         {      xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");         }      catch (e)         {         alert("您的浏览器不支持AJAX！");         return false;         }      }    }}//发送请求函数function sendRequestPost(url,param){createXMLHttpRequest();xmlHttpRequest.open("GET",url+"?"+param,true);xmlHttpRequest.onreadystatechange = processResponse;}//处理返回信息函数function processResponse(){if(xmlHttpRequest.readyState == 4){if(xmlHttpRequest.status == 200){var res = xmlHttpRequest.responseText;window.alert(res);}else{window.alert("请求页面异常");}}}//身份验证函数function userCheck(){var userName = document.loginForm.username.value;var psw = document.loginForm.password.value;if(userName == ""){window.alert("用户名不能为空");document.loginForm.username.focus();return false;}else{var url = "Servlet/userLogin_do";var param = "userName="+userName+"&psw="+psw;sendRequestPost(url,param);}}// --></mce:script>
POST：<mce:script type="text/javascript"><!--       var xmlHttpRequest;       function createXMLHttpRequest(){           try          {          // Firefox, Opera 8.0+, Safari           xmlHttpRequest=new XMLHttpRequest();           }        catch (e)           {           // Internet Explorer          try            {              xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");             }          catch (e)             {               try               {                 xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");                }             catch (e)                {                alert("您的浏览器不支持AJAX！");                return false;                }             }           }         }       //发送请求函数       function sendRequestPost(url,param){           createXMLHttpRequest();           xmlHttpRequest.open("POST",url,true);           xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");           xmlHttpRequest.onreadystatechange = processResponse;           xmlHttpRequest.send(param);       }       //处理返回信息函数       function processResponse(){           if(xmlHttpRequest.readyState == 4){               if(xmlHttpRequest.status == 200){                   var res = xmlHttpRequest.responseText;                   window.alert(res);               }else{                   window.alert("请求页面异常");               }           }       }       //身份验证函数       function userCheck(){           var userName = document.loginForm.username.value;           var psw = document.loginForm.password.value;           if(userName == ""){               window.alert("用户名不能为空");               document.loginForm.username.focus();               return false;           }           else{               //var url = "Servlet/userLogin_do?userName="+userName+"&psw="+psw;               var url = "Servlet/userLogin_do";               var param = "userName="+userName+"&psw="+psw;               sendRequestPost(url,param);           }       }   // --></mce:script>  <mce:script type="text/javascript"><!--var xmlHttpRequest;function createXMLHttpRequest(){try    {   // Firefox, Opera 8.0+, Safari    xmlHttpRequest=new XMLHttpRequest();    } catch (e)    {  // Internet Explorer   try      {   xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");      }   catch (e)      {      try         {      xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");         }      catch (e)         {         alert("您的浏览器不支持AJAX！");         return false;         }      }    }}//发送请求函数function sendRequestPost(url,param){createXMLHttpRequest();xmlHttpRequest.open("POST",url,true);xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlHttpRequest.onreadystatechange = processResponse;xmlHttpRequest.send(param);}//处理返回信息函数function processResponse(){if(xmlHttpRequest.readyState == 4){if(xmlHttpRequest.status == 200){var res = xmlHttpRequest.responseText;window.alert(res);}else{window.alert("请求页面异常");}}}//身份验证函数function userCheck(){var userName = document.loginForm.username.value;var psw = document.loginForm.password.value;if(userName == ""){window.alert("用户名不能为空");document.loginForm.username.focus();return false;}else{//var url = "Servlet/userLogin_do?userName="+userName+"&psw="+psw;var url = "Servlet/userLogin_do";var param = "userName="+userName+"&psw="+psw;sendRequestPost(url,param);}}// --></mce:script>
可以发现，GET方法根据地址栏解析参数，post根据sendRequestPost(url,param);中的param字符串解析参数，重要的是POST方法中需要添加在open()；方法后需要添加xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");这句代码，不知道为什么，初学，加了就能传递参数了，日后研究。。。