fetch技术
Snandy
If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ends of strings that somebody else pulls.
Fetch:下一代 Ajax 技术
Ajax,2005年诞生的技术,至今已持续了 10 年。它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合。它的核心对象是 XMLHttpRequest。
简单回顾下历史
- 1996年,IE 中首先添加了 iframe 用来实现异步请求获取服务器内容
- 1998年,微软 Outlook 在客户端 script 中实现了 XMLHttp 对象
- 1999年,微软在 IE5 中添加了 XMLHTTP ActiveX 对象用来异步获取服务器内容,该对象直到 Edge 浏览器才废弃。其它浏览器陆续实现了类似的对象称为 XMLHttpRequest
- 2004年,Google Gmail 中大量使用 XMLHttpRequest
- 2005年,Google Map 中大量使用 XMLHttpRequest
- 2005年,Jesse James Garrett 发表了文章 "Ajax: A New Approach to Web Applications",Ajax 诞生
- 2006年,XMLHttpRequest 被 W3C 采纳,最后更新时间是 2014年1月
使用步骤大概如下
1
2
3
4
5
6
7
8
9
10
11
12
|
var xhr = new XMLHttpRequest(); xhr.open( 'GET' , url); xhr.onload = function () { // To do with xhr.response }; xhr.onerror = function () { // Handling errors }; xhr.send(); |
以上可以看出,XHR 使用 onXXX 处理,典型的 "事件模式"。
Fetch 目前还不是 W3C 规范,由 whatag负责出品。与 Ajax不同的是,它的 API 不是事件机制,而采用了目前流行的 Promise 方式处理。我们知道 Promise是已经正式发布的 ES6 的内容之一。
1
2
3
4
5
6
7
8
9
|
fetch( 'doAct.action' ).then( function (res) { if (res.ok) { res.text().then( function (obj) { // Get the plain text }) } }, function (ex) { console.log(ex) }) |
以上 fetch 函数是全局的,目前最新的Firefox,Chrome,Opera 都已支持,详见
以上是一个最简单的请求,只要传一个参数 url 过去,默认为 get 请求,获取纯文本,fetch 第二个参数可以进行很多配置,比如 POST 请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
fetch( "doAct.action" , { method: "POST" , headers: { "Content-Type" : "application/x-www-form-urlencoded" }, body: "keyword=荣耀7i&enc=utf-8&pvid=0v3w1kii.bf1ela" }).then( function (res) { if (res.ok) { // To do with res } else if (res.status == 401) { // To do with res } }, function (e) { // Handling errors }); |
如果返回的是 JSON, 如下
1
2
3
4
5
6
7
8
9
|
fetch( 'doAct.action' ).then( function (res) { if (res.ok) { res.json().then( function (obj) { // Get the JSON }) } }, function (ex) { console.log(ex) }) |
res 实际上该规范定义的 Response 对象,它有如下方法
- arrayBuffer()
- blob()
- json()
- text()
- formData()
此外,Fetch 跨域请求时默认不会带 cookie,需要时得手动指定 credentials: 'include'
1
2
3
|
fetch( 'doAct.action' , {credentials: 'include' }).then( function (res) { // ... }) |
这和 XHR 的 withCredentials 一样,只是 withCredentials 只要设为 true。
fetch技术的更多相关文章
- web前端(实习生)之 “百度一面”
2016.3.18,星期五.我经历了我的第一次面试. 不得不说,百度是一个高效的公司,在短短一下午之间我就直接经历了一面二面,说没有压力是假的,还记得在中途等待二面的时候我至少有一小段的时间脑子是卡带 ...
- gogs 小团队使用
最近小团队开始使用 gogs 来保存手头的项目.具体的使用流程如下: 由 root 用户新建 organization, 比如说建立 hardware,然后把团队的 技术负责人拉到 owners 这个 ...
- Fetch:下一代 Ajax 技术
Ajax,2005年诞生的技术,至今已持续了 10 年.它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合.它的核心对象是 XMLHttpRequest. 简单回顾下历史 19 ...
- Elasticsearch由浅入深(十)搜索引擎:相关度评分 TF&IDF算法、doc value正排索引、解密query、fetch phrase原理、Bouncing Results问题、基于scoll技术滚动搜索大量数据
相关度评分 TF&IDF算法 Elasticsearch的相关度评分(relevance score)算法采用的是term frequency/inverse document frequen ...
- 《MSSQL2008技术内幕:T-SQL语言基础》读书笔记(下)
索引: 一.SQL Server的体系结构 二.查询 三.表表达式 四.集合运算 五.透视.逆透视及分组 六.数据修改 七.事务和并发 八.可编程对象 五.透视.逆透视及分组 5.1 透视 所谓透视( ...
- KnockoutJS 3.X API 第七章 其他技术(1) 加载和保存JSON数据
Knockout允许您实现复杂的客户端交互性,但几乎所有Web应用程序还需要与服务器交换数据,或至少将本地存储的数据序列化. 最方便的交换或存储数据的方式是JSON格式 - 大多数Ajax应用程序今天 ...
- Kafka 技术文档
Kafka 技术文档 目录 1 Kafka创建背景 2 Kafka简介 3 Kafka好处 3.1 解耦 3.2 冗余 3.3 扩展性 3.4 灵活性 & 峰值处理能力 3.5 可恢复性 ...
- 《精通Hibernate:Java对象持久化技术详解》目录
图书信息:孙卫琴 电子工业出版社 第1章 Java应用分层架构及软件模型: 1.1 应用程序的分层体系结构 1.1.1 区分物理层和逻辑层 1.1.2 软件层的特征 1.1.3 软件分层的优点 1.1 ...
- 记一次数据库调优过程(IIS发过来SQLSERVER 的FETCH API_CURSOR语句是神马?)
记一次数据库调优过程(IIS发过来SQLSERVER 的FETCH API_CURSOR语句是神马?) 前几天帮客户优化一个数据库,那个数据库的大小是6G 这麽小的数据库按道理不会有太大的性能问题的, ...
随机推荐
- nginx架构与基础概念
1 Nginx架构 Nginx 高性能,与其架构有关. Nginx架构: nginx运行时,在unix系统中以daemon形式在后台运行,后台进程包含一个master进程和多个worker ...
- django 学习之DRF (一)
Django框架基础DRF-01 前后端分离介绍 1.前后端不分离图解 2.前后端分离图解 3.为什么要学习DRF DRF可以帮助我们开发者快速的开发⼀个依托于Django的前后后端分离 ...
- 从100PV到1亿级PV网站架构演变(转)
http://www.linuxde.net/2013/05/13581.html 一个网站就像一个人,存在一个从小到大的过程.养一个网站和养一个人一样,不同时期需要不同的方法,不同的方法下有共同的原 ...
- ghj1222的代码规范
基本上和notepad++的要求一样. 不定期更新. 1.左大括号换行: int main() { return 0; } 可能有些同志(比如大佬cjh)和我的做法不一样 当一个函数很短的时候可以整个 ...
- ubuntu下vnc部署安装
ubuntu下vnc部署安装,参考如下博客:https://www.cnblogs.com/xuliangxing/p/7642650.html https://jingyan.baidu.com/a ...
- Solr学习笔记(4) —— SolrCloud的概述和搭建
一.概述 1.1 什么是SolrCloud Lucene是一个Java语言编写的利用倒排原理实现的文本检索类库: Solr是以Lucene为基础实现的文本检索应用服务.Solr部署方式有单机方式.多机 ...
- 网络中常用的各种协议(针对TCP/IP协议组)
网络层: ip协议->网络互连协议 用途:将多个包在网络中联系起来,传输数据包(不可靠传输),最基本功能就是寻址和分段功能,不提供端到端,路由到路由的确认,不提供重发和流量控制.是计算机网络能狗 ...
- jquery 拖动改变div大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 江西财经大学第一届程序设计竞赛 F
链接:https://www.nowcoder.com/acm/contest/115/F来源:牛客网 题目描述 对于方程 2018 * x ^ 4 + 21 * x + 5 * x ^ 3 + 5 ...
- PHP的魔术常量
PHP的魔术常量(变量).魔术方法(函数).超全局变量 一.魔术常量(魔术变量) 概念:所谓的魔术常量就是PHP预定义的一些常量,这些常量会随着所在的位置而变化. 1.__LINE__ 获取文件中的 ...