Ajax中Get请求与Post请求的区别
Get请求和Post请求的区别
1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
2.使用Get请求发送数据量小,Post请求发送数据量大
例子
页面的HTML代码:
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 * 6 { 7 margin:8px; 8 } 9 </style> 10 </head> 11 <body> 12 <label for="txt_username"> 13 姓名:</label> 14 <input type="text" id="txt_username" /> 15 <br /> 16 <label for="txt_age"> 17 年龄:</label> 18 <input type="text" id="txt_age" /> 19 <br /> 20 <input type="button" value="GET" id="btn_get" onclick="btn_get_click();" /> 21 <input type="button" value="POST" id="btn_post" onclick="btn_post_click();" /> 22 <div id="result"> 23 </div> 24 </body> 25 </html
区别:
Get请求：
1 function btn_get_click() { 2 var xmlHttp = window.XMLHttpRequest ? 3 new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 4 5 var username = document.getElementById("txt_username").value; 6 var age = document.getElementById("txt_age").value; 7 8 //添加参数,以求每次访问不同的url,以避免缓存问题 9 xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent(username) 10 + "&age=" + encodeURIComponent(age) + "&random=" + Math.random()); 11 12 xmlHttp.onreadystatechange = function () { 13 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 14 document.getElementById("result").innerHTML = xmlHttp.responseText; 15 } 16 } 17 18 //发送请求,参数为null 19 xmlHttp.send(null); 20 }
Post请求：
1 function btn_post_click() { 2 var xmlHttp = window.XMLHttpRequest ? 3 new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 4 5 var username = document.getElementById("txt_username").value; 6 var age = document.getElementById("txt_age").value; 7 8 var data = "username=" + encodeURIComponent(username) 9 + "&age=" + encodeURIComponent(age); 10 11 //不用担心缓存问题 12 xmlHttp.open("post", "Server.aspx", true); 13 14 //必须设置,否则服务器端收不到参数 15 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 16 17 xmlHttp.onreadystatechange = function () { 18 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 19 document.getElementById("result").innerHTML = xmlHttp.responseText; 20 } 21 } 22 23 //发送请求,要data数据 24 xmlHttp.send(data); 25 }
区别:
1.get请求需注意缓存问题,post请求不需担心这个问题
2.post请求必须设置Content-Type值为application/x-form-www-urlencoded
3.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数
对于客户端代码中都请求的server.aspx,我们来看server.aspx.cs中的代码:
1 protected void Page_Load(object sender, EventArgs e) 2 { 3 string username = string.Empty; 4 int age = 0; 5 6 if (Request.HttpMethod.ToUpper().Equals("GET")) 7 { 8 username = Request.QueryString["username"]; 9 10 age = int.Parse(Request.QueryString["age"]); 11 } 12 else 13 { 14 username = Request.Form["username"]; 15 16 age = int.Parse(Request.Form["age"]); 17 } 18 19 Response.Clear(); 20 21 Response.Write("姓名:'" + username + "'<br/>年龄:" + age + "<br/>时间:'" + DateTime.Now.ToString() + "'"); 22 23 Response.End(); 24 }
此处,我们发现了get请求和post请求在服务器端的区别:
在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数.
关于服务器端获取数据,我们还可以使用一个通用的获取参数的方式即Request["username"],但是此方法存在一个问题,我们随后来讲.
下面,我们使用HttpWatch来看下,当使用get和post方式发送请求时,客户端究竟发送了什么,收到了什么.
对于get请求和post请求中的时间差,请不要在意,因为是在不同时间按下的get按钮和post按钮.
Get请求：
Post请求：
从请求的url可以看出,get请求是带着参数的,post请求的url则不带.
Get请求：
Post请求：
因为访问的是同一个服务器,所以从服务器获取的信息都是一致的.但是客户端发送的却不一样了.
Get请求：
Post请求：
从cache可以看出,get请求在发送后,即被缓存,而post请求时 never cached.
Get请求：
Post请求：
因为get请求的参数是在url中的,所以Query String中是有值的.而post请求则没有.
Get请求：
Post请求：
在Post Data里,因为get请求的字符串是在url中附带的,所以Post Data中无数据.
Get请求：
Post请求：
从服务器获取的内容都是一致的.
|
||||||||||||||
比较一下,get请求的url带参数,post请求的url不带参数.post请求是不会被缓存的.
现在,我们来思考另一个问题:
刚才我们说过,服务器在接受参数时,可以采用一个通用的方法,即:Request["username"]来接受参数此方式可以接受get和post请求发送的参数,那么,我们做个测试,在get请求中设置Content-Type,并且send方法中也发送了username=zhangsan,我们看看服务器究竟是返回什么值呢?修改服务器代码如下:
1 protected void Page_Load(object sender, EventArgs e) 2 { 3 string username = string.Empty; 4 int age = 0; 5 6 username = Request["username"]; 7 8 age = int.Parse(Request["age"]); 9 10 Response.Clear(); 11 12 Response.Write("姓名:'" + username + "'<br/>年龄:" + age + "<br/>时间:'" + DateTime.Now.ToString() + "'"); 13 14 Response.End(); 15 }
客户端中,修改btn_get_click()方法如下:
1 //直接输入张三作为username参数的值 2 xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent("张三") 3 + "&age=" + encodeURIComponent(age) + "&random=" + Math.random()); 4 5 //在get请求中添加Content-Type信息 6 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 7 8 ... 9 10 //发送请求,并附带username=zhangsan 11 xmlHttp.send(username = "zhangsan");
测试代码,结果输出的是"张三".
同样,紧接上面的代码,我们再来做另一个测试,修改post请求,给open方法的url加一个username参数,值为zhangsan.
xmlHttp.open("post", "Server.aspx?username=zhangsan", true);
此时,我们再来运行项目,服务器返回的结果是什么呢?此时我们发现出现的结果是zhangsan.
1 xmlHttp.open("post", "Server.aspx?username=zhangsan", true);
此时,我们再来运行项目,服务器返回的结果是什么呢?此时我们发现出现的结果是zhangsan.
当我们在get和post请求时,同时在url中、send方法的data中都放置了参数,为什么获取的总是url中的参数值呢?
答:在使用Request时,其会从QueryString,Form,ServerVariable中遍历一番,如果发现符合要求的数据,那么就会停止向后搜寻.所以,我们上例中获取的username实际上都是url中的username值.
何时使用Get请求,何时使用Post请求
Get请求的目的是给予服务器一些参数,以便从服务器获取列表.例如:list.aspx?page=1,表示获取第一页的数据
Post请求的目的是向服务器发送一些参数,例如form中的内容.
下面使用实例来表示Get请求和Post请求在发送同一段数据时的区别.
