【学习打卡】第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

学习截图：