网站地图    收藏   

主页 > 前端 > javascript >

Ajax中的get和post用法差别介绍

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 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和POST的根本区别如下:

GET通过URL传递参数(以本文的动态地址 http://www.oncoding.cn/?p=480 为例),同时发送请求头,从服务器取得数据:

 代码如下 复制代码

GET /?p=480 HTTP/1.1

Host: www.oncoding.cn

Mozilla/5.0

….

POST也需要URL和请求头,同时需要额外发送数据到服务器,然后取得服务器响应,其数据格式如下:

POST /wp-login.php HTTP/1.1

Host: www.oncoding.cn

User-Agent: Mozilla/5.0

….

userid=admin&password=asdfg

GET和POST为什么有速度的差异?

POST比GET多出了一个发送数据的步骤,我们可以通过MIDP实现GET和POST的程序代码来理解这一个过程:

 代码如下 复制代码

// MIDP实现GET的过程(变量定义省略):
conn = (HttpConnection) Connector.open( url ); //建立连接
conn.setRequestProperty( "User-Agent", agent ); //设置请求头
 
int rc = conn.getResponseCode(); //取得响应
// ....
// MIDP实现POST的过程(encodedData为post数据):
conn = (HttpConnection) Connector.open( url ); //建立连接
conn.setRequestMethod( HttpConnection.POST ); //设置请求头
conn.setRequestProperty( "User-Agent", agent );
conn.setRequestProperty( "Content-Type", type );
conn.setRequestProperty( "Content-Length", 
                encodedData.length() );
 
OutputStream os = conn.openOutputStream(); //发送数据
os.write( encodedData.getBytes() );
 
int rc = conn.getResponseCode(); //取得响应


区别就是一个在 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 方式

 代码如下 复制代码
var postContent ="name=" + encodeURIComponent("xiaocheng") + "&email=" + encodeURIComponent("xiaochengf_21@yahoo.com.cn");
xmlhttp.open("GET", "somepage" + "?" + postContent, true);
xmlhttp.send(null);


POST 方式

 代码如下 复制代码

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

Ajax的GET与POST在速度上有多少差别

刚刚有老外写的一篇GET and POST Requests in AJAX,比较GET和POST在Ajax中的速度问题,写的洋洋洒洒,但通篇没有一点数据和理论,各浏览器的测试结果居然只有”Very slow”和”Fast”。。。

我们干脆自己写程序来测试一下,通过发送Ajax请求前和接收到Ajax数据后的时间差,来测试其速度的差异。使用了纯Javascript和jquery两种方式作比较。

测试DEMO在这里 | 下载测试程序包(请根据网速,酌情修改请求时间间隔,否则会引起混乱)

手头的几个浏览器测试了一下,PHP程序放在美国Dreamhost服务器上,通过山东电信网络测试结果如下:

Firefox 3.5

Chrome 4.0.266 Beta

IE8

虚拟机中的IE6:

虚拟机中的Firefox 2.0:

 

现在还浏览jquery啊,看看jquery get,post

jQuery中用于Ajax的$.get()和$.post()用法小结:
常用的load()方法通常可以用来从Web服务器上获取静态的数据文件,当属这并不能体现Ajax的全部特性。在实际的开发中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是后面要讲解到的$.ajax方法)。
注意:$.get()和$.post()方法是jQuery中的全局函数。前面讲到的load()方式是对jQuery对象进行操作的。
$.get()方法:
$.get()方法使用GET方式来进行异步请求。
它的语法结构为:
$.get( url [, data] [, callback] [, type] )
$.get()方法参数解释如下:
参数名称:url 类型:String 说明:请求的HTML页的URL地址
参数名称:data(可选) 类型:Object 说明:发送至服务器的key/value数据会作为QueryString附加到请求URL中
参数名称:callback(可选) 类型:Function 说明:载入成功时的回调函数(只有当Response的返回状态时success才调用该方法)自动将请求结果和状态传递给该方法
参数名称:type(可选) 类型:String 说明:服务器端返回内容的格式,包括xml、html、script、json、text和_default

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论