AJAX

原生AJAX

XML 简介

XML 被设计用来传输和存储数据。HTML 是在网页中呈现数据的。XML 数据交互，HTML 数据呈现。
XML 和 HTML 类似，不同的是HTML 中都是预定义标签，而 XML 中没有预定义标签。预定义标签是已经被定义的标签，不能改变，比如 strong，ul标签等。，而 XML 中全都是自定义标签，用来表示一些数据，比如name,age,gender等。

不过现在XML 已经被JSON取代了

AJAX 的特点

AJAX 的优缺点

优点：
1.可以无需刷新页面而与服务器端进行通信，这也是创建AJAX 的初衷。
2.允许你根据用户事件来更新部分页面内容。事件例如鼠标点击经过事件等等。
缺点：
1.没有浏览历史，不能回退
2.存在跨域问题（同源）。跨域是从一个服务端到另一个服务端比如从a.com -> b.com。AJAX 不能跨域。
3.对SEO 不友好，也就是对爬虫不友好，不能找到数据。

HTTP协议

HTTP（hypertext transport protocol）协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

请求报文

如果行中的是 GET ,那么请求体就是空的，如果是POST,请求体可以不为空。
请求行的三个内容：请求类型，URL路径，协议版本

响应报文

响应行的三个内容：协议版本，响应状态码，响应字符串。

AJAX 请求的基本操作

0表示初始值，1表示open初始化完成，2表示send发送完成，3表示服务器返回了部分结果，4表示服务器返回了所有的结果。

1. 创建对象
   const xhr = new XMLHttpRequest()
   2.初始化
   xhr.open(‘GET’,‘URL’)
   3.发送
   xhr.send()
   4.事件绑定 处理服务端返回的结果
   xhr.onreadystatechange = function(){
   判断
   }

AJAX 设置请求参数

AJAX POST设置请求体

AJAX 设置请求头

xhr.setRequestHeader(‘名字’，‘值’)
名字和值可以是预定义也可以是自定义。

AJAX 服务端响应JSON数据

服务器将字符串（请求体）返回给客户端，客户端要将返回的字符串转换为对象。有两种方式。
手动对数据进行转化：

自动转化：

设置响应体数据的类型
xhr.responseType = ‘json’

AJAX 请求超时和网络异常处理

手动取消。abort()方法。

Axios 发送AJAX 请求

GET 请求
baseURL 是为了简化代码。

POST 请求

先是请求体，再是其他请求。

Axios函数发送AJAX请求

fetch 函数发送AJAX 请求