Ajax异步请求-GET和POST

Ajax异步请求

一、整体概览：

二、异步请求有五步：

1.创建XMLHttpRequest对象

2.注册回调方法

3.设置和服务器端交互的相关参数

4.设置向服务器端发送的数据，启动和服务器端的交互

5.回调判断

三、GET与POST请求：

<!DOCTYPE html>
<html>
	<head>
		<Meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		var xmlhttp;
			function submit(){
				//1.创建XMLHttpRequest对象
				if(window.XMLHttpRequest){
					xmlhttp = new XMLHttpRequest();
					if(xmlhttp.overrideMimeType){
						xmlhttp.overrideMimeType("text/xml");
					}				
				}else if(window.ActiveXObject){
					//IE6，IE5，IE5.5
					var activexName = ["MSXML 2.XMLHTTP.6.0","MSXML 2.XMLHTTP.5.0","MSXML 2.XMLHTTP.4.0","MSXML 2.XMLHTTP.3.0","MSXML 2.XMLHTTP","Microsoft.XMLHTTP"];
					for(var i = 0; i< activexName.length; i++){
						try{
							var xmlhttp = new ActiveXObject(activexName[i]);
							break;
						}catch(e){
							
						}
					}
				}
				if(xmlhttp == undefined || xmlhttp == null){
					alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
					return;
				}				
				
				//2.注册回调方法
				xmlhttp.onreadystatechange = callback;
				
				//如何从文本框获取值--固定用法
				var userName = document.getElementById("UserName").value;
				
				/*
				 * GET交互方式
				//3.设置和服务器端交互的相应参数
				xmlhttp.open("GET","AJAX?name=" + userName,true);
				//4.设置向服务器端发送的数据，启动和服务器端的交互
				xmlhttp.send(null);
				*/
				
				//POST交互方式
				//3.设置和服务器端交互的相应参数
				xmlhttp.open("POST","AJAX",true);
				
				//POST方式交互所需要增加的代码
				xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				
				//4.设置向服务器端发送的数据，启动和服务器端的交互
				xmlhttp.send("name=" + userName);
			}
			
			function callback(){
				//5.判断服务器端交互是否完成，判断服务器端是否正确返回了数据
				if(xmlhttp.readyState == 4){
					//表示和服务器端的交互已经完成
					if(xmlhttp.status == 200){
						//表示服务器端响应代码是200，正确返回了数据
						//纯文本数据的接受方法
						var message = xmlhttp.responseText;
						
						//向div标签中填充文本内容的方法
						var div = document.getElementById("message");
						div.innerHTML = message;
					}
				}
			}
		</script>
	</head>
	<body>
		<input type="text" id="UserName" value="123"/>
		<input type="button" onclick="submit()" value="校验用户名" />
		<br />
		<div id="message"></div>
	</body>
</html>

注意：

1.不同浏览器建立该对象的方式不同：IE7，IE8，FireFox等直接newXMLHttpRequest()；IE6，IE5.5，IE5：通过ActiveXObject控件的名称通过newActiveXObject()方式。

2.open()方法最多可以有五个参数，其中头三个参数是必须的。

使用GET方式时，请求数据位于url链接中，后面的send()方法的参数直接写null；POST方式，open后面需要先调用setRequestHeader(),来设置Content-Type的值，然后调用send()，send的参数就是请求的数据。

3.设置回调函数，不要在函数名后加括号。

四、两者比较：

1.get方式可传送简单数据，数据追加到url中发送，也就是，浏览器将各个表单字段元素及其数据按照url参数的格式附加在请求行中的资源路径后面。会被客户端的浏览器缓存起来，带来严重的安全性问题。

2.post方式，浏览器把各表单字段元素及其数据作为http消息的实体内容发送给Web服务器，而不是url参数传递，用post方式传递的数据量比用get方式要大得多。

3.post请求必须设置Content-Type值为application/x-form-www-urlencoded

4.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数对于客户端代码中都请求的server.aspx

5.get请求的url带参数,post请求的url不带参数.post请求是不会被缓存的

五、何时使用Get请求，何时使用Post请求？

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

Post请求的目的是向服务器发送一些参数,例如form中的内容。所以当我们需要提交表单或传送较大的数据时，使用post请求；传递值需要用参数（大小不大于2KB）时，用get请求。

总结：

经验不足，请多多指教！

感谢您的阅读！

Ajax异步请求-GET和POST

相关文章