ajax学习

1.用处： 可以在网页不刷新的情况下往服务端发送数据得到请求，局部更新技术

应用：

验证名字对不对

导航栏

边滚边出现内容

---

ajax优缺点

AJAX的优点
1.可以无需刷新页图而与服务器端进行通信
2.允许你根据用户事件来更新部分员面内容

AJAX的缺点
1.没有浏览历史,不能回退
2.存在跨域问题(同源)
3.SEO不友好

---

使用ajax

1.创建一个请求

2.配置open方法

第一个参数请求方法
第二个参数请求地址
第三个参数是否异步

3.发出请求

4.监听

也可以onload函数，只有判断正确才会走这个onload，不需要判断readstate的值是不是4

---

2.ajax状态码

. ajax状态码- xhr.readystate

·是用来表示一个ajax请求的全部过程中的某一个状态

readystate === 0:表示未初始化完成，也就是open方法还没有执行

readystate === 1:表示配置信息已经完成，也就是执行完open之后oreadystate === :表示send方法已经执行完成

oreadystate === 3:表示正在解析响应内容

oreadystate === 4:表示响应内容已经解析完毕，可以在客户端使用了

这个时候我们就会发现，当一个ajax请求的全部过程中，只有当readystate = 4的时候，我们才可以正常使用服务端给我们的数据

所以，配合http 状态码为200 ~299。一个ajax对象中有一个成员叫做xhr.status。 这个成员就是记录本次请求的http状态码的两个条件都满足的时候，才是本次请求正常完成。

---

3.请求方法：

get 偏向获取

post偏向提交

put偏向更新，直接覆盖全部，但是后端可以只让你实现偏量更新

patch 偏向修改部分

delete 偏向删除信息

head偏向获取服务器头的信息

option 偏向获取服务器设备信息

connnect 保留请求方式

---

4.fetch

例子：

可以在最后接上catch，弄报错信息：

这是无catch的代码，这种代码就算最后错的，还是会执行log(res)因为第一个res.json的状态是fuliled，所以需要改成下面的那种

这是有catch的代码，我们第一个如果错误返回reject就不会走log（res）,而是直接走下面的err！！！

需求：我们根据我们的名字，查找到id，然后根据id，在第二个表中找到与之对应的评论显示在页面中

第一部分：

如果长度大于0，也就是不是空数组，就代表他有数据。我们就将标题插入到title中，并且返回id=这个参数的json，让第二张图片的then拿到。如果json长度=0，代表没查到，那么我们就清空标题处，不显示。

第二张图片

使用async和await改造代码

---

5.axios（一个库）

需要引入这个库

使用axios

数据存在data里面

使用axios传参

get方法：

一个参数

传的是对象，必须写在params下面

post方法

json格式

from编码

put

id=4的数据被下面的数据覆盖

config配置方法

---

6. axios拦截器

前置拦截器(请求拦截器)，拦截没用的请求，防止后端流量变大和数据不安全

前置拦截器放置的位置在body里，是个全局方法，每个走send调用之前都会调用前置拦截器

通过send后，当get成功后我们在走第一个then之前，一定会先去调用后置拦截器(响应拦截器)

可以return一个自己的东西，会被添加到res对象上

---

中断器

什么时候使用：

点击a后请求还没回来，但是我又点b了，就把a的请求给我释放了。防止在单页面应用里面切换后组件被销毁但是回来的请求看不组件会报错！

一个controller只能控制一个请求，有几个分类页面就要设置几个controller，可以放在数组里面。每次点击都遍历一遍，让其他人abort！！！！！

---

7.同源策略

(1)无法读取非同源网页的Cookie、LocalStorage。
(2)无法接触非同源网页的DOM。
(3)无法向非同源地址发送AJAX请求（可以发送，但浏览器会拒绝接受响应)。

注意:
同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

---

8.jsonp解决同源

Jsonp(JSON with Padding)是json的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域(网站）访问数据需要一个特殊的技术(JSONP)呢?这是因为同源策略。

为什么json可以解决跨域？？

1.script没有跨域限制
2.必须后端配合返回函数()调用
3.前端必须提前申明好这个函数

josn缺点：只能处理get请求

反向代理

nginx转发请求

---