fetch

在原生ajax+es6promise的基础上封装的一个语法糖,返回promise对象。

fetch(url, initObj)
.then(res=>res.json())
.then(data=>{
//这里得到返回的json对象,可进行操作
})
.cateh(err){
console.log(err);
}; //initObj
{
body: JSON.stringify(data), // must match 'Content-Type' header
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, same-origin, *omit
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // *client, no-referrer
}

cookie,localStorage,sessionStorage,indexDB

  • cookie

    由服务器通过返回响应在浏览器上设置,用于存储会话信息的。性质上是绑定在特定的域名下的,当设定了一个cookie后,再给创建它的域名发送请求时都会包含这个cookie。无法被其他域所访问(CROS跨域时默认不会发送cookie)。

    组成:

    • 名称name:不区分大小写且需经过URL编码
    • 值value:需经过URL编码
    • 域domain:cookie对哪个域是有效的,所有向该域发送的请求中都会包含这个cookie
    • 路径path:对于域中指定的路径才发送cookie
    • 失效时间expires:表示cookie何时应该被删除的时间戳,默认是浏览器会话结束时立即删除
    • 安全标识secure:指定后只有在使用SSL连接才能发送到服务器

    document.cookie这个API过于蹩脚,用于获取属性时会返回页面可用的所有cookie的字符串:

    name1=value1;name2=value2;name3=value3

    所有名字和值都是经过URL编码,因此必须使用decodeURIComponent()来解码

    用于设置值:

    document.cookie = `name=value;expires=${new Date(new Date().getTime() +
    24 * 60 * 60 * 1000).toUTCString()};path=domain_path;domain=domain_name;secure`;

    不会覆盖cookie除非设置的cookie名称已存在

  • localStorage

    要访问同一个localStorage对象页面必须遵循同源规则,数据会保留到通过JS删除或者用户清除浏览器缓存。

    方法:

    • setItem(name, value)
    • getItem(name)
    • removeItem(name)
  • sessionStorage

    存储特定于某个服务器会话的数据,本地不可访问,只保留到浏览器关闭。

    方法于localStorage同。

  • indexDB

    在浏览器中保存结构化数据的一种数据库,异步进行,需要注册事件来处理结果。

    同上面三种存储方式相同,不能跨域共享。

JSONP(JSON with padding)填充式JSON

由回调函数和数据组成。回调函数时当响应来时应该在页面中调用的函数,这个名字是在请求中指定的。数据就是在传入回调函数中的JSON数据。

其实就像是GET请求一样,通过URL后面的参数(发送筛选条件和回调函数的名字),在服务器中筛选合适的数据返回函数调用,让客户端接收到数据。

不足:

  1. 仅限于GET方法,而且需要保证域的安全性(避免响应中夹杂恶意代码)。
  2. 要确定JSONP请求是否失败并不容易,虽然H5新增script标签的onerror事件但是兼容性捉急。

图像Ping

也是一种跨域请求,但是一种简单的单向的向服务器通信的一种跨域方式。请求的方式和GET方式类似,但是却不能够获得响应的数据。

var img = new Image();
img.onload = img.onerror = function(){ //知道响应什么时候能收到
alert("done");
};
img.src = 'http://www.xxx.com/test?name=simple'; //发送了一个name参数

不足:

  1. 仅限于GET请求
  2. 无法访问响应主体

前端知识点回顾——Javascript篇(六)的更多相关文章

  1. 前端知识点回顾——Javascript篇(二)

    JavaScript的解析顺序 第一阶段:编译期 寻找关键字声明的变量.函数声明的变量,同时会对变量进行作用域的绑定 var声明的变量,在编译期会赋一个默认值undefined,变量提升的特性. ES ...

  2. 前端知识点回顾——Javascript篇(五)

    DOM 常用的DOM获取方法: node.children 返回子元素节点,没有兼容性问题,动态获取 node.parentNode 获取父节点,没有兼容性问题 node.offsetParent 获 ...

  3. 前端知识点回顾——Javascript篇(四)

    Symbol 为什么需要symbol ES5里面对象的属性名都是字符串,如果你需要使用一个别人提供的对象,你对这个对象有哪些属性也不是很清楚,但又想为这个对象新增一些属性,那么你新增的属性名就很可能和 ...

  4. 前端知识点回顾——Javascript篇(三)

    数组的冒泡.选择和插入排序法 冒泡排序法(从小到大) function bubble(arr){ for(let i = 0 ;i<arr.length-1;i++){ for(let j = ...

  5. 前端知识点回顾——Javascript篇(一)

    DOM特殊元素获取 document.documentElement //HTML标签 document.head //head标签 document.title //title标签 document ...

  6. web前端知识点(JavaScript篇)

    call,apply,bind call,apply,bind这三者的区别,及内部实现原理,点这里 promise promise函数的内部实现原理,点这里 闭包 闭包就是能够读取其他函数内部变量的函 ...

  7. 前端知识点回顾——HTML,CSS篇

    前端知识点回顾篇--是我当初刚转行为了面试而将自己学过的前端知识整理成的一份笔记,个人目的性很强,仅供参考. doctype 有什么用 doctype是一种标准通用标记语言的文档类型声明,目的是告诉标 ...

  8. [转] Web前端优化之 Javascript篇

    原文链接: http://lunax.info/archives/3099.html Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化 ...

  9. 前端开发之JavaScript篇

    一.JavaScript介绍  前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...

随机推荐

  1. 简单SQL注入试探、一

    DVWA——简单SQL注入小记 前不久刚开始接触SQL注入,今天来记录一些最近的一些收获和一些SQL注入方面的知识. 主要是基于DVWA这个开源的平台来进行练习. 废话不多说开始解题. 从简单的SQL ...

  2. 根治android studio无法预览xml布局的问题

    xml报错“Failed to load AppCompat ActionBar with unknown error.” 修改build-gradle文件中的appcompat包导入的版本,直接用“ ...

  3. Appium Desired Capabilities-General Capabilities

    Desired Capabilities are keys and values encoded in a JSON object, sent by Appium clients to the ser ...

  4. Linux gdb调试及后台程序问题

    https://blog.csdn.net/lengchanguo/article/details/50481533 转? 问题是后台& 调试

  5. [zhuanzai]Bean对象注入失败 .NoSuchBeanDefinitionException: No qualifying bean of type..

    nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying b ...

  6. BZOJ2208 [Jsoi2010]连通数[缩点/Floyd传递闭包+bitset优化]

    显然并不能直接dfs,因为$m$会非常大,复杂度就是$O(mn)$: 这题有三种做法,都用到了bitset的优化.第二种算是一个意外的收获,之前没想到竟然还有这种神仙操作.. 方法一:缩点+DAG上b ...

  7. C# 对象和类型(2) 持续更新

    类 class PhoneClass  { public const string DayOfSendingBill = "Monday"; public int Customer ...

  8. .net 中跨域问题

    1.ashx跨域接口 context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); 2.w ...

  9. Maven简介、安装、配置

    1.Maven是什么? Maven是一种跨平台的项目管理工具,是一个开源的项目,主要服务于基于java平台的项目构建.依赖管理和项目信息管理.Maven还提供了中央仓库,能帮助我们自动的下载构件.Ma ...

  10. $ python manage.py makemigrations You are trying to add a non-nullable field 'name' to course without a default; we can't do that (the database needs something to populate existing rows). Please selec

    问题: $ python manage.py makemigrationsYou are trying to add a non-nullable field 'name' to course wit ...