ajax（async javascript and xml）

---

1. 什么是AJAX？

AJAX核心：基于XMLHttpRequest创建HTTP请求
AJAX解决了网页异步刷新的问题

AJAX是创建交互式网页应用的网页开发技术的一种。

Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。可以用于创建快速动态网页的技术。在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

2、AJAX的基础操作

2-1.创建一个XMLHttpRequest

let xhr = new XMLHttpRequest;

2-2. 打开一个URL地址「发送请求前的一些配置信息」

例如：

xhr.open('GET', '/userInfo?id=1'); 

括号内有几个入参，

1、第一个是 请求方式：GET(get/delete/head/options…) / POST(post/put/patch…)

GET和POST在官方定义中是没有明确的区别的，但是浏览器或者开发的时候，都有一套约定俗成的规范：
GET请求传递给服务器的信息，除了请求头传递以外，要求基于URL问号传参传递给服务器
xhr.open(‘GET’, ‘./1.json?lx=1&name=xxx’)
POST请求要求传递给服务器的信息，是基于请求主体传递
xhr.send(‘lx=1&name=xxx’)
也正是因为这点引来了以下几个不同

• 1、GET传递的信息不如POST多，因为URL有长度限制「IE->2KB」，超过这个长度的信息会被自动截掉，这样导致传递内容过多，最后服务器收到的信息是不完整的！！POST理论上是没有限制的，但是传递的东西越多，速度越慢，可能导致浏览器报传输超时的错误，所以实际上我们会自己手动做限制！！

• 2、GET会产生缓存「浏览器默认产生的，不可控的缓存」：两次及以上，请求相同的API接口，并且传递的参数也一样，浏览器可能会把第一次请求的信息直接返回，而不是从服务器获取最新的信息！！
  xhr.open(‘GET’, ‘./1.json?lx=1&name=xxx&_’+Math.random())
  在请求URL的末尾设置随机数，以此来清除GET缓存的副作用

• 3、POST相对于GET来讲更安全一些：GET传递的信息是基于URL末尾拼接，这个随便做一些劫持或者修改，都可以直接改了，而POST请求主体信息的劫持，没那么好做！！但是“互联网面前，人人都在裸奔”！！所以不管什么方式，只要涉及安全的信息，都需要手动加密「因为默认所有的信息传输都是明文的」！！

第二个是 url（ 请求的URL地址）
第三个是 async 是否采用异步 默认是TRUE
第四个是 username
第五个是 userpass

2-3 监听请求的过程，在不同的阶段做不同的处理「包含获取服务器的响应信息」

1、ajax状态 xhr.readyState

• 0 UNSENT 未发送
• 1 OPENED 执行到open方法
  -----
• 2 HEADERS_RECEIVED 响应头信息已经返回
• 3 LOADING 响应主体信息正在处理
• 4 DONE 响应主体信息已经返回

2、HTTP状态码 xhr.status/xhr.statusText

• 200 OK
• 202 Accepted ：服务器已接受请求，但尚未处理（异步）
• 204 No Content：服务器成功处理了请求，但不需要返回任何实体内容
• 206 Partial Content：服务器已经成功处理了部分 GET 请求（断点续传 Range/If-Range/Content-Range/Content-Type:”multipart/byteranges”/Content-Length….）
• 301 Moved Permanently 永久转移 「域名迁移」
• 302 Move Temporarily 临时转移 「负载均衡」
• 304 Not Modified
• 305 Use Proxy
• 400 Bad Request : 请求参数有误
• 401 Unauthorized：权限（Authorization）
• 403 Forbidden 服务器拒绝执行「为啥可能会已响应主体返回」
• 404 Not Found 地址错误
• 405 Method Not Allowed 请求方式不被允许
• 408 Request Timeout 请求超时
• 500 Internal Server Error 未知服务器错误
• 503 Service Unavailable 超负荷
• 505 HTTP Version Not Supported
• …

2-4、发送请求「send中传递的信息，就是设置的请求主体信息」

基于请求主体传递给服务器的数据格式是有要求的「Postman接口测试工具」
1、form-data 主要应用于文件的上传或者表单数据提交
xhr.setRequestHeader(‘Content-Type’, ‘multipart/form-data’);
------
let fd = new FormData;
fd.append(‘lx’, 0);
fd.append(‘name’, ‘xxx’);
xhr.send(fd);
2、x-www-form-urlencoded格式的字符串
格式：“lx=1&name=xxx” 「常用」
Qs库：$npm i qs
Qs.stringify/parse:实现对象和urlencoded格式字符串之间的转换
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form- urlencoded’);
------
xhr.send(Qs.stringify({
lx: 0,
name: ‘xxx’
}));
3.raw字符串格式
普通字符串 -> text/plain
JSON字符串 -> application/json => JSON.stringify/parse 「常用」
XML格式字符串 -> application/xml
…
4.binary进制数据文件「buffer/二进制…」
一般也应用于文件上传
图片 -> image/jpeg
EXCEL -> application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
…
5.GraphQL

1、获取响应主体信息 xhr.response/responseText/responseXML…

    服务器返回的响应主体信息的格式
    + 字符串「一般是JSON字符串」 「最常用」
    + XML格式数据
    + 文件流格式数据「buffer/二进制...」
    + ...

2、获取响应头信息 xhr.getResponseHeader/getAllResponseHeaders

3、总结：ajax核心四步

1、创建XHR（ActiveXObject）

2、打开URL

3、监听状态和获取数据

4、发送请求

4、汇总XHR的属性和方法及事件

xhr.response / xhr.responseText / xhr.responseXML

xhr.status / xhr.statusText

xhr.timeout 超时

xhr.withCredentials 在cors 跨域请求中允许携带资源凭证

xhr.abort() 中断请求

xhr.getAllResponseHeaders()

xhr.getResponseHeader([key])

xhr.open()

xhr.overrideMimeType()

xhr.send()

xhr.setRequestHeader()

附加小知识：路由传参

：