`
linhui_dragon
  • 浏览: 148214 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Ajax中Get请求与Post请求的区别

    博客分类:
  • AJAX
 
阅读更多

我们在使用Ajax时,当我们向服务器发送数据时,我们可以采用Get方式请求服务器,也可以使用Post方式请求服务器.那么,我们什么时候该采用Get方式,什么时候该采用Post方式呢?

Get请求和Post请求的区别
1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
2.使用Get请求发送数据量小,Post请求发送数据量大

例子:页面的HTML代码:
<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <style type="text/css">        *        {            margin:8px;        }    </style></head><body>    <label for="txt_username">        姓名:</label>    <input type="text" id="txt_username" />    <br />    <label for="txt_age">        年龄:</label>    <input type="text" id="txt_age" />    <br />    <input type="button" value="GET" id="btn_get" onclick="btn_get_click();" />    <input type="button" value="POST" id="btn_post" onclick="btn_post_click();" />    <div id="result">    </div></body></html>

区别:客户端脚本代码:Get请求
function btn_get_click() {    var xmlHttp = window.XMLHttpRequest ?         new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");    var username = document.getElementById("txt_username").value;    var age = document.getElementById("txt_age").value;    //添加参数,以求每次访问不同的url,以避免缓存问题    xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent(username)        + "&age=" + encodeURIComponent(age) + "&random=" + Math.random());    xmlHttp.onreadystatechange = function () {        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {            document.getElementById("result").innerHTML = xmlHttp.responseText;        }    }    //发送请求,参数为null    xmlHttp.send(null);} 

Post请求
function btn_post_click() {    var xmlHttp = window.XMLHttpRequest ?        new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");    var username = document.getElementById("txt_username").value;    var age = document.getElementById("txt_age").value;                var data = "username=" + encodeURIComponent(username)        + "&age=" + encodeURIComponent(age);    //不用担心缓存问题    xmlHttp.open("post", "Server.aspx", true);    //必须设置,否则服务器端收不到参数    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    xmlHttp.onreadystatechange = function () {        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {            document.getElementById("result").innerHTML = xmlHttp.responseText;        }    }    //发送请求,要data数据    xmlHttp.send(data);}

区别:

1.get请求需注意缓存问题,post请求不需担心这个问题

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

3.发送请求时,因为get请求的参数都在url里,所以send函数发送的参数为null,而post请求在使用send方法时,却需赋予其参数

对于客户端代码中都请求的server.aspx,我们来看server.aspx.cs中的代码:
protected void Page_Load(object sender, EventArgs e)
{
    string username = string.Empty;
    int age = 0;

    if (Request.HttpMethod.ToUpper().Equals("GET"))
    {
        username = Request.QueryString["username"];

        age = int.Parse(Request.QueryString["age"]);
    }
    else
    {
        username = Request.Form["username"];

        age = int.Parse(Request.Form["age"]);
    }

    Response.Clear();

    Response.Write("姓名:'" + username + "'<br/>年龄:" + age + "<br/>时间:'" + DateTime.Now.ToString() + "'");

    Response.End();
}
此处,我们发现了get请求和post请求在服务器端的区别:

在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数.

关于服务器端获取数据,我们还可以使用一个通用的获取参数的方式即Request["username"],但是此方法存在一个问题,我们随后来讲.

下面,我们使用HttpWatch来看下,当使用get和post方式发送请求时,客户端究竟发送了什么,收到了什么.

对于get请求和post请求中的时间差,请不要在意,因为是在不同时间按下的get按钮和post按钮.

从请求的url可以看出,get请求是带着参数的,post请求的url则不带.


从cache可以看出,get请求在发送后,即被缓存,而post请求时 never cached.

因为get请求的参数是在url中的,所以Query String中是有值的.而post请求则没有.

在Post Data里,因为get请求的字符串是在url中附带的,所以Post Data中无数据.

从服务器获取的内容都是一致的.

http://www.cnblogs.com/oneword/archive/2011/06/06/2073533.html
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics