XMLHttpRequest
什么是XMLHttpRequest
XMLHttpRequest是浏览器内置的一个构造函数。
作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。
axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装出来的！
使用XMLHttpRequest发起GET请求
主要的 4 个实现步骤：
①创建 xhr 对象
②调用
xhr.open()函数③调用
xhr.send()函数④监听
load事件
<script>
// 1.准备对象
let xhr = new XMLHttpRequest()
// 2.准备数据 xhr.open(方式,地址,同步或异步 默认为异步)
xhr.open('get', 'http://www.liulongbin.top:3009/api/get')
// 3.发送数据
xhr.send()
// 4.监听load事件 xhr.response可以得到服务器返回的数据
xhr.addEventListener('load', function () {
console.log(xhr.response)
})
</script>发起GET请求时携带查询参数
可以在请求的 URL 地址后面通过?的形式携带查询参数。
<script>
let xhr = new XMLHttpRequest()
// get请求传参是在地址url后面添加
xhr.open('get', 'http://www.liulongbin.top:3009/api/get?name=jack&age=18')
xhr.send()
xhr.addEventListener('load',function(){
console.log(xhr.response)
})
</script>使用XMLHttpRequest发起POST请求，并携带请求体数据
当需要携带请求体数据时，需要进行额外的两步操作：
①在 xhr.open() 之后，调用 xhr.setRequestHeader()函数，指定请求体的编码格式
②在 xhr.send() 中，指定要提交的请求体数据
<script>
let xhr = new XMLHttpRequest()
xhr.open('post', 'http://www.liulongbin.top:3009/api/post')
// 发送post请求带参数
// 1.一般需要设置请求头信息
// 2.将post请求体的参数传入到send()方法中
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('name=rose&age=21')
xhr.addEventListener('load', function () {
console.log(xhr.response)
})
</script>数据交换格式
什么是数据交换格式
数据交换格式，就是服务器端与客户端之间数据传输的格式。
两种数据交换格式：① XML（很少用）② JSON（主流）
什么是JSON
JSON（全称：JavaScript Object Notation）是一种数据交换格式，它本质上是用字符串的方式来表示对象或数组类型的数据。
JSON数据
用字符串的方式来表示的对象或数组类型的数据，叫做JSON 数据。
JSON 数据的格式有两种：
①对象格式
②数组格式
对象格式的JSON数据
对象格式的 JSON 数据，最外层使用{ } 进行包裹，内部的数据为key: value 的键值对结构。其中：
①key 必须使用英文的双引号进行包裹
②value 的值只能是字符串、数字、布尔值、null、数组、对象类型（可选类型只有这 6 种）
数组格式的JSON数据
数组格式的 JSON 数据，最外层使用[ ]进行包裹，内部的每一项数据之间使用英文的 , 分隔。其中：
每一项的值类型只能是字符串、数字、布尔值、null、数组、对象这 6 种类型之一。
数据交换格式
把JSON数据转换为JS数据
调用浏览器内置的JSON.parse()函数，可以把JSON 格式的字符串转换为JS 数据
<script>
// 将json数据转换成js对象或数组 JSON.parse()
let str1 = '{"name":"jack","age":18,"gender":"男"}'
console.log(JSON.parse(str1)) // {name: 'jack', age: 18, gender: '男'}
let str2 = '["red", 100, true, null]'
console.log(JSON.parse(str2)) // ['red', 100, true, null]
// console.log(JSON.parse('abc')) // 报错,字符串不符合json规范
</script>把JS数据转换为JSON数据
调用浏览器内置的 JSON.stringify()函数，可以把JS 数据转换为 JSON 格式的字符串
<script>
// 将js对象转换为json对象 JSON.stringify()
let obj = {
name: 'jack',
age: 18,
gender: '男'
}
console.log(JSON.stringify(obj)) // {"name":"jack","age":18,"gender":"男"}
let arr = ['red', 100, true, null]
console.log(JSON.stringify(arr)) // ["red",100,true,null]
</script>序列化和反序列化
①把真实数据转换为字符串的过程，叫做序列化
②把字符串转换为真实数据的过程，叫做反序列化
把XMLHttpRequest请求到的JSON数据反序列化为JS对象
在xhr对象的 load 事件中，通过 xhr.response 访问到的是 JSON 格式的字符串数据。可以调用JSON.parse()函数将 xhr.response 转化为 JS 对象。
<script>
let xhr = new XMLHttpRequest()
xhr.open('post', 'http://www.liulongbin.top:3009/api/post')
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('name=rose&age=21')
xhr.addEventListener('load', function () {
// 可以调用 JSON.parse() 函数将 xhr.response 转化为 JS 对象
let data = JSON.parse(xhr.response)
console.log(data)
})
</script>JSON 文件
后缀名是.json的文件叫做JSON 文件，专门用来存储JSON格式的数据。
注意：json 结尾的文件，一般都是项目的配置文件
JSON文件的语法要求:
在 JSON 文件中
定义 JSON 格式的数据时，要遵守以下的 6 条规则：①
属性名必须使用双引号包裹②
字符串类型的值必须使用双引号包裹③JSON 中
不允许使用单引号表示字符串④JSON 中
不能写注释⑤JSON 的
最外层必须是对象或数组格式⑥不能使用
undefined或函数作为 JSON 的值
同源策略 & 跨域
什么是同源
同源指的是两个 URL 地址具有相同的协议、主机名、端口号。
什么是同源策略
同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。
浏览器的同源策略规定：不允许非同源的 URL 之间进行资源的交互。
什么是跨域
同源指的是两个 URL 的协议、主机名、端口号完全一致，反之，则是跨域。
出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
浏览器对跨域请求的拦截过程
浏览器允许发起跨域请求。但跨域请求回来的数据，会被浏览器拦截，无法被页面获取到。
突破浏览器跨域限制的方案
JSONP 和 CORS 是实现跨域数据请求的两种技术方案。
现在最新的解决方案是ajax反向代理。
跨域请求数据需求是存在的,怎么办?
CORS: 本质服务器在响应添加一个响应头:Access-Control-Allow-Origin: *
反向代理: 本质ajax去自己的服务器要数据,让自己的服务器去第三方的服务器取数据,自己的服务器再返回数据给浏览器
jsonp:动态的创建script标签,给script标签添加src属性,因为动态的创建script标签发送请求是异步
在当前的页面上声明了一个函数,服务器端返回的是该函数的调用,即使是异步,函数声明中的代码没有执行,只有当函数调用回来时,函数体中的代码才执行
数据是作为函数调用的实参返回的
CORS
CORS的概念
CORS是解决跨域数据请求的终极解决方案，全称是 Cross-origin resource sharing。
CORS 技术需要浏览器和服务器同时支持，二者缺一不可：
①浏览器要支持CORS 功能（主流的浏览器全部支持，IE 不能低于 IE10）
②服务器要开启 CORS 功能（需要后端开发者为接口开启 CORS 功能）
CORS的原理
服务器端通过 Access-Control-Allow-Origin 响应头，来告诉浏览器当前的 API 接口是否允许跨域请求。
CORS的两个主要优势
①CORS 是真正的 Ajax 请求，支持 GET、POST、DELETE、PUT、PATCH 等这些常见的 Ajax 请求方式
②只需要后端开启 CORS 功能即可，前端的代码无须做任何改动
JSONP
什么是 JSONP
JSONP是实现跨域数据请求的一种技术解决方案。它只支持 GET 请求，不支持 POST、DELETE 等其它请求。
在实际开发中很少被使用
在面试中可能会问到 JSONP 的原理
JSONP不是真正的Ajax技术
在解决跨域问题时：
CORS方案用到了 XMLHttpRequest 对象，发起的是纯正的 Ajax 请求
JSONP方案没有用到 XMLHttpRequest 对象，因此，JSONP 不是真正的 Ajax 技术
结论：只要用到了 XMLHttpRequest 对象，发起的就是 Ajax 请求！
JSONP的底层实现原理
JSONP 在底层，用到了 script 标签的 src 属性！
原因：
script标签的 src 属性，不受浏览器同源策略的限制
可以把非同源的 JavaScript 代码请求到本地，并执行
防抖 & 节流
什么是防抖
防抖（debounce）指的是：频繁触发某个操作时，只执行最后一次。
防抖的应用场景
场景：搜索框只在输入完后，才执行查询的请求。
好处：这样可以有效减少请求的次数，节省网络资源。
节流
节流（throttle）指的是：单位时间内，频繁触发同一个操作，只会触发 1 次。
节流的应用场景
射击游戏中，单位时间内只能发射一颗子弹。