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

原文

写在前面的话

我们在使用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请求 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");
区别: 
 
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按钮.
 
 



  
     OverView 
   



 Get请求
 
     
 
   



 Post请求
 
     
 
   




 

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

 

 
 



  
     Header 
   



 Get请求
 
     
 
   



 Post请求
 
      
 
因为访问的是同一个服务器,所以从服务器获取的信息都是一致的.但是客户端发送的却不一样了.
 
 

 
 



  
     Header 
   



 Get请求
 
     
 
   



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

 
 



  
     Query String 
   



 Get请求
 
     
 
   



 Post请求
 
     
 
   




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

 

 
 



  
     POST Data 
   



 Get请求
 
     
 
   



 Post请求
 
     
 
   




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

 

 
 



  
     Content(从服务器获取的数据) 
   



 Get请求
 
     
 
   



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

 
 



  
      
     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,我们看看服务器究竟是返回什么值呢?修改服务器代码如下:
 

 

EventArgs e)
{
    string username = string.Empty;
    int age = 0;

    username = Request["username"];

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

    Response.Clear();

    Response.Write( 
 
客户端中,修改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");

...

"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
 



总结


以上是DEVMAX为你收集整理的Ajax中Get请求与Post请求的区别全部内容。


如果觉得DEVMAX网站内容还不错，欢迎将DEVMAX网站推荐给好友。






学会iframe并用其解决跨域问题


我们设置了一个名为ifr，宽为600，高为400，显示边框，隐藏滑动条，显示文档为b站（也可以选择本地html文档）的内联框架。我们可以在iframe标签中写上文字说明，因为有一些低版本浏览器不支持这个标签，显示不了文档的时候就会在页面显示我们写的文字。父页面通过iframe嵌入子页面，通过iframe.contentWindow获取子页面的window,即可操作子页面，子页面通过parent.window和parent来访问父页面的window。src:规定在  中显示的文档的 URL。...






【Ajax】全面详细了解git的基础操作【万字教学+面试常客】


Git是一个开源的分布式版本控制系统，是目前世界上最先进，最流行的版本控制系统。可以快速高效地处理从很小到非常大的项目版本管理。特点：项目越大越复杂，协同开发者越多，越能体现出Git的高性能和高可用性。






什么是Ajax？


AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。Ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页






基于Vue、Axios、Node.js的图书管理系统【网页前端高级编程】


基于Vue、Ajax、Node.js的图书管理系统，网页前端高级编程实现了在网页上进行增删改查,web与后端的数据交互模拟。适合初学者前端入门,适合期末网页前端课程设计实践。欢迎大家积极阅读，如有不足请及时批评指出。...






Ajax简介与基本使用


本文为Ajax简介与基本使用相关知识，首先将对Ajax进行简介（包含：什么是Ajax、Ajax的作用、Ajax的好处），然后介绍JS方式Ajax的实现（包含发送 Ajax 请求的五个步骤、创建 XMLHttpRequest 对象、向服务器发送请求、服务器响应等），最后介绍jQuery框架中的Ajax（具体包含：jQuery框架的Ajax简介、$.ajax()方法、$.get()方法、$.post()方法等）。






b站黑马JavaScript的Ajax案例代码——聊天机器人案例


b站黑马JavaScript的Ajax案例代码——聊天机器人案例。该案例需要更换视频中老师的两个接口为本文中新的两个接口。！！！本文内含有有声音的效果展示视频，播放的时候注意音量！！！






Ajax实现前后端交互效果


一眼看中的Ajax






Filter&Listener&Ajax的介绍


▶ 概述`AJAX` (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。概念中的`JavaScript` 表明该技术和前端相关；`XML` 是指以此进行数据交换。▶ 作用AJAX 作用有以下两方面：▷ 1. 与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。














    

  • • 学会iframe并用其解决跨域问题
    • 

  • • 【Ajax】全面详细了解git的基础操作【万
    • 

  • • 什么是Ajax？
    • 

  • • 基于Vue、Axios、Node.js的图书管理系统
    • 

  • • Ajax简介与基本使用
    • 

  • • b站黑马JavaScript的Ajax案例代码——聊
    • 

  • • Ajax实现前后端交互效果
    • 

  • • Filter&Listener&Ajax的介绍
    • 

  • • 第一节：ExtJS调用WCF系列-----实现JSO
    • 

  • • Asp.Net开发架构设计二
    • 








HTMLreactjsCSSNode.jsangulartypescriptvue.jsreact-natispringkotlinAPIseleniumtensorflowbashangularJSexpressxcodematplotlibflaskHibernatedictionaryrailscocoswebnpmreact-hookmongoosegoogle-appformswpfRestwebpackunit-testihttpclassfileNext.jsJsHTML5bootstrap-

Ajax中Get请求与Post请求的区别的更多相关文章

  1. ios – 将视频分享到Facebook

    我正在编写一个简单的测试应用程序,用于将视频从iOS上传到Facebook.由于FacebookSDK的所有文档都在Objective-C中,因此我发现很难在线找到有关如何使用Swift执行此操作的示例/教程.到目前为止我有这个在我的UI上放置一个共享按钮,但它看起来已禁用,从我读到的这是因为没有内容设置,但我看不出这是怎么可能的.我的getVideoURL()函数返回一个NSURL,它肯定包含视

  2. ios – 错误域= NSURLErrorDomain代码= -1003“找不到具有指定主机名的服务器

    当我尝试在设备上运行应用程序时出现此错误.当我在模拟器上运行它并且post请求正常工作时,我没有收到此错误.这是我的代码片段：任何帮助表示赞赏.谢谢解决方法此错误通常会提示DNS相关问题.检查设备上的DNS设置并确认您可以使用Safari或其他浏览器浏览互联网.如果有一个url,你可以在同一台服务器上获取,尝试直接在设备上的Safari中访问它.

  3. ios – Xcode Bot：如何在post触发器脚本上获得.ipa路径？

    我正在使用机器人来存档iOS应用程序,我需要获取.ipa产品路径才能将其发布到我们的分发系统中.机器人设置：并使用脚本打印所有env变量,其中不包含ipa文件的路径.此外,一些变量指向不存在的目录,即：XCS_OUTPUT_DIR这里的env变量输出：除此之外,我还能够确认.ipa文件是在另一个文件夹中创建的(/IntegrationAssets//

  4. ios – 使用CocoaPods post install hook将自定义路径添加到HEADER_SEARCH_PATHS

    解决方法在Podfile中定义一个方法：然后在post_install中调用该方法：

  5. iOS7 Safari中的全屏模式

    我正在使用SenchaTouch开发移动网站.在iOS7Safari中,我无法创建顶级地址栏和下面的工具栏消失了.Sencha过去常常处理iOS6,但iOS7最近的一些变化导致了这个问题.http://java.dzone.com/articles/safari-ios-7-and-html5我阅读了上面的链接&对于HTML5游戏而言,这似乎也是一个问题.一些其他应用程序.适用于iOS6的旧win

  6. ios – 如何使用新的Apple Swift语言发布JSON

    本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至dio@foxmail.com举报，一经查实，本站将立刻删除。

  7. ios – POST请求使用application / x-www-form-urlencoded

    后端开发人员在POST请求中给出了这些说明：>路线：{url}/{app_name/{controller}/{action}控制器和动作应该是小帽子.>API测试链接：http：****************>请求应该使用POST方法.>参数应通过请求内容体(FormUrlEncodedContent)传递.>参数应该是json格式.>参数是关键的.在协议中没有经验5,我搜索并结束了我的代码.

  8. 从iOS应用程序发送帖子到PHP脚本不工作…简单的解决方案就像

    我之前已经做了好几次了但是由于某些原因我无法通过这个帖子…我尝试了设置为_POST且没有的变量的PHP脚本……当它们未设置为发布时它工作精细.这是我的iOS代码：这里是PHP的一大块,POST变量不在正确的位置？我想这对于更有经验的开发人员来说是一个相当简单的答案,感谢您的帮助！解决方法$_POST是一个数组,而不是一个函数.您需要使用方括号来访问数组索引：

  9. ios – 在HTTPBody中设置NSDictionary并使用POST方法发送

    我想用POST方法调用Web服务.我需要发布一个带有URL的字典.我的Web服务参数如下：以下是我的要求：但是我收到以下错误：服务器拒绝此请求,因为请求实体的格式不受所请求方法所请求资源的支持解决方法请找到以下代码,将数据发布到Web服务.请注意这是我在我的一个申请中使用的样本.希望这可以帮助.从您的评论“服务器拒绝此请求”服务器是否支持JSON或XML格式.

  10. ios – 如何使用Firebase存储喜欢的内容

    我有一个关于firebase的后端,有像Facebook这样的帖子.所以我需要喜欢这些帖子的功能.问题是如何存储喜欢帖子的喜欢和用户？

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部