Ajax

ajax == async javascript and xml（xml对js不友好，一般是json，只是名字延续了）

步骤：

1、创建 xhr = new XMLHttpRequest()

2、配置 xhr.open (请求方式，请求地址，是否异步)

注：

I、这个是请求本地的 1.json，不能直接运行，要 vscode 插件 Live Server，默认是 5500 端口

II、也可以直接写 ./1.json 或者 1.json ，这里就理解 Live Server 是服务器就行

III、请求方式由后端定，但是推荐这样，其实无所谓

true表示异步，false表示同步（遗弃），默认异步！

同步的话，onload等就不能在下面（不然执行完了才说有回调函数）

3、设置请求头

xrh.setRequestHeader(''xxx“,”xxx'');

格式见：

https://zhuanlan.zhihu.com/p/668148302

4、发送xhr.send()

send 完才有后面的 xhr.onreadystatechange / onload 回调！

5、接受数据，注册一个事件

xhr.onreadystatechange (会执行三次，分别是：2、3、4)

默认可以直接用 xhr.readyState

xhr.responseText 在 xhr.readyState == 4 的时候才拿到最完整的

注：

I、status 状态码

II、最关心的就是 xhr.readyState == 4 的时候

III、xhr.onload 只在 xhr.readyState == 4 时候执行，所以比 xhr.onreadystatechange 更方便！

多种请求方式请求json模拟数据库

视频使用的是 node 的 json-serve 包

1、安装

139-请求方式-1 P140 - 18:07

2、使用

139-请求方式-1 P140 - 21:57

3、代码中使用

注意：

I、json-serve 不能和 live-serve 插件一起用，因为 post 会刷新界面，最好用 vscode 的 preview on web serve 插件

140-请求方式-2 P141 - 13:22

II、json-serve 只能通过id改

140-请求方式-2 P141 - 28:35

jsonp

jsonp是前后端要配合的

后端返回的和前端预留的要一致

执行完删除

只能get请求，不能其他的，但是可以用get传过去（老项目）

cors --》 后端添加就行

vue --》 配置proxy

fetch

fetch 取代 XMLHttpRequest，并不是取代ajax，ajax是前后端交互的一种技术，可以是fetch或者XML HttpRequest封装！

fetch是基于promise封装起来的

fetch两个then

可以是res.json() --》 json 或者 res.text() --》 字符串

1、GET

get不好传参，只能直接加在地址上

fetch的.catch无效，得自己处理，在第一个then中处理

2、post请求

3、put请求

put请求是完全覆盖，password也没了

4、patch请求

patch请求是部分覆盖，password还在

主要还是看后端，自己模拟就是上述这样