夏日博客

A-A+

Ajax get和post区别介绍

2016年01月21日 前端设计 暂无评论 阅读 6 views 次

Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别.

1、 get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

2、 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。

3、get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，因服务器的不同而异.

4、get安全性非常低，post安全性较高。

  1. <form method="get" action="a.asp?b=b">跟<form method="get" action="a.asp">是一样的，也就是说，method为get时action页面后边带的参数列表会被忽视；而<form method="post" action="a.asp?b=b">跟<form method="post" action="a.asp">是不一样的.  

学习 Ajax 的 Post,程序效果请参看 Ajax 的 Post 传值,代码如下:

  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>Ajax Post 传值</title>  
  5. </head>  
  6. <script language="javascript">  
  7. function saveUserInfo()  
  8. {  
  9.  //获取接受返回信息层  
  10.  var msg = document.getElementById("msg");  
  11.  //获取表单对象和用户信息值  
  12.  var f = document.user_info;  
  13.  var userName = f.user_name.value;  
  14.  var userAge   = f.user_age.value;  
  15.  var userSex   = f.user_sex.value;  
  16.  //接收表单的URL地址  
  17.  var url = "ajax_output1.php";  
  18.  //需要POST的值，把每个变量都通过&来联接  
  19.  var postStr   = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;  
  20.  //实例化Ajax  
  21.  //var ajax = InitAjax();  
  22.   
  23.  var ajax = false;  
  24.  //开始初始化XMLHttpRequest对象  
  25.  if(window.XMLHttpRequest)   
  26.  {  //Mozilla 浏览器  
  27.   ajax = new XMLHttpRequest();  
  28.         if (ajax.overrideMimeType)   
  29.   { //设置MiME类别  
  30.             ajax.overrideMimeType("text/xml");  
  31.         }  
  32.  }  
  33.  else if (window.ActiveXObject)   
  34.  {  // IE浏览器  
  35.   try   
  36.   {  
  37.    ajax = new ActiveXObject("Msxml2.XMLHTTP");  
  38.      }   
  39.   catch (e)   
  40.   {  
  41.          try   
  42.    {  
  43.              ajax = new ActiveXObject("Microsoft.XMLHTTP");  
  44.             }   
  45.    catch (e) {}  
  46.          }  
  47.  }  
  48.     if (!ajax)   
  49.  {  // 异常，创建对象实例失败  
  50.   window.alert("不能创建XMLHttpRequest对象实例.");  
  51.   return false;  
  52.  }  
  53.  //通过Post方式打开连接  
  54.  ajax.open("POST", url, true);  
  55.  //定义传输的文件HTTP头信息  
  56.  ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
  57.  //发送POST数据  
  58.  ajax.send(postStr);  
  59.  //获取执行状态  
  60.  ajax.onreadystatechange = function()   
  61.  {   
  62.      //如果执行状态成功，那么就把返回信息写到指定的层里  
  63.      if (ajax.readyState == 4 && ajax.status == 200)   
  64.   {   
  65.       msg.innerHTML = ajax.responseText;   
  66.      }   
  67.  }   
  68. }  
  69. </script>  
  70. <body >  
  71. <div id="msg"></div>  
  72. <form name="user_info" method="post" action="">  
  73. 姓名：<input type="text" name="user_name" /><br />  
  74. 年龄：<input type="text" name="user_age" /><br />  
  75. 性别：<input type="text" name="user_sex" /><br />  
  76. <input type="button" value="提交表单" onClick="saveUserInfo()">  
  77. </form>  
  78. </body>  
  79. </html>  
  80. 然后是 Ajax 的 Get，用途是从服务器获取值。  
  81. 程序效果请参看 Ajax 的 Get 传值。  
  82.  代码如下   复制代码  
  83. <html>  
  84. <head>  
  85. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  86. <title>Ajax Get 传值</title>  
  87. </head>  
  88. <script language="javascript">  
  89. function saveUserInfo()  
  90. {  
  91.  //获取接受返回信息层  
  92.  var msg = document.getElementById("msg");  
  93.  //获取表单对象和用户信息值  
  94.  var f = document.user_info;  
  95.  var userName  = f.user_name.value;  
  96.  var userAge   = f.user_age.value;  
  97.  var userSex   = f.user_sex.value;  
  98.  //接收表单的URL地址  
  99.  var url = "ajax_output2.php? user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;  
  100.  //实例化Ajax  
  101.  //var ajax = InitAjax();  
  102.  var ajax = false;  
  103.  //开始初始化XMLHttpRequest对象  
  104.  if(window.XMLHttpRequest)   
  105.  {   
  106.   //Mozilla 浏览器  
  107.         ajax = new XMLHttpRequest();  
  108.         if (ajax.overrideMimeType)   
  109.   {//设置MiME类别  
  110.          ajax.overrideMimeType("text/xml");  
  111.   }  
  112.  }  
  113.  else if (window.ActiveXObject)   
  114.  {  // IE浏览器  
  115.      try   
  116.   {  
  117.          ajax = new ActiveXObject("Msxml2.XMLHTTP");  
  118.         }   
  119.   catch (e)   
  120.   {  
  121.    try   
  122.    {  
  123.              ajax = new ActiveXObject("Microsoft.XMLHTTP");  
  124.             } catch (e) {}  
  125.         }  
  126.  }  
  127.     if (!ajax)   
  128.  {    
  129.   // 异常，创建对象实例失败  
  130.         window.alert("不能创建XMLHttpRequest对象实例.");  
  131.         return false;  
  132.     }                
  133.  //通过Post方式打开连接  
  134.  ajax.open("GET", url, true);  
  135.  //发送GET数据,已经在URL中赋了值所以send那里只要加个空参.  
  136.  ajax.send(null);  
  137.  //获取执行状态  
  138.  ajax.onreadystatechange = function()   
  139.  {   
  140.      //如果执行状态成功，那么就把返回信息写到指定的层里  
  141.      if (ajax.readyState == 4 && ajax.status == 200)   
  142.   {   
  143.       msg.innerHTML = ajax.responseText;   
  144.      }   
  145.  }   
  146. }  
  147. </script>  
  148. <body>  
  149. <div id="msg"></div>  
  150. <form name="user_info" method="post" action="">  
  151. <input type="text" name="user_name" style="display:none;" />  
  152. <input type="text" name="user_age" style="display:none;" />  
  153. <input type="text" name="user_sex" style="display:none;" />  
  154. <input type="button" value="获取服务器变量" onClick="saveUserInfo()">  
  155. </form>  
  156. </body>  

ajax_output2.php,代码如下:

  1. <?  
  2.   $user_name = "Gonn";  
  3.   echo $user_name;  
  4.   $user_age = "24";  
  5.   echo $user_age;  
  6.   $user_sex = "Man";  
  7.   echo $user_sex;  
  8. ?>  



总结:

现在我们再看看通过URL发送请求时,get方式和post方式的区别,用下面的例子可以很容易的看到同样的数据通过GET和POST来发送的区别,发送的数据是 username=张三:GET 方式,浏览器键入 http://localhost?username=张三,代码如下:

  1. GET /?username=%E5%BC%A0%E4%B8%89 HTTP/1.1  
  2. Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*  
  3. Accept-Language: zh-cn  
  4. Accept-Encoding: gzip, deflate  
  5. User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)  
  6. Host: localhost  
  7. Connection: Keep-Alive  

POST 方式,代码如下:

  1. POST / HTTP/1.1  
  2. Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*  
  3. Accept-Language: zh-cn  
  4. Content-Type: application/x-www-form-urlencoded  
  5. Accept-Encoding: gzip, deflate  
  6. User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)  
  7. Host: localhost  
  8. Content-Length: 28  
  9. Connection: Keep-Alive  
  10. username=%E5%BC%A0%E4%B8%89  
标签：

给我留言