结丹
什么是同源策略？
ajax请求时，浏览器要求当前网页和 server 必须同源（安全）
同源：协议、域名、端口，三者必须一致
手写一个简易的 ajax
function ajax(url, method = 'GET', data = null) {
return new Promise(function (resolve, reject) {
const xhr = new XMLHttpRequest()
xhr.responseType = 'json'
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.response)
} else if (xhr.status === 404) {
reject(new Error('404 not Found'))
}
}
}
xhr.open(method, url, true)
xhr.send(data)
})
}
ajax('https://www.imooc.com/api/http/search/suggest?words=js').then((res) => {
console.log(res)
})
跨域的常见实现方式
CORS 跨域资源共享(纯服务端)
使用 CORS 跨域的过程
① 浏览器发送请求
② 后端在响应头中添加 Access-Control-Allow-Origin 头信息
③ 浏览器接收到响应
④ 如果是同域下的请求，浏览器不会额外做什么，这次前后端通信就圆满完成了
⑤ 如果是跨域请求，浏览器会从响应头中查找是否允许跨域访问
⑥ 如果允许跨域，通信圆满完成
⑦ 如果没找到或不包含想要跨域的域名，就丢弃响应结果
CORS兼容性：IE10 及以上可以正常使用
JSONP
- 原理
script标签跨域不会被浏览器阻止JSONP主要就是利用script标签，加载跨域文件 - 使用
JSONP实现跨域
服务器端准备好JSONP接口
手动加载JSONP标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
const handleResponse = (data) => console.log(data)
</script>
<script src="https://www.imooc.com/api/http/jsonp?callback=handleResponse"></script>
</body>
</html>
动态加载JSONP接口:
// 动态加载JSONP接口
const script = document.createElement('script')
script.src = 'https://www.imooc.com/api/http/jsonp?callback=handleResponse'
document.body.appendChild(script)
const handleResponse = (data) => {
console.log(data)
}
Cookie、LocalStorage、SessionStorage 区别
参考
- 存储大小（单个域名）
cookie：4k
sessionStorage：5M
localStorage：5M
- 生命周期
cookie:若没有设置失效时间，关闭浏览器 cookie 失效，如果设置了时间,过期后失效
sessionStorage：仅在当前浏览器关闭之前有效，关闭页面会被删除
localStorage：永久有效，除非手动删除
- 作用域
cookie：Cookie 的作用域仅仅由 domain(当前域或父域)和 path(当前路径和上級路径) 决定与协议和端口无关
sessionStorage：当前浏览器标签页
localStorage：在所有同源窗口中共享
- 通信
cookie：cookie 在浏览器和服务器之间来回传递，如果使用 cookie 保存过多数据会造成性能问题
sessionStorage：仅在浏览器中保存，不参与服务器的通信
localStorage：仅在浏览器中保存，不参与服务器的通信
- 应用场景
cookie：用于存储用户的身份认证信息或者记录用户的偏好设置
localStorage：存储用户的持久性数据
从输入 URL 到看到页面发生了什么？
- 浏览器地址栏输入 URL 并回车
- 浏览器查找当前 URL 是否存在缓存，并比较缓存是否过期
- DNS 解析 URL 对应的 IP
- 根据 IP 建立 TCP 连接（三次握手）
- 发送 http 请求
- 服务器处理请求，浏览器接受 HTTP 响应
- 浏览器解析并渲染页面
- 关闭 TCP 连接（四次挥手）
HTTP 常见的状态码有哪些？
分类：
1XX:服务器收到请求
2XX:请求成功,如200
3XX:重定向，如302
4XX:客户端错误，如404
5XX:服务端错误，如500
常见状态码:
- 200 成功
- 301永久重定向（配合
location，浏览器自动处理） - 302 临时重定向 （配合
location，浏览器自动处理） - 304 资源未被修改
- 404 资源未找到
- 403 没有权限
- 500 服务器错误
- 504 网关超时
http 哪些常见 header?
request headers
Accept: 浏览器可接受的数据格式Accept-Encoding：浏览器可接受的压缩算法，如gzipAccept-Languange: 浏览器可接受的语言，如 zh-CNConnection:keep-alive一次TCP连接重复使用cookiehostUser-Agent:(简称UA)浏览器信息Content-type发送数据的格式，如application/json
response headers
Content-type：返回数据的格式Content-length：返回数据的大小，多少字节Content-Encoding：返回数据的压缩算法Set Cookie
缓存相关的headers
Cache-Controlmax-age过期时间 单位：秒no-cache：不用强制缓存，交给服务端处理(协商缓存)no-store：不用强制缓存，也不让服务端处理，直接返回资源
两者共存，优先使用Etag（Last-Modified只能精确到秒级，如果资源被重复生成，而内容不变，Etag更精确）
Last-Modified：资源的最后修改时间If-Modified-SinceEtag:资源的唯一标识(字符串)If-None-Match
什么是Restful API？
- 传统API设计：把每个
url当做一个功能 - Restful API设计：把每个
url当成一个唯一的资源
两个原则
- 尽量不用
url参数
- 传统：/api/list?pageIndex=2
- restful: /api/list/2
- 用
method表示操作类型
- 传统：
获取blog：/api/getBlog?id=100(GET)
删除blog:/api/deleteBlog?id=100(POST)
修改blog: /api/updateBlog?id=100(POST)
创建blog: /api/createBlog(POST)
- restful:
获取blog：/api/Blog/100(GET)
删除blog:/api/Blog/100(DELETE)
修改blog: /api/Blog/100(PUT)
创建blog: /api/Blog(POST)
描述一下http的缓存机制？
不同的刷新操作，对缓存的影响
正常操作(地址栏输入url，跳转链接，前进后退)，强制缓存有效，协商缓存有效
手动刷新(cmd+r)，强制缓存失效，协商缓存有效
强制刷新(shift+cmd+r)，强制缓存失效，协商缓存失效
讲一下https的过程？
