【学习打卡】第3天 Ajax&Fetch与跨域请求-原创手记-慕课网

课程名称：前端工程师2022版、章节：Ajax&Fetch与跨域请求、讲师：Alex

课程内容：

跨域
- JSONP 的原理
- script 标签跨域不会被浏览器阻止，JSONP 主要就是利用 script 标签，加载跨域文件
- 使用 JSONP 实现跨域
- const script = document.createElement('script');
- script.src ='https://www.imooc.com/api/http/jsonp?callback=handleResponse';
- document.body.appendChild(script);
- 例子
- 手动加载 JSONP 接口或动态加载 JSONP 接口
- https://www.imooc.com/api/http/jsonp?callback=handleResponse
- 服务器端准备好 JSONP 接口
- JSONP
- Access-Control-Allow-Origin: * 表明允许所有的域名来跨域请求它，* 是通配符，没有任何限制
- 只允许指定域名的跨域请求,Access-Control-Allow-Origin: http://127.0.0.1:5500
- 使用 CORS 跨域的过程
- ⑦ 如果没找到或不包含想要跨域的域名，就丢弃响应结果
- ⑥ 如果允许跨域，通信圆满完成
- ⑤ 如果是跨域请求，浏览器会从响应头中查找是否允许跨域访问
- ④ 如果是同域下的请求，浏览器不会额外做什么，这次前后端通信就圆满完成了
- ③ 浏览器接收到响应
- ② 后端在响应头中添加 Access-Control-Allow-Origin 头信息
- ① 浏览器发送请求
- CORS 的兼容性
- IE10 及以上版本的浏览器可以正常使用 CORS
- CORS官网 https://caniuse.com/
- CORS
- ① CORS 跨域资源共享
- ② JSONP
- 优先使用 CORS 跨域资源共享，如果浏览器不支持 CORS 的话，再使用 JSONP
- 跨域解决方案
- 阻止跨域请求，其实是浏览器本身的一种安全策略
- 同源策略其他客户端或者服务器都不存在跨域被阻止的问题
- 跨域请求为什么会被阻止
- 与路径无关，路径一不一样无所谓
- 协议、域名、端口号，任何一个不一样，就是不同域
- 向一个域发送请求，如果要请求的域和当前域是不同域，就叫跨域
JSON
- JSON.parse()
- JSON.parse()作用是将JSON字符串转为一个对象，字符串必须符合JSON格式，即键值都必须使用双引号包裹，而不是说任意一个字符串就可以使用JSON.parse方法转成字符串
- 一定要是合法的 JSON 字符串，否则会报错
- JSON.parse() 可以将 JSON 格式的字符串解析成 JS 中的对应值
- JSON.stringify()
- JSON.stringify() 可以将 JS 的基本数据类型、对象或者数组转换成 JSON 格式的字符串
- JSON 的常用方法
- 1.简单值形式
- ① JSON 中没有 undefined 值
- ② JSON 中的字符串必须使用双引号
- ③ JSON 中是不能注释的
- 注意事项
- 数字、字符串、布尔值、null
- JSON 的简单值形式就对应着 JS 中的基础数据类型
- 2.对象形式
- JSON 中对象的属性名必须用双引号，属性值如果是字符串也必须用双引号
- JSON 中只要涉及到字符串，就必须使用双引号
- 不支持 undefined
- 注意事项
- JSON 的对象形式就对应着 JS 中的对象
- 3.数组形式
- 数组中的字符串必须用双引号
- JSON 中只要涉及到字符串，就必须使用双引号
- 不支持 undefined
- 注意事项
- JSON 的数组形式就对应着 JS 中的数组 [1, "hi", null]
- JSON 的 3 种形式
- JSON 有 3 种形式，每种形式的写法都和 JS 中的数据类型很像，可以很轻松的和 JS 中的数据类型互相转换
- 为什么需要 JSON
- JSON 全称是 JavaScript Object Notation
- JSON是Ajax 发送和接收数据的一种格式
XHR对象
- 1.load 事件
- 响应数据可用时触发
- 2.error 事件
- 请求发生错误时触发
- 3.abort 事件
- 调用 abort() 终止请求时触发
- 4.timeout 事件
- 请求超时后触发
- XHR 的事件
- 1.abort()
- 终止当前请求，一般配合 abort 事件一起使用
- 2.setRequestHeader()
- xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- xhr.setRequestHeader('Content-Type', 'application/json');
- 请求头中的 Content-Type 字段用来告诉服务器，浏览器发送的数据是什么格式的
- xhr.setRequestHeader(头部字段的名称, 头部字段的值);
- 设置请求头信息
- XHR 的方法
- responseType 和 response 属性
- response可以用来替代 responseText
- responseText 只能在没有设置 responseType 或者 responseType = '' 或 'text' 的时候才能使用
- timeout 属性
- eg xhr.timeout = 10000;
- 设置请求的超时时间（单位 ms）
- withCredentials 属性
- 最终能否成功跨域携带 Cookie，还要看服务器同不同意
- xhr.withCredentials = true;
- 使用 Ajax 发送请求，默认情况下，同域时，会携带 Cookie；跨域时，不会
- 指定使用 Ajax 发送请求时是否携带 Cookie
- XHR 的属性
Ajax
- POST 请求主要通过请求体携带数据，同时也可以通过请求头携带
- 如果想发送数据，直接写在 send() 的参数位置，一般是字符串
- xhr.send('username=alex&age=18');
- 不能直接传递对象，需要先将对象转换成字符串的形式
- 也需要编码
- POST请求
- GET 请求不能通过请求体携带数据，但可以通过请求头携带
- 如果是GET请求 xhr.send('sex=male');不会报错，但不会发送数据
- 如果携带的数据是非英文字母的话，比如说汉字，就需要编码之后再发送给后端，不然会造成乱码问题，可以使用 encodeURIComponent() 编码
- GET 请求
- Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠 XMLHttpRequest，它是一个构造函数
- Ajax 的使用步骤
- 调用 send() 正式发送请求
- send() 的参数是通过请求体携带的数据
- 如是GET，xhr.send(null);
- 4.发送请求
- xhr.open('HTTP 方法 GET、POST、PUT、DELETE',
- '地址 URL https://www.imooc.com/api/http/search/suggest?words=js ./index.html ./index.xml ./index.txt',
- true );
- 调用 open 并不会真正发送请求，而只是做好发送请求前的准备工作
- 3.准备发送请求
- 当获取到响应后，会触发 xhr 对象的 readystatechange 事件，可以在该事件中对响应进行处理
- xhr.addEventListener('readystatechange', () => {}, fasle);
- 为了兼容性，readystatechange 中不使用 this，而是直接使用 xhr
- 由于兼容性的原因，最好放在 open 之前
- readystatechange 事件监听 readyState 这个状态的变化。readyState状态值一共有5个值，分别代表的含义如下：
- 4：完成，已经接收到全部响应数据。
- 3：接收，已经接收到部分响应数据，还未接受完。
- 2：发送，send方法已被调用，但是尚未接收到响应数据。
- 1：启动，open方法已被调用，但是尚未调用send方法。
- 0：未初始化，已经创建了xhr对象，但是尚未调用open方法。
- 2.监听事件，处理响应
- 1.创建 xhr 对象，例如：const xhr = new XMLHttpRequest();
- Ajax 的基本用法
- Ajax 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的简写
- Ajax 其实就是浏览器与服务器之间的一种异步通信方式
- Ajax 中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据
- XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式
- 初识Ajax
  - Ajax
    - POST 请求主要通过请求体携带数据，同时也可以通过请求头携带
    - 如果想发送数据，直接写在 send() 的参数位置，一般是字符串
    - xhr.send('username=alex&age=18');
    - 不能直接传递对象，需要先将对象转换成字符串的形式
    - 也需要编码
    - POST请求
    - GET 请求不能通过请求体携带数据，但可以通过请求头携带
    - 如果是GET请求 xhr.send('sex=male');不会报错，但不会发送数据
    - 如果携带的数据是非英文字母的话，比如说汉字，就需要编码之后再发送给后端，不然会造成乱码问题，可以使用 encodeURIComponent() 编码
    - GET 请求
    - Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠 XMLHttpRequest，它是一个构造函数
    - Ajax 的使用步骤
    - 调用 send() 正式发送请求
    - send() 的参数是通过请求体携带的数据
    - 如是GET，xhr.send(null);
    - 4.发送请求
    - xhr.open('HTTP 方法 GET、POST、PUT、DELETE',
    - '地址 URL https://www.imooc.com/api/http/search/suggest?words=js ./index.html ./index.xml ./index.txt',
    - true );
    - 调用 open 并不会真正发送请求，而只是做好发送请求前的准备工作
    - 3.准备发送请求
    - 当获取到响应后，会触发 xhr 对象的 readystatechange 事件，可以在该事件中对响应进行处理
    - xhr.addEventListener('readystatechange', () => {}, fasle);
    - 为了兼容性，readystatechange 中不使用 this，而是直接使用 xhr
    - 由于兼容性的原因，最好放在 open 之前
    - readystatechange 事件监听 readyState 这个状态的变化。readyState状态值一共有5个值，分别代表的含义如下：
    - 4：完成，已经接收到全部响应数据。
    - 3：接收，已经接收到部分响应数据，还未接受完。
    - 2：发送，send方法已被调用，但是尚未接收到响应数据。
    - 1：启动，open方法已被调用，但是尚未调用send方法。
    - 0：未初始化，已经创建了xhr对象，但是尚未调用open方法。
    - 2.监听事件，处理响应
    - 1.创建 xhr 对象，例如：const xhr = new XMLHttpRequest();
    - Ajax 的基本用法
    - Ajax 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的简写
    - Ajax 其实就是浏览器与服务器之间的一种异步通信方式
    - Ajax 中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据
    - XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式
    - 初识Ajax

学习心得：通过今天的学习，掌握了Ajax

学习截图：