前端知识点回顾——Javascript篇(六)

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. 无法访问响应主体

原文地址:https://www.cnblogs.com/simpul/p/11027143.html

时间: 2024-10-09 15:30:55

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

前端知识点回顾之重点篇——jQuery实现的原理

jQuery jQuery的实现原理 参考:https://blog.csdn.net/zhouziyu2011/article/details/70256659 外层沙箱和命名空间$ 为了避免声明了一些全局变量而污染,把代码放在一个"沙箱执行".jQuery具体的实现,都被包含在了一个立即执行的匿名函数构造的闭包里面,然后只暴露 $ 和 jQuery 这2个变量给外界: (function(window, undefined) { // 用一个函数域包起来,就是所谓的沙箱 // 在这

前端总结之JavaScript篇

1.原型 / 构造函数 / 实例 原型( prototype ): ?个简单的对象,?于实现对象的 属性继承.可以简单的理解成对象的爹.在 Firefox 和 Chrome 中,每个 JavaScript 对象中都包含?个 proto (?标准)的属性指向它爹(该对象的原型),可  obj. proto 进?访问.构造函数: 可以通过 new 来 新建?个对象 的函数. 实例: 通过构造函数和  new 创建出来的对象,便是实例. 实例通过   proto 指向原 型,通过 constructo

前端知识点回顾——Nodejs

Node.js 事件循环机制 setImmediate()是将事件插入到事件队列尾部,主线程和事件队列的函数执行完成之后立即执行setImmediate指定的回调函数,和setTimeout(fn,0)的效果差不多 process.nextTick()方法可以在当前"执行栈"的尾部-->下一次Event Loop(主线程读取"任务队列")之前-->触发process指定的回调函数.也就是说,它指定的任务总是发生在所有异步任务之前,当前主线程的末尾. 事件

前端知识点回顾——mongodb和mongoose模块

mongodb和mongoose模块 数据库 数据库有关系型数据库(MySQL)和非关系型数据库(mongodb),两者的语法和数据存储形式不一样. mySQL 关系型数据库 类似于表格的形式,每一条数据都是以id为标识 table thead name sex age id tbody May female 18 1 Simple male 25 2 mongodb 非关系型数据库 集合,相当于表的概念,Bson,一条数据代表一个文档(数据的基本单位) { id : name : May ag

前端知识点回顾——koa和模板引擎

koa 基于Node.js的web框架,koa1只兼容ES5,koa2兼容ES6及以后. const Koa = requier("koa"); const koa = new Koa(); //koa.use注册中间件(一个用来处理请求/修饰向服务器发起的请求的异步函数,参数为ctx和next) //每一个请求都会从上往下执行,当一个中间件调用 next() 则该函数暂停并将控制传递给定义的下一个中间件.当在下游没有更多的中间件执行后,堆栈将展开并且每个中间件恢复执行其上游行为. k

python学习第六十五天:前端知识点总结

前端知识点串讲 1 HTML 1.1 组成 HTML标签: 单 双 HTML标签属性 class id 1.2 HTML标签 # 页面结构标签 html body head # HEAD 头部标签 meta title style link script # 格式标签 p h1~6 pre br hr # 文本标签 em strong sub sup del ins i # 列表 ul ol li dl dt dd # 表格 table thead tbody tfoot tr td th ca

前端知识点总结(CSS篇)

圣杯布局 CSS合并方法 盒子模型 CSS定位 CSS动画原理 CSS3动画(简单动画的实现,如旋转等) CSS不同选择器的权重(CSS层叠的规则) flexbox布局 块级元素和行内元素的异同 CSS在性能优化方面的实践(比方说选择器的效率等) CSS打包压缩的方法 使用CSS预处理的优缺点(比方说Sass和Compass等) { box-sizing: border-box; }这条CSS规则是干嘛的,有什么优点 CSS浮动的原理及清除浮动的方法及优缺点 CSS垂直居中的方法 base64的

帮助你更快学习JavaScript的六个思维技巧

? ? ? ? ? ? ? ? 当人们试图学习JavaScript或其他编程语言的时候,他们通常会遇到如下挑战. 一些概念让他们感到困惑,特别是如果之前学过其他类型的语言. 很难找到学习的时间(或者动力)去学习. 你很容易忘掉之前学到的东西. JavaScript工具太多并且经常更新,以至于很难找到学习的切入点. 幸运的是,这些难题最终能够被克服.在这篇文章,我将展示六个能够帮助你更快.更开心.更高效地学习JavaScript的六个思维技巧. 1   不要让未来的忧虑干扰你现在的学习 有些Jav

前端知识点总结1

前端知识点总结 WendySays 关注 2016.10.14 17:10* 字数 1074 阅读 759评论 3喜欢 8 知识框架 知识框架图,每个部分有很多书推荐https://github.com/JacksonTian/fks Paste_Image.png 浏览器工作原理 How browsers work 浏览器工作原理相关的译文 浏览器渲染浏览器的渲染原理简介 看到这个标题大家一定会想到这篇神文<How Browsers Work>,这篇文章把浏览器的很多细节讲得很细,而且也被翻