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后面的参数(发送筛选条件和回调函数的名字),在服务器中筛选合适的数据返回函数调用,让客户端接收到数据。
不足:
- 仅限于GET方法,而且需要保证域的安全性(避免响应中夹杂恶意代码)。
- 要确定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参数
不足:
- 仅限于GET请求
- 无法访问响应主体
原文地址:https://www.cnblogs.com/simpul/p/11027143.html
时间: 2024-10-09 15:30:55