面试重点 ajax的核心API - XMLHttpRequest和cookie

知识点：

• XMLHttpRequest
• 状态码：readyState status
• 跨域 cors jsonp

手写一个简易的ajax

get

post

用promise

上面没写send会报错

跨域

• 什么是跨域（同源策略）

1. ajax请求时，浏览器要求当前网页和server必须同源（安全）
2. 同源：协议，域名，端口，三者必须一致
3. 前端：http：//a.com:8080/;server:https://b.com/api/xxx

注意：加载图片css js可无视同源策略

1. <img src=跨域的图片地址/>（<img/>可用于统计打点，可使用第三方统计服务）
2. <link href=跨域的css地址/>（<link/><script>可使用CDN，CDN一般都是外域）
3. <script src=跨域的js地址></script >(<script>可实现JSONP)

• JSONP

1. 服务端可以任意动态拼接数据返回，只要符合html格式要求
2. 同理于<script src = "https://imooc.com/getData.js">
3. <script>可绕过跨域限制
4. 服务器可以任意动态拼接数据返回
5. 所以，<script>就可获得跨域的数据，只要服务端愿意返回

jq实现jsonp

• CORS（服务端支持）

cors-服务器设置http header

注意：

• 所有的跨域，都必须经过server端允许和配合
• 未经server端允许就实现跨域，说明浏览器有漏洞，危险信号

ajax的常用插件

• fetch：不会从服务端发送cookie
• axios

存储

• cookie （是字符串形式）

1. 本身用于浏览器和server通讯
2. 被‘借用’到本地存储来
3. 可用document.cookie=‘...’来修改

cookie缺点：

1. 存储大小，最大4KB
2. http请求时需要发送到服务端，增加请求数据量
3. 只能用document.cookie=‘...’来修改，太过简陋

• localStorage与sessionStorage

1. HTML5专门为存储而设计，最大可存5M
2. API简单易用setItem getItem
3. 不会随着http请求被发送出去

localStorage与sessionStorage区别

1. localStorage数据会永久存储，除非代码或手动删除
2. sessionStorage数据只存在于当前会话，浏览器关闭则清空
3. 一般localStorage会更多一些

描述cookie localStorage sessionStorage区别

1. 容量
2. API易用性
3. 是否跟随http请求发送出去