ajax中get和post的说明及使用与区别


Posted in Javascript onDecember 23, 2012

以前没怎么仔细的研究过ajax,只是用到了就直接拿过来用,发现了问题再找解决方法.以下是我在找解决问题的过程中的一点小小的总结.

一.谈Ajax的Get和Post的区别
Get方式:
用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是,它会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如帐号和密码等。因此,在某些情况下,get方法会带来严重的安全性问题。
Post方式:
当使用POST方式时,浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器,而不是作为URL地址的参数进行传递,使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。
总之,GET方式传送数据量小,处理效率高,安全性低,会被缓存,而POST反之。

使用get方式需要注意
1 对于get请求(或凡涉及到url传递参数的),被传递的参数都要先经encodeURIComponent方法处理.例:var url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent
(content)+"&id=1" ;
使用Post方式需注意
1.设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量.通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")。例:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.参数是名/值一一对应的键值对,每对值用&号隔开.如 var name=abc&sex=man&age=18,注意var name=update.php?
abc&sex=man&age=18以及var name=?abc&sex=man&age=18的写法都是错误的;
3.参数在Send(参数)方法中发送,例: xmlHttp.send(name); 如果是get方式,直接 xmlHttp.send(null);
4.服务器端请求参数区分Get与Post。如果是get方式则$username = $_GET["username"]; 如果是post方式,则$username = $_POST["username"];

Post和Get 方法有如下区别:
1.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示。
2.Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的限制,只能传递大约1024字节.
3.Post顾名思义,就是为了将数据传送到服务器段,Get就是为了从服务器段取得数据.而Get之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据.Post的信息作为http请求的内容,而Get是在Http头部传输的。
get 方法用Request.QueryString["strName"]接收
post 方法用Request.Form["strName"] 接收
注意:
虽然两种提交方式可以统一用Request("strName")来获取提交数据,但是这样对程序效率有影响,不推荐使用。
一般来说,尽量避免使用Get方式提交表单,因为有可能会导致安全问题

AJAX乱码问题
产生乱码的原因:
1、xtmlhttp 返回的数据默认的字符编码是utf-8,如果客户端页面是gb2312或者其它编码数据就会产生乱码
2、post方法提交数据默认的字符编码是utf-8,如果服务器端是gb2312或其他编码数据就会产生乱码

解决办法有
1、若客户端是gb2312编码,则在服务器指定输出流编码
2、服务器端和客户端都使用utf-8编码
gb2312:header('Content-Type:text/html;charset=GB2312');
utf8:header('Content-Type:text/html;charset=utf-8');
注意:如果你已经按上面的方法做了,还是返回乱码的话,检查你的方式是否为get,对于get请求(或凡涉及到url传递参数的),被传递的参数都要先经encodeURIComponent方法处理.如果没有用encodeURIComponent处理的话,也会产生乱码.
下边是我找到的一个例子,因为写的不错就贴在这里了,自己写的比较简单,也不是很规范还是参考人家写的好了,呵呵!

var http_request = false; 
function makePOSTRequest(url, parameters) { 
http_request = false; 
if (window.XMLHttpRequest) { // Mozilla, Safari,... 
http_request = new XMLHttpRequest(); 
if (http_request.overrideMimeType) { 
// set type accordingly to anticipated content type 
//http_request.overrideMimeType('text/xml'); 
http_request.overrideMimeType('text/html'); 
} 
} else if (window.ActiveXObject) { // IE 
try { 
http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
} catch (e) { 
try { 
http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
} catch (e) {} 
} 
} 
if (!http_request) { 
alert('Cannot create XMLHTTP instance'); 
return false; 
} 
http_request.onreadystatechange = alertContents; 
http_request.open('POST', url, true); 
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
http_request.setRequestHeader("Content-length", parameters.length); 
http_request.setRequestHeader("Connection", "close"); 
http_request.send(parameters); 
} 
function alertContents() { 
if (http_request.readyState == 4) { 
if (http_request.status == 200) { 
//alert(http_request.responseText); 
result = http_request.responseText; 
document.getElementById('myspan').innerHTML = result; 
} else { 
alert('There was a problem with the request.'); 
} 
} 
} 
function get(obj) { 
var poststr = "mytextarea1=" + encodeURI( document.getElementById("mytextarea1").value ) + 
"&mytextarea2=" + encodeURI( document.getElementById("mytextarea2").value ); 
makePOSTRequest('post.php', poststr); 
}

post.php
<?print_r($_POST);?>一个超大文本框textarea里面有大量数据,ajax通过URL请求service返回结果,URL里面包含了各种参数,当然也包含之前的超大文本框的内容。 之前开发的时候一直用Firefox在调试,4000长度的字符串在textarea里面通过URL请求都是没有问题。 提交给测试的时候问题来了,测试人员在IE下面发现问题,textarea里面字符长度超过2000(大概数据)时,会报JS错误,ajax没有返回值给前台。 看原先代码:
function getJsonData(url) 
{ 
var ajax = Common.createXMLHttpRequest(); 
ajax.open("GET",url,false); 
ajax.send(null); 
try 
{ 
eval("var s = "+ajax.responseText); 
return s; 
} 
catch(e) 
{ 
return null; 
} 
} 
function getData(){ 
var url="BlacklistService.do?datas="+datasvalue; 
var result = getJsonData(url); 
}

网上google发现解决办法: 修改使用的XMLHttp的请求为POST,并且把参数和URL分离出来提交。 修改后代码如下:
function getJsonData(url,para) 
{ 
var ajax = Common.createXMLHttpRequest(); 
ajax.open("POST",url,false); 
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
ajax.send(para); 
try 
{ 
eval("var s = "+ajax.responseText); 
return s; 
} 
catch(e) 
{ 
return null; 
} 
} 
function getData(){ 
var url="BlacklistService.do"; 
var para="datas="+datasvalue; 
var result = getJsonData(url,para); 
}

================================
Ajax中的get和post两种请求方式的异同2008年10月04日 星期六 下午 02:37分析两种提交方式的异同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 /?username=%E5%BC%A0%E4%B8%89 HTTP/1.1 
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */* 
Accept-Language: zh-cn 
Accept-Encoding: gzip, deflate 
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322) 
Host: localhost 
Connection: Keep-Alive 
POST 方式: 
POST / HTTP/1.1 
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */* 
Accept-Language: zh-cn 
Content-Type: application/x-www-form-urlencoded 
Accept-Encoding: gzip, deflate 
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322) 
Host: localhost 
Content-Length: 28 
Connection: Keep-Alive 
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 方式

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的post方法的使用.
刚开始学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); 
} 
} 
// --></mce:script> 
<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); 
} 
} 
// --></mce:script>

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("POST",url,true); 
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form- 
urlencoded"); 
xmlHttpRequest.onreadystatechange = processResponse; 
xmlHttpRequest.send(param); 
} 
//处理返回信息函数 
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?userName="+userName+"&psw="+psw; 
var url = "Servlet/userLogin_do"; 
var param = "userName="+userName+"&psw="+psw; 
sendRequestPost(url,param); 
} 
} 
// --></mce:script> 
<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("POST",url,true); 
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www- 
form-urlencoded"); 
xmlHttpRequest.onreadystatechange = processResponse; 
xmlHttpRequest.send(param); 
} 
//处理返回信息函数 
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? 
userName="+userName+"&psw="+psw; 
var url = "Servlet/userLogin_do"; 
var param = "userName="+userName+"&psw="+psw; 
sendRequestPost(url,param); 
} 
} 
// --></mce:script>

可以发现,GET方法根据地址栏解析参数,post根据sendRequestPost(url,param);中的param字符串解析参数,重要的是POST方法中需要添加在open();方法后需要添加xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");这句代码,不知道为什么,初学,加了就能传递参数了,日后研究。
Javascript 相关文章推荐
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
javascript 全选与全取消功能的实现代码
Dec 23 #Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 #Javascript
javascript小数四舍五入多种方法实现
Dec 23 #Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 #Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 #Javascript
JavaScript执行效率与性能提升方案
Dec 21 #Javascript
JS实现图片预加载无需等待
Dec 21 #Javascript
You might like
一个数据采集类
2007/02/14 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
自制PHP框架之设计模式
2017/05/07 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
使用python生成目录树
2018/03/29 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
PyQt5实现画布小程序
2020/05/30 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
社区服务标语
2014/07/01 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
单位租房协议书范本
2014/12/04 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
go语言中http超时引发的事故解决
2021/06/02 Golang