Ajax的Get、Post方法的使用

最新推荐文章于 2023-05-20 19:23:38 发布

accpyy

最新推荐文章于 2023-05-20 19:23:38 发布

阅读量589

点赞数 1

分类专栏： AJAX 文章标签： ajax xmlhttprequest function url safari internet

AJAX 专栏收录该内容

10 篇文章

订阅专栏

本文对比分析了Ajax中GET和POST方法的实现原理及应用场景，重点介绍了如何通过POST方法发送请求，并强调了设置Content-Type的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚开始学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);
        }
    }

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("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);
  }
}

可以发现，GET方法根据地址栏解析参数，post根据sendRequestPost(url,param);中的param字符串解析参数，重要的是POST方法中需要添加在open()；方法后需要添加xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");这句代码，不知道为什么，初学，加了就能传递参数了，日后研究