JS红宝书学习记录（五）

js红宝书20-25

JSON

stringfy（JSON[,过滤器参数array,缩进和空白符数目num]），制定过滤器后输出的字符串将只包含对应属性

toJSON（）给JSON对象定义该方法重写stringfy

序列化顺序

1. 若存在toJSON方法且能通过它取得有效值，则调用该方法，否则返回对象本身
2. 如果提供了过滤器，则应用过滤器过滤，传入值是第一步返回的
3. 序列化
4. 如果提供了缩进，再重新序列化

parse（JSON字符串，reviver（还原函数））

AJAX

IE7之前需要使用MSXML库中的一个ActiveX对象来实现的

IE7+，FireFox，Chrome，Safari通过new XMLHttpRequest()新建XHR对象

方法：

• open（请求类型，url， 是否异步）

  URL是相对当前页面的，调用该方法启动一个请求以备用

• send（）发送请求，post时可以放入请求主体内容

• abort（）收到响应前取消请求

• setRequestHeader（），在open后send前

• getRequestHeader（）

收到响应之后，响应数据自动填充XHR属性

• responseText：响应文本
• responseXML：content-type为“text/xml”,"appliction/XML"时保存XML DOM文档
• status：响应状态
• statusText：响应状态说明

异步请求下通过readstatechange事件检测readyState属性（open之前指定）

0：未初始化，尚未调用open

1：启动，已open未send

2：发送，已send未收到响应

3：接收，已接收部分

4：完成，全部接收完毕

XHR2.0

new FormData()可以直接序列化表单数据

timeout超时设定和ontimeout事件

进度事件

• loadstart

• progress

  event.target是一个XHR对象，包含：

  lengthComputable：进度信息是否可用

  position：已接收字节数

  totalSize：content-length指示的预期字节数

  明显平常浏览器下载的时候我们就可以用这个信息展示进度条

• error

• abort

• load

• loadend

HTTP header和响应状态码

• Accept 浏览器能够处理的内容类型

• Accept-Charset 能显示的字符集

• Accept-Encoding 压缩编码

• Accept-Language 浏览器当前设置的语言

• Connection 连接类型

• Cookie

• Host 发出请求的页面所在域

• Referer 发出请求的页面的URI

• User-Agent 用户代理字符串

跨域资源共享

CORS(cross-Origin Resource Sharing)

基本思想：使用自定义的HTTP头部让浏览器和服务器进行沟通，从而决定请求或者响应是成功还是失败

简单请求：

（1) 请求方法是以下三种方法之一：

• HEAD
• GET
• POST

（2）HTTP的头信息不超出以下几种字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

此时浏览器自己设置下面的Origin字段

请求：Origin头部：页面源信息（协议，域名，端口）

响应：Access-Control-Allow-Origin：回发相同源信息，浏览器对比处理

复杂请求（Preflighted Requests）

此时浏览器先发送一个预检请求Option，包含下列头部

• Origin
• Access-Control-Request-Method 请求自身使用的方法
• Access-Control-Request-Headers（可选）自定义头部信息

服务器通过在响应中发送如下头部与浏览器沟通

• Access-Control-Allow-Origin
• Access-Control-Request-Method 允许的方法
• Access-Control-Request-Headers 允许的头部
• Access-Control-Max-Age 预检请求缓存多长时间

下面是从百度的控制台向ke.qq.com发送复杂请求的例子

var a = new XMLHttpRequest();
a.open("post","https://ke.qq.com",true);
a.setRequestHeader("myCookie","name=heavy");
a.send({
   });

点击network查看

设置withCredentials设置为True后则可以让请求带凭据（Cookie，HTTP认证及客户端SSL证明）

若服务器接受则返回 Access-Control-Allow-Credentials：true

其他跨域技术

图像PING

只能发送get请求，且只能单行通信

JSONP

• 回调函数
• 数据

这里直接去百度拿一个JSONP请求字符串来做实验

const bd_cb_dict3_1596362060709 = (response) => {
   
    console.log(response)；
}
var script = document.createElement("script");
script.src = "https://sp1.baidu.com/5b11fzupBgM18t7jm9iCKT-xh_/sensearch?wd=jsonp&cb=bd_cb_dict3_1596362060709&callback=bd_cb_dict3_1596362060709&_=1596362060216";
document.body.insertBefore(script,document.body.firstChild);

明显我们自己定义了一个bd_cb_dict3_1596362060709这样的函数来给服务器进行调用（服务器可以解析callback参数，然后动态执行代码），最终成功在控制台上打印了响应