Ajax中Get和Post两种传值方式的异同

当我们不通过重新加载页面，用Ajax访问服务器的时候，有两个选择可以将请求信息传送到服务器上。这两个选择分别是GET和POST。

在把请求信息发送到服务器上以加载新的页面时，这两个选择有两个不同之处。第一个区别是你是请求了信息的一小部分而不是整个页面。第二个区别也是最明显的区别是由于Ajax请求不会出现在地址栏中，因此当发送请求时，在访问者的屏幕上是看不出什么异同的。使用GET生成调用不会暴露域和它们的值，使用POST也不会暴露。因此，我们要怎样在这两者之间作出选择呢?

初学者可能犯的一个错误是对于大多数的调用都使用GET命令，仅仅因为这一命令相对而言更容易编写。GET与POST调用之间最显著的差异是当发出加载新页面请求时，GET调用对于同样数量的数据有着相同的限制。唯一的区别是你处理的少量的Ajax请求数据，而你并不想通过这种长度运行的限制来完成页面的加载。初学者可能会在少数情况下，如他们确实需要传送更多信息时，使用POST。

当我们有大量数据要传送时最好的办法是一次发出多个只传递少量信息的Ajax调用时。如果你正用一个Ajax调用发送大量数据，那么最好是结束这种做法，因为这样做并不能节约时间。

因此，需要传送大量数据能成为我们在GET和POST之间犹豫不决的理由吗?这两个方法都是为不同的目的而设计的，两者的不同也在于其使用目的。这一说法不仅适用于GET和POST的使用，也适用于其他的方法。

GET的目的就如同其名字一样是用于获取信息的。它旨在显示出页面上你要阅读的信息。浏览器会缓冲GET请求的执行结果，如果同样的GET请求再次发出，浏览器就会显示缓冲的结果而不是重新运行整个请求。这一流程不同于浏览器的处理过程，但是它是有意设计成这样以使GET调用更有效率。GET调用会检索要显示在页面中的数据，数据不会在服务器上被更改，因此重新请求相同数据的时候会得到相同的结果。

POST方法应该用于你需要更新服务器信息的地方。如某调用要更改保存在服务器上的数据，而从两个同样的POST调用返回的结果或许会完全不同，因为第二个POST调用的值与第一个的值不相同，这是由于第一个调用已经更新了其中一些值。POST调用通常会从服务器上获取响应而不是保持前一个响应的缓冲。

因此，不要用数据的量来决定是要选择GET还是POST，而应该按照目的在两者间作出选择。如果调用是要检索服务器上的数据则使用GET。如果要检索的值会随时间和更新进程的改变而改变则要在GET调用中添加一个当前时间参数，这样后面的调用才不会使用先前的不正确的缓冲。如果调用是向服务器上发送任意数据，就可以使用POST。

事实上，我们不应该不仅仅只将这个标准作为选择怎样使用GET和POST调用的标准，在处理页面处理形式的时候也可以将它作为取舍这两个调用的标准。

Get 与 Post 的区别

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安全性较高。
  5. <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">是不一样的。

另外 Get请求有如下特性：它会将数据添加到URL中，通过这种方式传递到服务器，通常利用一个问号？代表URL地址的结尾与数据参数的开端，后面的参数每一个数据参数以“名称=值”的形式出现，参数与参数之间利用一个连接符&来区分。 Post请求有如下特性：数据是放在HTTP主体中的，其组织方式不只一种，有&连接方式，也有分割符方式，可隐藏参数，传递大批数据，比较方便。

通过以上的说明，现在我们大致了解了什么时候用get什么时候用post方式了吧，对!当我们在提交表单的时候我们通常用post方式，当我们要传送一个较大的数据文件时，需要用post。当传递的值只需用参数方式(这个值不大于2KB)的时候，用get方式即可。

现在我们再看看通过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 方式：

01 POST / HTTP/1.1
02 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*
03 Accept-Language: zh-cn
04 Content-Type: application/x-www-form-urlencoded
05 Accept-Encoding: gzip, deflate
06 User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)
07 Host: localhost
08 Content-Length: 28
09 Connection: Keep-Alive
10 username=%E5%BC%A0%E4%B8%89

区别就是一个在 URL 请求里面附带了表单参数和值, 一个是在 HTTP 请求的消息实体中。

比较一下上面的两段文字, 我们会发现 GET 方式把表单内容放在前面的请求头中, 而 POST 则把这些内容放在请求的主体中了, 同时 POST 中把请求的 Content-Type 头设置为 application/x-www-form-urlencoded. 而发送的正文都是一样的, 可以这样来构造一个表单提交正文: encodeURIComponent(arg1)=encodeURIComponent(value1)&encodeURIComponent(arg2)=encodeURIComponent(value2)&.....

注: encodeURIComponent 返回一个包含了 charstring 内容的新的 String 对象（Unicode 格式）， 所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替，其中 xx 等于表示该字符的十六进制数。 例如，空格返回的是 "%20" 。 字符的值大于 255 的用 %uxxxx 格式存储。参见 JavaScript 的 encodeURIComponent() 方法.

在了解了上面的内容后我们现在用ajax的XMLHttpRequest对象向服务器分别用GET和POST方式发送一些数据。

GET 方式

1 var postContent ="name=" + encodeURIComponent("xiaocheng") + "&email="
2     + encodeURIComponent("xiaochengf_21@yahoo.com.cn");
3 xmlhttp.open("GET", "somepage" + "?" + postContent, true);
4 xmlhttp.send(null);

POST 方式

1 var postContent ="name=" + encodeURIComponent("xiaocheng") + "&email="
2     + encodeURIComponent("xiaochengf_21@yahoo.com.cn");
3 xmlhttp.open("POST", "somepage", true);
4 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
5 //xmlhttp.setRequestHeader("Content-Type", "text/xml"); //如果发送的是一个xml文件
6 xmlhttp.send(postContent);

get方式

get方式是最为常见的，一般实现用户登录，修改密码用的都是get方式。

新建一html文档，body标签内容如下：

1 <body style="text-align: center">
2     <input type ="text" id ="txt" />
3     <br />
4     <input type ="button" value ="get方式回调"  onclick ="get()" />
5 </body>

js代码文件

01 var xhr=getXHR();//获得xmlhttprequest对象,getXHR函数的具体实现这里不给出，因为非常简单
02 function get()
03 {
04     var str=document.getElementById ("txt").value;
05     var url="PageAjax.aspx?argument="+escape(str);//编码str
06     xhr.open("get",url,true);
07     xhr.onreadystatechange=renew;
08     xhr.send(null);//不发送任何内容,因为url中包含了参数数据
09 }
10 function renew()
11 {
12     if (xhr.readystate==4)
13     {
14         if (xhr.status==200)
15         {
16             var response=xhr.responsetext;
17             var res=response.split('\n');
18             alert(res[0]);
19         }
20     }
21 }

服务器端PageAjax.aspx.cs文件代码如下

1 protected void Page_Load(object sender, EventArgs e)
2     {
3         if (Request["argument"] != null)
4         {
5             string res ="成功实现post方式回调！传入的参数是："+ Request["argument"].ToString()+"\n";
6             Response.Write(res);
7         }
8     }

到此一个简单的get方式回调完成。

post方式

由于get方式每次都要传入参数到url地址上，像用户名，密码之类的参数由于字符比较少，完全可以考虑这中传递方式，但是当有很多参数、并且参数的字符串值很长时（比如博客，你不可能把整篇博客的内容都以参数的方式传递到url上），这种方式就不好了，由于有了post方式的出现。

新建一html文档，body标签内容如下：

1 <textarea id="TextArea1" style="width: 323px; height: 76px"></textarea>
2     <br />
3     <input id="Button1" type="button" value="post方式回调" onclick="post()"/>

js代码文件

01 var xhr=getXHR();//获得xmlhttprequest对象,getXHR函数的具体实现这里不给出，因为非常简单
02 function post()
03 {
04     var str=document.getElementById ("TextArea1").value;
05     var poststr="arg="+str;
06     var url="PageAjax.aspx?time="+new Date();//加一时间戳,放置发回的数据是服务器缓存的数据
07     xhr.open("post",url,true);
08     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //告诉服务器发送的是文本
09     //xhr.setRequestHeader("Content-Type", "text/xml"); //告诉服务器发送的是一个xml文件
10     xhr.onreadystatechange=update;
11     xhr.send(poststr);//发送poststr数据到服务器
12 }
13 function update()
14 {
15     if (xhr.readystate==4)
16     {
17         if (xhr.status==200)
18         {
19             var response=xhr.responsetext;
20             var res=response.split('\n');
21             alert(res[0]);
22         }
23     }
24 }

服务器端PageAjax.aspx.cs文件代码如下

1 protected void Page_Load(object sender, EventArgs e)
2     {
3         if (Request["arg"] != null)
4         {
5             string res = "成功实现get方式回调！传入的参数是：" + Request["arg"].ToString() + "\n";
6             Response.Write(res);
7         }
8     }

到此一个简单的post方式回调完成。

Get 与 Post 的代码编写上的区别

view source
print?
01 ....... 
02 function createQueryString(){ 
03  var firstName = document.getElementById("firstName").value; 
04  var secName = document.getElementById("secName").value; 
05    
06  var querystring="firstName="+firstName+"&secName="+secName; 
07 } 
08    
09    
10 //GET方式 
11 function doRequestUsingGET(){ 
12    createXMLHttpRequest(); 
13    var queryString = "test.php?"; 
14    queryString= queryString + createQueryString()+"&timstamp="+newDate().getTime(); 
15    Ajax.onreadystatechange=handleStateChange; 
16    Ajax.open("GET",queryString,true); 
17    Ajax.send(null); 
18    
19 } 
20    
21 //POST方式 
22 function doRequestUsingPOST(){ 
23    createXMLHttpRequest(); 
24    
25   /* 注意以下代码与GET方式的区别 */ 
26    var url= "test.php?timstamp="+new Date().getTime(); 
27    // POST 需要定义发送的字符串
28    var queryString=createQueryString();
29    Ajax.open("POST",url,true); 
30    Ajax.onreadystatechange=handleStateChange; 
31    // POST 需要设置请求头部
32    Ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded") 
33    // 参数不为 null
34    Ajax.send(queryString); 
35    
36 } 
37    
38 function handleStateChange(){ 
39     if(Ajax.readyState==4){ 
40        if(Ajax.status==200){ .......}   //成功数据其它数据 
41     } 
42    
43 } 
44 ......
posted @ 2013-05-18 16:21  {前端开发}  阅读(448)  评论(0)  编辑  收藏  举报