【学习打卡】第10天 前端工程师2022版 JSON第一讲

课程名称：前端工程师2022版

课程章节： json

主讲老师：alex

课程内容：

今天学习的内容包括：

json常用方法、跨域、xhr常用方法

课程收获：

5.JSON（JavaScript Object Notation）

5.1json注意事项：必须双引号、无undefined、不能写注释

5.2三种形式

简单值形式：1,"str"

对象形式：{"name":"张三","age":{"age1":"2"}}

数组形式：[1,"str",{"name":"zhangsan"}]

5.3常用方法

JSON.parse()

JSON.stringify()

6.跨域（重点）（不同url）

6.1同域：协议、域名、端口号都一样

6.2跨域请求为什么被阻止？

 阻止跨域请求是浏览器的一种安全策略（同源策略）

6.3跨域解决方案

6.3.1CORS(跨域资源共享)(优先考虑)

6.3.1.1是什么：后端响应时在头部添加，设置Access-Control-Allow-Origin:* (允许所有域名请求它，设置指定的域名将*改为指定url即可)

6.3.1.2过程：浏览器发请求、服务器响应请求、同域浏览器不处理，跨域浏览器先判断呢响应头中是否包含Access-...包含该域名，不包含浏览器丢弃响应结果

6.3.1.3CORS兼容性：兼容IE10及以上版本

6.3.2JSONP

6.3.2.1是什么：script标签跨域不会被浏览器阻止，利用script标签、加载跨域文件

6.3.2.2实现跨域：服务器准备好JSONP接口（http://.../api/http/jsonp?callback=handleResponse）

手动加载：<script src="http://..."></script>

动态加载：const script=docment.createElement('script')

  script.src = 'http://...'

  

7.xhr的属性

7.1responseType和response

responseType：在xhr.open()后设置 xhr.responseType = 'text'或'json'等 //默认为空

response：响应内容，以上面设置的responseType格式输出 （兼容性较差，只支持IE10以上）

responseText：文本格式的响应内容（只有当responseType为text或空才能使用，否则会报错）

7.2timeout

xhr.timeout = 10 //毫秒，在open后设置，IE8以上支持

7.3withCredential

指定ajax发送请求时是否携带Cookie

默认情况：同域带cookie，跨域不带；跨域可设置withCredential=true；最终能否跨域带cookie还得看服务器同不同意

8.xhr的方法

xhr.abort() //终止当前请求

xhr.setRequestHeader(字段名,字段值) //只能设置部分请求头信息

xhr.setRequestHeader('Content-Type','application/json') //Content-Type字段用来告知服务器，浏览器发送的数据格式，post才需要设置