01、Web API

02、服务器API(AJAX )

AJAX （Asynchronous JavaScript And XML），就是异步调用JavaScript 与服务器通信，实现动态网页编程的技术总称。是一系列技术的合集，涉及HTML/XHTML、CSS、 JavaScript、DOM、XML、XSLT，以及最重要的 XMLHttpRequest。最重要的特征和作用就是实现页面局部更新。
实现AJAX的几个主流技术：

• XMLHttpRequest(XHR)：最早原生的获取服务端数据的HTTP技术。
• JQuery-AJAX：JQuery中对XMLHttpRequest的封装，让调用更简便。
• axios：也是对XMLHttpRequest的第三方封装库，是一个轻量的HTTP客户端，本质是对于XHR的Promise方式调用的封装。还支持拦截请求和响应、转化请求数据和响应数据、中断请求、自动转换JSON数据、客户端支持防御XSRF等。
• Fetch API：新一代用于替代XHR的技术。 |
  | XMLHttpRequest(XHR) | JQuery-AJAX | axios | Fetch API | | —- | —- | —- | —- | —- | | 描述 | 原生的服务端HTTP调用 | 基于XHR的封装， | 基于XHR的Promise封装 | 新时代的XHR替代者 | | 来源 | 原生 | 第三方库 | 第三方库 | 原生 | | 特点 | 兼容性好 | 支持jsonp | 综合不错 | 年轻 | | 异步 | 基于事件的异步 | 基于事件的异步 | Promise异步 | 标准 Promise异步，支持 async/await | | 调用 | request.send() | $.ajax() | axios.get(url).then() | fetch(url).then() | | 易用性 | 稍复杂 | 调用简单 | 调用简单 | 调用简单 | | 缺点 | 回调地狱 | 回调地狱；文件大； | | 有些不完善，如错误的处理、中止、超时等还不足。 | | 总结 | 不推荐了 | 用的逐渐变少了 | VUE中推荐的 | 可用IE🚫 |

2.1、XHR(XMLHttpRequest)

XMLHttpRequest（XHR） 是最早提供的获取服务端数据的方式，支持json、xml、html、text等格式。缺点是使用比较繁琐，很多参数，需要考虑不同浏览器兼容性。

let request = new XMLHttpRequest();
request.open('GET', "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json");
request.responseType = 'json';
request.onload = function () {
        console.log(request.status); //200
        console.log(request.readyState); //4
        console.log(request.responseType); //json
        console.log(request.response)
}
request.send();

2.2、Fetch API

Fetch API (IE🚫) ( fetch /fetʃ/ 提取)是浏览器的底层提供的API，代替XHR，提供了一套简单、异步、支持跨域的HTTP调用方法。 :::warning 语法：Promise fetch(input[, init]);

• input：url地址或Request对象

• init：一个配置项对象，包括所有对请求的设置 ::: 🔸主要缺点是：

• 对于详细的错误需要封装处理，404、500时Promise的状态依然为resolve。

• 默认不支持cookie（可配置），不支持超时控制、不支持中止、不支持请求进度监控。

🔸fetch 中的Response对象：

window.fetch("https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json")
        .then((response) => {
                console.log(response.ok); //true  需判断返回状态
                console.log(response.status); //200
                console.log(response.url);
                console.log(response.type);
                return response.json();
        })
        .then(json => {
                console.log(json);
        })
        .catch(e => console.log(e));

2.3、JQuery-AJAX

JQuery中的AJAX就是对XHR的封装，简化了调用、封装了兼容性，支持JSONP（实现跨域请求）。缺点的话可能就是比较大，存在回调地域的小问题。

const url="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
$.ajax({
        type: 'GET',
        url: url,
        data: null,
        dataType: "json",
        success: function (result) {
                console.log(result);
        },
        error: function (e) { },
});
//更简单的用法
$.getJSON(url,(result)=>{
        console.log(result);
});

03、WebStorage数据存储

HTTP是无状态的协议，导致客户端的每次请求都是独立的，没有上下文联系，无法确认用户身份，cookie和session可以解决这个问题。为了解决本地存储问题，HTML5新增了Web Storage解决方案，包括sessionStorage和localStorage，以及比较新的IndexedDB、CacheStorage。

3.1、Cookie传统手艺

HTTP Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，当然本地也可以修改，它会在浏览器下次向同一服务器再发起请求时发送回去。cookie已过时，存在各种安全问题、无法存储复杂数据，推荐使用WebStorage。
🔸使用场景：

• 会话状态管理：如用户登录状态、购物车、游戏分数或其它需要记录的信息。
• 个性化设置：如用户自定义设置、主题等。
• 浏览器行为跟踪：如跟踪分析用户行为，推送广告等。

🔸生命周期：随页面的生命周期，页面关闭也失效了，或者设置的过期时间。

• Expires过期时间（本地时间），有效期（Max-Age）一段时间

🔸作用范围：同源共享，默认同一域名内的页面共享cookie数据。

• Domain、Path标识作用域可设置作用域范围。
  • Domain：主机，主域名，包含子域名。不指定则为Origin（同源），不包含子域名
  • Path：URL路径，包含子路径，如，Path=/docs

🔸存储与使用：

• document.cookie：返回当前文档关联的cookie数据。值为一个字符串，为键值形式的字符串，"key=value;key=value;..."。操作不太方便，一般使用扩展JS库来操作，如js-cookie。
• 存储大小：一个cookie 4K
• 编码存储：cookie的值是需要url编码，window.encodeURIComponent(str)编码、window.decodeURIComponent(str)解码。

🔸食用步骤：

• 服务器在响应头里面添加 Set-Cookie 选项
• 览器会保存下 Cookie，之后每次请求中都通过 Cookie 请求头部将 Cookie 信息发送给服务器。 ```javascript Response Headers HTTP/1.0 200 OK Content-type: text/html Set-Cookie: yummy_cookie=choco; Domain=example.com Set-Cookie: tasty_cookie=strawberry;Path=/ Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;Secure;HttpOnly;

Request Headers GET /sample_page.html HTTP/1.1 Host: www.example.org Cookie: yummy_cookie=choco; tasty_cookie=strawberry

**🔸安全性**：每次都发回服务器，明文传输，不安全
- **Secure**属性：只有HTTPS才会发送。
- **HttpOnly**属性：不可被JS访问，只用于服务端。
- **SameSite**，设置Cookie的发送范围，枚举值：
   - None：无限制，都发送
   - Strict（/strɪkt/ 严格的），相同域名站点才发送，阻止跨站伪造攻击（[CSRF](https://developer.mozilla.org/zh-CN/docs/Glossary/CSRF)）
   - Lax（ /læks/宽松的 ），与Stric类似，允许外部过来的URL。
（CSRF）跨站攻击例子，如下代码
```javascript
<img src="http://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory">

当你打开有这个图片元素的网页时（非法论坛、钓鱼网站），他会向银行发起转账请求，而你正好刚刚登录了这个银行，cookie保留了登录认证信息。

3.2、session服务端会话

session是一种由服务端为主存储和管理的文档会话信息的机制，多用来管理用户认证信息。session也是基于cookie实现的，session存储在服务器端（所以相比cookie更安全），sessionId 被存储到客户端cookie 中。不过sessionId 也可以用其他方式实现传输，如url参数。
🔸基本流程：

1. 登录成功后，服务端创建session并保存。
2. 网页会话cookie中保存session的sessionId ，作为客户端身份id。
3. 向服务端请求时，服务端会根据sessionId 判断客户端的身份。

3.3、localStorage

window.localStorage 存储同源文档的数据，数据对象Storage 同sessionStorage，特点是数据可以长期保留。
🔸存储：

• 本地存储，长期保留不会清除，除非你主动抛弃。
• 字符键值：键值都必须是字符串，会自动转换字符（所以要注意对象要手动JSON.stringify()）。
• 5M大小，一般大约5M，不同浏览器不同。

🔸作用范围：同源共享，同一域名下，同端口、同http协议共享数据

• http、https不同，分开存储

🔸操作API：使用简洁

window.localStorage.setItem("uid",1122);
const uid= localStorage.getItem("uid");
localStorage.removeItem("uid");
localStorage.clear();
//添加storage的变更监听事件，触发变更的页面不会触发事假，其他同域名的页面才会
window.addEventListener("storage", function (e) {});

3.4、sessionStorage

window.sessionStorage存储当前文档会话的session数据，数据结构为Storage 对象（同localStorage，因此操作API也相同 ），特点是会话结束（页面关闭）数据就清掉了，同生共死。
🔸存储：

• 本地存储，与页面同生共死：同页面的生命周期，页面关闭就清掉。页面重新加载、恢复会保持会话。
• 字符键值：键值都必须是字符串，会自动转换字符（所以要注意对象要手动JSON.stringify()）。
• 5M大小，一般大约5M，不同浏览器不同。

🔸作用范围：仅当前文档有效，一夫一妻。

• 多个页面独立会话：多个页面（页签）拥有独立的会话sessionStorage，即使是同样的URL地址。
• 新页面复制会话：在当前页面打开的页面，会复制其上下文作为新的会话上下文。
• http、https不同，分开存储。

🔸使用场景：当前网页一些临时的数据，如网页中表单填写的数据。

window.sessionStorage.setItem("uid", 1122);
window.sessionStorage.setItem("uid", {"id":33});
console.log(sessionStorage.getItem("uid"), sessionStorage.length);  //1122  1
sessionStorage.clear();
console.log(sessionStorage.length);  //0

3.5、IndexedDB

IndexedDB(IE10)是一个比较完整的事务型、key-value数据结构的前端数据库，类似于基于 SQL 的 RDBMS，可存储复杂数据，包括对象，甚至媒体文件，适用于存储大量数据、且离线使用的场景。
主要特点：

• 键值存储：IndexedDB的数据是以键值形式存储的，键是唯一的且不可重复。
• 空间大：存储空间大（>250MB+）
• 长久保存：数据长久保存，除非主动清除。
• 其他特点：支持异步、支持事务、支持同源数据隔离，有很多第三方库可用，操作更简便。

  *CacheStorage

  Cache API(IE🚫)是一种客户端缓存存储机制，可用来实现请求数据离线功能，常在 serviceworker 中搭配 Fetch 使用，实现WEB系统的离线使用。

04、BOM浏览器模型

BOM：Browser Object Model，浏览器对象模型。BOM分为window对象和window子对象，其核心就是window对象，window对象是BOM顶层对象，为浏览器的实例，是JS访问浏览器的接口。
BOM同时也是ECMAScript规定的Global对象，就是说在网页任何地方都可以访问window对象。如果一个页面中包含多个frame，则每个框架frame都有自己的window，通过window.frames的索引、或者框架名称访问。

4.1、window窗口

Window表示一个包含 DOM 文档的窗口，window作为顶级全局变量，提供了很多全局属性和方法，使用时可以省略前面的window.。