ajax中的get和post的区别

ajax参数中get和post的区别

get和post都是向服务器发送的一种请求,只是发送的机制不同。

两者最简单的区别

1、使用get请求时,参数在url中显示,而使用post方式,则不会显示出来get请求会将参数跟在url够进行传递,而post请求则是作为HTTP消息的实体内容发送给web服务器。当然在ajax请求中,这种区别对用户是不可见的。

2、使用get请求发送数据量小,只能传递大约1024字节。post请求发送数据量大,可以达到2M(理论上无限制)

3、get请求需注意缓存问题,post请求不需担心这个问题get方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。某种情况下,get方式会带来严重的安全问题。而post方式相对来说就可以避免这些问题 

使用get方式需要注意:

1、缓存 在url?后面链接一个随机数,时间戳

2、乱码  编码encodeURI

对于get请求,被传递的参数要先经encodeURIComponent方法处理,例如:xhr.open('get','2.get.php?username = '+encodeURIComponent(leo)+'&age=30&'+new Date().getTime(),true);即get传递参数需要拼接到url当中(new Date().getTime()是添加的时间戳)。

使用post方式需要注意:

1、数据放在send()里面作为参数传递。例:xhr.send('username=leo&age=30');

2、需要设置requestHeader的content-type为application/x-www-form-urlencoded申明发送的数据类型。例:xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

所以post没有缓存问题,也无需编码

那么如何选择get和post呢?

get请求的目的是给予服务器一些参数,以便从服务器获取列表.例如:list.aspx?page=1,表示获取第一页的数据

  • 如果调用是要检索服务器上的数据则使用get,另外需要注意的是,如果要检索的值会随时间和更新进程的改变而改变,则要在get调用中添加一个随机数或者时间戳,这样后面的调用才不会使用先前的不正确的缓存。与post相比,get更简单也更快,并且在大部分情况下都能用。

post请求的目的是向服务器发送一些参数

  • 无法使用缓存文件(更新服务器上的文件或数据库),使用post
  • 向服务器发送大量数据(post没有数据量限制),使用post
  • 发送包含未知字符的用户输入时,post比get更稳定也更可靠

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

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

get请求
oBtn.onclick = function() {
		
		var xhr = null;
		try {
			xhr = new XMLHttpRequest();
		} catch (e) {
			xhr = new ActiveXObject('Microsoft.XMLHTTP');
		}
		/*
			1.缓存 在url?后面连接一个随机数,时间戳
			2.乱码 编码encodeURI
		*/
		xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);
		xhr.send();
		
		xhr.onreadystatechange = function() {
			
			if ( xhr.readyState == 4 ) {
				if ( xhr.status == 200 ) {
					alert( xhr.responseText );
				} else {
					alert('出错了,Err:' + xhr.status);
				}
			}
			
		}
		
	}
post请求
oBtn.onclick = function() {
		
		var xhr = null;
		try {
			xhr = new XMLHttpRequest();
		} catch (e) {
			xhr = new ActiveXObject('Microsoft.XMLHTTP');
		}
		
		xhr.open('post','2.post.php',true);
		//post方式,数据放在send()里面作为参数传递
		xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
		//post没有缓存问题
		//无需编码
		xhr.send('username=刘伟&age=30');
		
		xhr.onreadystatechange = function() {
			
			if ( xhr.readyState == 4 ) {
				if ( xhr.status == 200 ) {
					alert( xhr.responseText );
				} else {
					alert('出错了,Err:' + xhr.status);
				}
			}
			
		}
		
	}



















 

  • 16
    点赞
  • 55
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值