AJAX 学习笔记[三] get 与post 模式的区别

如果是get 模式的请求，则将传递参数通过URL 地址发送到服务器端；

如果是post 模式的请求，则将传递参数通过send( ) 方法发送到服务器端（并且必须设置请求文件头）；

post 模式的代码如下：

 
    <scripttype="text/javascript"> 
   
    <!-- 
   
     varqueryString="firstName=xugang&birthday=1227"; 
   
     varurl="9-3.aspx?tiMetamp="+newDate().getTime(); 
   
    xmlHttp.open("POST",url); 
   
     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
   
     xmlHttp.send(queryString);//该语句负责发送数据 
   
    //--> 
   
    </script>

一个演示get 模式与post 模式区别的示例：

客户端（9-3.html）

代码示例：

 
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   
    <@H_403_339@html> 
   
    <@H_403_339@head> 
   
    <@H_403_339@title>GETVS.POST<@H_403_339@/title> 
   
    <script language="javascript"> 
   
    varxmlHttp; 
   
    functioncreateXMLHttpRequest(){ 
   
     if(window.ActiveXObject) 
   
       xmlHttp=newActiveXObject("Microsoft.XMLHttp"); 
   
     elseif(window.XMLHttpRequest) 
   
       xmlHttp=newXMLHttpRequest(); 
   
    } 
   
    functioncreateQueryString(){ 
   
     varfirstName=document.getElementById("firstName").value; 
   
     varbirthday=document.getElementById("birthday").value;  
   
     varqueryString="firstName="+firstName+"&birthday="+birthday; 
   
     returnencodeURI(encodeURI(queryString)); //两次编码解决中文乱码问题 
   
    } 
   
    //GET模式 
   
    functiondoRequestUsingGET(){ 
   
     createXMLHttpRequest(); 
   
     varqueryString="9-3.aspx?"; 
   
     queryString+=createQueryString()+"&timestamp="+newDate().getTime(); 
   
     xmlHttp.onreadystatechange=handleStateChange; 
   
     xmlHttp.open("GET",queryString); 
   
     xmlHttp.send(null); 
   
    } 
   
    //POST模式 
   
    functiondoRequestUsingPOST(){ 
   
     createXMLHttpRequest(); 
   
     varurl="9-3.aspx?timestamp="+newDate().getTime(); 
   
     varqueryString=createQueryString(); 
   
     xmlHttp.open("POST",url); 
   
     xmlHttp.onreadystatechange=handleStateChange; 
   
     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
   
     xmlHttp.send(queryString); 
   
    } 
   
    functionhandleStateChange(){ 
   
     if(xmlHttp.readyState==4&&xmlHttp.status==200){ 
   
       varresponseDiv=document.getElementById("serverResponse"); 
   
       responseDiv.innerHTML=decodeURI(xmlHttp.responseText); //解码 
   
     } 
   
    } 
   
    </script> 
   
    <@H_403_339@/head> 
   
    <@H_403_339@body> 
   
    <@H_403_339@h2>输入姓名和生日<@H_403_339@/h2> 
   
    <@H_403_339@form> 
   
     <@H_403_339@input type@H_403_339@="text" id@H_403_339@="firstName"@H_403_339@@H_403_339@/><@H_403_339@br> 
   
     <@H_403_339@input type@H_403_339@="text" id@H_403_339@="birthday"@H_403_339@@H_403_339@/> 
   
    <@H_403_339@/form> 
   
    <@H_403_339@form> 
   
     <@H_403_339@input type@H_403_339@="button" value@H_403_339@="GET" onclick@H_403_339@="doRequestUsingGET();"@H_403_339@@H_403_339@/><@H_403_339@br> 
   
     <@H_403_339@input type@H_403_339@="button" value@H_403_339@="POST" onclick@H_403_339@="doRequestUsingPOST();"@H_403_339@@H_403_339@/> 
   
    <@H_403_339@/form> 
   
    <@H_403_339@div id@H_403_339@="serverResponse"><@H_403_339@/div> 
   
    <@H_403_339@/body> 
   
    <@H_403_339@/html>

服务器端（9-3.aspx）

代码示例：

 
    <%@PageLanguage="C#"ContentType="text/html"ResponseEncoding="gb2312"%> 
   
    <%@ImportNamespace="System.Data"%> 
   
    <% 
   
     if(Request.HttpMethod=="POST") 
   
       Response.Write("POST:"+Request["firstName"]+",yourbirthdayis"+Request["birthday"]); 
   
     elseif(Request.HttpMethod=="GET") 
   
       Response.Write("GET:"+Request["firstName"]+",yourbirthdayis"+Request["birthday"]); 
   
    %>

通常在数据不多，并且不敏感的时候，使用get 模式的请求；

而数据量大，或者数据敏感的时候，使用post 模式的请求。

@H_301_1969@

作者：XuGang 网名：钢钢

出处：http://xugang.cnblogs.com

声明：本文版权归作者和博客园共有。转载时必须保留此段声明，且在文章页面明显位置给出原文连接地址

AJAX 学习笔记[三] get 与post 模式的区别

猜你在找的Ajax相关文章