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

时间  2019-12-13
标签 ajax 请求 post 区别 栏目 Ajax 繁體版
原文   原文链接

Get请求和Post请求的区别

1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来css

2.使用Get请求发送数据量小,Post请求发送数据量大html

例子

页面的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请求 Post请求
客户端脚
本
代
码		 
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);
}
 
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);
}

区别:app

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

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

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

对于客户端代码中都请求的server.aspx,咱们来看server.aspx.cs中的代码:post

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按钮.

  OverView
Get请求 image
Post请求 image

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

  Header
Get请求 image
Post请求 image

由于访问的是同一个服务器,因此从服务器获取的信息都是一致的.可是客户端发送的却不同了.

  Header
Get请求 image
Post请求 image

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

  Query String
Get请求 image
Post请求 image

由于get请求的参数是在url中的,因此Query String中是有值的.而post请求则没有.

  POST Data
Get请求 image
Post请求 image

在Post Data里,由于get请求的字符串是在url中附带的,因此Post Data中无数据.

  Content(从服务器获取的数据)
Get请求 image
Post请求 image

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

    Stream
Get请求 发送给服务器的

GET /AjaxWeb/Article7/Server.aspx?username=%E5%BC%A0%E4%B8%89&age=33&random=0.34838340505348675 HTTP/1.1
Accept: */*
Accept-Language: zh-cn
Referer: http://localhost/AjaxWeb/Article7/Ajax.htm
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.2; .NET4.0C; .NET4.0E)
Host: localhost
Connection: Keep-Alive
从服务器获取的

HTTP/1.1 200 OK
Date: Sun, 05 Jun 2011 15:36:27 GMT
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
X-AspNet-Version: 4.0.30319
Cache-Control: private
Content-Type: text/html; charset=utf-8
Content-Length: 60

濮撳悕:'寮犱笁'<br/>骞撮緞:33<br/>鏃堕棿:'2011-6-5 23:36:27'
Post请求 发送给服务器的

POST /AjaxWeb/Article7/Server.aspx HTTP/1.1
Accept: */*
Accept-Language: zh-cn
Referer: http://localhost/AjaxWeb/Article7/Ajax.htm
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.2; .NET4.0C; .NET4.0E)
Host: localhost
Content-Length: 34
Connection: Keep-Alive
Cache-Control: no-cache

username=%E5%BC%A0%E4%B8%89&age=33
从服务器获取的

HTTP/1.1 200 OK
Date: Sun, 05 Jun 2011 15:47:39 GMT
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
X-AspNet-Version: 4.0.30319
Cache-Control: private
Content-Type: text/html; charset=utf-8
Content-Length: 60

濮撳悕:'寮犱笁'<br/>骞撮緞:33<br/>鏃堕棿:'2011-6-5 23:47:39'

比较一下,get请求的url带参数,post请求的url不带参数.post请求是不会被缓存的.

如今,咱们来思考另外一个问题:

刚才咱们说过,服务器在接受参数时,能够采用一个通用的方法,即:Request["username"]来接受参数此方式能够接受get和post请求发送的参数,那么,咱们作个测试,在get请求中设置Content-Type,而且send方法中也发送了username=zhangsan,咱们看看服务器到底是返回什么值呢?修改服务器代码以下:

protected void Page_Load(object sender, EventArgs e)
{
    string username = string.Empty;
    int age = 0;

    username = Request["username"];

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

    Response.Clear();

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

    Response.End();
}

客户端中,修改btn_get_click()方法以下:

//直接输入张三做为username参数的值
xmlHttp.open("get", "Server.aspx?username=" + encodeURIComponent("张三")
    + "&age=" + encodeURIComponent(age) + "&random=" + Math.random());

//在get请求中添加Content-Type信息
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

...

//发送请求,并附带username=zhangsan
xmlHttp.send(username = "zhangsan");

测试代码,结果输出的是"张三".

一样,紧接上面的代码,咱们再来作另外一个测试,修改post请求,给open方法的url加一个username参数,值为zhangsan.

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请求在发送同一段数据时的区别.

 

转摘：http://www.cnblogs.com/oneword/archive/2011/06/06/2073533.html

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程