Ajax 入门之 GET 与 POST 的不同处详解

在之前的随笔中,本着怀旧的态度总结了一篇 兼容不同浏览器 建立XHR对象的方法:

在建立好XHR对象之后,客户端需要做的就是,将数据以某种方式传递到服务器,以获得相应的响应,在这里,  Ajax技术总结的第二季,我将重点阐述 提交数据的两种方式。

在这之前需要了解一下我们的HTTP传输协议:

HTTP 的工作方式是客户机与服务器之间的请求-应答协议。

举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。而想要基于HTTP协议进行数据传输,必然要用到两种请求方式.

两种 HTTP 请求方法：GET 和 POST

在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。

  • GET - 从指定的资源请求数据。
  • POST - 向指定的资源提交要被处理的数据

这是W3C上对GRT与POST的使用场景描述,从字面上来理解，就是： GET是用来从服务器获取数据的，POST是用来向服务器传送数据的

这一点，我们从提交路径与数据的URL中就可以看出来：

可以用来指向URL的属性有：

1. 表单中的 action；

2. a 标签中的 href

3. img script 中的 src 属性（此属性不受“ 同源策略 ”限制，可以利用来进行“跨域”，我想近期总结一片关于跨域的问题，在这里先挖个坑）

  这里，我们讲一讲form表单提交中他们的不同

一 、Ajax的表单提交中，get 使用 open（）函数来提交数据，其中，数据以 URL? key & value 的形式拼接在URL后面：

xhr.open('get','xxx.php?name=tom & age=18');
xhr.send(null);

在浏览器的URL中是这样的:

get 提交 URL

这里可以看出:GET是把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。ID的url长度是有限制的，当url过长时会自动截取超长字符。这样就容易引发一个问题：当传递的参数过多，导致url过长时，url自动截取超长字符，最终传递参数部分获取不到。这也限制了GET传送的数据大小一般不能超过2KB;

而且,从URL截图中可以看出: GET安全性非常低，当通过GET方法提交数据时，用户名和密码将出现在URL上。如果：

- 登陆页面可以被浏览器缓存；
- 其他人可以访问客户的这台机器。

那么，别人即可以从浏览器的历史记录中，读取到此客户的账号和密码。所以，在某些情况下，GET方法会带来严重的安全性问题。

并不是说GET方法没有优点，在速度测试中，get提交的速度是POST方式的数十倍。

二 、Ajax的表单提交中，POST 在 open（）函数中只需要提供URL，由send（）函数提交数据:　　

//获取form数据
var formDom = document.querySelector('form');
var formData = new FormData(formDom);
//发送数据
xhr.open('post',formDom.action);
xhr.send(formData);

POST是:通过HTTPPOST机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的URL地址。用户看不到这个过程。安全性较高

POST传送的数据量较大，一般被默认为不受限制。可以用这段demo中FormData对象的方式传递图片,富文本等文件,这是get所做不到的。

总结一下，Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求，在FORM（表单）中，Method默认为"GET"，

实质上，GET和POST只是发送机制不同，并不是一个取一个发！

总之，这两种表单提交方式并没有优劣之分，只有不同的适应场景，这需要我们日常工作中去根据需求把握。

后面，我将总结一下，在浏览器与服务器之间的交互中，路径的几种不同书写方法。

以上所述是小编给大家介绍的Ajax 入门之 GET 与 POST 的不同处详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jQuery Ajax之$.get()方法和$.post()方法

    注意:$.get()和$.post()方法是jQuery中的全局函数.前面讲到的load()方式是对jQuery对象进行操作的. 1. $.get()方法 $.get()方法使用GET方式来进行异步请求. 它的语法结构为: $.get( url [, data] [, callback] [, type] ) $.get()方法参数解释如下表: 参数名称 类 型 说 明 url String 请求的HTML页的URL地址 data(可选) Object 发送至服务器的key/value数据会作为

  • Jquery AJAX POST与GET之间的区别

    1:GET访问 浏览器 认为 是等幂的就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配]所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果 POST则 认为是一个 变动性 访问 (浏览器 认为 POST的提交 必定是 有改变的) 防止 GET 的 等幂 访问 就在URL后面加上 ?+new Date();,[总之就是使每次访问的URL字符串不一样的] 设计WEB页面的时候 也应该遵守这个原则 2:一.谈Ajax的Get和Post的区别

  • ajax中get和post的说明及使用与区别

    以前没怎么仔细的研究过ajax,只是用到了就直接拿过来用,发现了问题再找解决方法.以下是我在找解决问题的过程中的一点小小的总结. 一.谈Ajax的Get和Post的区别 Get方式: 用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面.另外最重要的一点是,它会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如帐号

  • jquery 读取页面load get post ajax 四种方式代码写法

    load 复制代码 代码如下: $("#result").load("aaaa.asp #ccc"); get 复制代码 代码如下: $.get("aaaa.asp", { action:"get",name:"lulu" }, function(data, textStatus){ $("#result").html(data); //alert(this); //alert(data

  • jQuery中Ajax的get、post等方法详解

    load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法) $.get()方法使用GET方式来进行异步请求.结构为:$.get(url [, data] [, callback] [, type]) $.get()方法参数解释如下: 参数名称 类型 说明 url String 请求的HTML页的URL地址 data(可选) Obj

  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数. 而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明 复制代码 代码如下: $.get("dat

  • jquery中get,post和ajax方法的使用小结

    在JQuery中可以使用get,post和ajax方法给服务器端传递数据 get方法的使用(customForGet.js文件): function verify(){//1.获取文本框的数据 //通过DOM的方式获取//document.getElementByIdx("userName");//通过JQuery的方式获取var jqueryObj = $("#userName");//获取节点的值var userName = jqueryObj.val(); /

  • 原生 JS Ajax,GET和POST 请求实例代码

    javascript/js的ajax的GET请求代码如下所示: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();

  • Ajax 入门之 GET 与 POST 的不同处详解

    Ajax 入门之 GET 与 POST 的不同处详解

    在之前的随笔中,本着怀旧的态度总结了一篇 兼容不同浏览器 建立XHR对象的方法: 在建立好XHR对象之后,客户端需要做的就是,将数据以某种方式传递到服务器,以获得相应的响应,在这里,  Ajax技术总结的第二季,我将重点阐述 提交数据的两种方式. 在这之前需要了解一下我们的HTTP传输协议: HTTP 的工作方式是客户机与服务器之间的请求-应答协议. 举例:客户端(浏览器)向服务器提交 HTTP 请求:服务器向客户端返回响应.响应包含关于请求的状态信息以及可能被请求的内容.而想要基于HTTP协议

  • jQuery Ajax的readyState和status的区别和使用详解

    jQuery Ajax的readyState和status的区别和使用详解

    在前几篇分析了jquery的ajax异步和同步,以及异常的一些处理,感觉还没有把ajax的readyState和status说清楚.今天就来说说ajax状态的那点事. jquery ajax函数源代码是这样的: var getXmlHttpRequest = function () { if (window.XMLHttpRequest) { //主流浏览器提供了XMLHttpRequest对象 return new XMLHttpRequest(); } else if (window.Act

  • jQuery中通过ajax调用webservice传递数组参数的问题实例详解

    下面通过实例给大家说明比较直观些,更方便大家了解. 本人的项目中通过jquery.ajax调用webservice. 客户端代码如下: $.ajax({ url: "test/xxx.asmx", type: 'POST', dataType: 'xml', timeout: , data: { name: "zhangsan", tags: ["aa", "bb", "cc"] }, error: fun

  • ajax响应json字符串和json数组的实例(详解)

    ajax响应json字符串和json数组的实例(详解)

    最近上班太忙,晚上抽空整理一下ajax请求中,后台返回json字符串和json数组的场景,以及前台的处理示例. 直接看代码. json字符串的后台响应 package com.ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.serv

  • jQuery AJAX 方法success()后台传来的4种数据详解

    1.后台返回一个页面 js代码 /**(1)用$("#content-wrapper").html(data);显示页面*/ $.ajax({ async : false, cache : false, type : 'POST', url : 'area/prepareCreate', error : function() { alert('smx失败 '); }, success : function(data) { $("#content-wrapper").

  • tensorflow入门:TFRecordDataset变长数据的batch读取详解

    在上一篇文章tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用里,讲到了使用如何使用tf.data.TFRecordDatase来对tfrecord文件进行batch读取,即使用dataset的batch方法进行:但如果每条数据的长度不一样(常见于语音.视频.NLP等领域),则不能直接用batch方法获取数据,这时则有两个解决办法: 1.在把数据写入tfrecord时,先把数据pad到统一的长度再写入tfrecord:这个方法的问题在于:若是有大量

  • Android入门教程之组件Activity的生命周期详解

    Android入门教程之组件Activity的生命周期详解

    目录 返回栈 Activity 状态 1. 运行状态 2. 暂停状态 3. 停止状态 4. 销毁状态 Activity 的生存期 onCreate() onStart() onResume() onPause() onStop() onDestroy() onRestart() 完整生存期 可见生存期 前台生存期 Activity 回收处理 返回栈 Android 中的 Activity 是可以层叠的,我们每启动一个新的 Activity,就会覆盖在原有的 Activity 之上,然后点击 Ba

  • Java入门绊脚石之Override和Overload的区别详解

    Java入门绊脚石之Override和Overload的区别详解

    目录 前言: 一.方法重写(Override) 1.方法重写基本概念 2.方法重写基本规则及注意事项 二.overload方法重载 1.什么是重载 2.重载的规则 3.总结: 前言: 各位小伙伴们,大家好,一日不见,如隔一日,今天我给大家分享一下大家在学习java过程当中遇到的一个问题,也是一道面试题,java中,Override和Overload的区别. 一.方法重写(Override) 1.方法重写基本概念 重写是子类对父类的允许访问的方法的实现过程进行重新编写, 返回值和形参都不能改变.即

  • Node.js基础入门之回调函数及异步与同步详解

    Node.js基础入门之回调函数及异步与同步详解

    目录 回调函数 1. 什么是回调函数? 2. 回调函数实现机制 3. 回调函数用途 4. 回调函数示例 异步与同步 1. 什么是异步与同步? 2. 同步示例 3. 异步示例一 4. 异步示例二 异步的实现 1. 回调函数的同步示例 2. 异步事件示例 3. 异步示例截图 Promise基础 1. 什么是Promise ? 2. Promise特点 3. 异步的缺点 4. Promise保证异步顺序 经过前面两天的学习,已经对Node.js有了一个初步的认识,今天继续学习其他内容,并加以整理分享,

  • Android入门之在子线程中调用Handler详解

    目录 简介 本章示例 前端代码 后端代码 简介 前一章我们以一个简单的小动画来解释了Handler. 这章我们会介绍在子线程里写Handler.如果是Handler写在了子线程中的话,我们就需要自己创建一个Looper对象了:创建的流程如下: 直接调用Looper.prepare()方法即可为当前线程创建Looper对象,而它的构造器会创建配套的MessageQueue; 创建Handler对象,重写handleMessage( )方法就可以处理来自于其他线程的信息了! 调用Looper.loo

随机推荐