async javascript and xml
异步js ：AJAX的核心作用： 实现数据请求+客户端渲染 局部刷新
早期， 基于ajax从服务器获取的数据是xml格式的，后期为使用方便改成了json格式

AJAX核心：基于XMLHttpRequest创建HTTP请求

创建xhr实例

打开一个url地址「发送请求前的一些配置」

method：请求方式：GET(get/delete/head/options)/POST(post/put/patch)

  1.   - GET / POST 在官方定义中是没有明显区别的，但浏览器或者开发的时候，都有着一套约定俗成的规范：
  2.      - GET请求传递的信息，除了请求头传递以外，要求基于url问号传参的形式传给服务器
  3.         - xhr.open('GET','./1.json?lx=1&name=xxx')；
  4.      - POST请求要求传递给服务器的信息，是基于请求主体传递
  5.         - xhr.send(‘lx=1&name=xxx')；
  6.      - GET请求不如POST多，因为url有长度限制「IE -> 2kb」超过这个长度的信息不会被自动截掉，最后服务器收到的信息是不完整的，但是传递的东西越多速度越慢，可能会报浏览器传输超市的错误，所以我们实际上会自己手动做限制
  7.      - GET会产生缓存「浏览器默认产生的，不可控的缓存」：两次及以上，请求相同的API接口，并且传递的参数也一样，浏览器可能会把第一次请求的信息直接返回，而不是从服务器获取最新的信息
  8.         - xhr.open('GET','./1.json?lx=1&name=xxx&' + Math.random())；
  9.         - 在请求url的末尾设置随机数，以此来清楚GET缓存的副作用
  10.      - POST相对于GET来讲更安全一些，GET传递的参数是基于url拼接的，这个随便做一些劫持或者修改，都可以直接劫持，而POST请求主体信息的劫持，没那么好做，设计安全的一些信息都需要手动加密，因为默认所有的信息传输都是明文的

url：请求的url地址

async：是否采用异步，默认是true

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

  • ajax状态 xhr.readyState
  • 0 UNSENT 未发送
  • 1 OPENED 获得响应头信息
  • 2 HEADERS_RECEIVED 响应头信息已经返回
  • 3 LOADING 响应头信息正在处理
  • 4 DONE 响应主体信息已经返回


  • HTTP状态码 xhr.state/xhr.statusText
    • 200 成功
    • 202 服务器已接受请求，但尚未处理
    • 204 服务器成功处理了请求，但不需要任何实体内容返回
    • 206 服务器已经成功处理了部分请求 get请求 （断点续传 。。）
    • 301 永久转移 「域名转移」
    • 302 临时转移 「负载均衡」
    • 304
    • 305
    • 400 请求参数错误
    • 401 无权限访问 「Authorization」
    • 403 服务器拒绝执行
    • 404 找不到地址
    • 405 请求方式不被允许
    • 408 请求超时
    • 500 未知服务器错误
    • 503 超负荷
    • 505 当前HTTP版本不支持

一般以2开头是请求成功，3开头成功了，做了特殊处理，4开头的都是客户端错误，5开头服务器错误
https://baike.baidu.com/item/HTTP%E7%8A%B6%E6%80%81%E7%A0%81/5053660?fr=aladdin

  • 获取响应主体信息 xhr.response/responseText/responseXML

服务器返回的响应主体信息的格式

  1.   - 字符串 「一般是json字符串」 「最常用」
  2.   - xml格式数据
  3.   - 文件流格式数据 「buffer / 二进制」
  • 获取响应头信息 xhr.getResponseHeader/getAllResponseHeader

    发送请求，send中传递的信息就是请求主体的信息

    基于请求主体传递给服务器的数据格式是有要求的
    1.form-data 主要用于文件的上传或者表单数据提交
    xhr.setrequestheader(‘content-type’, ‘multipart/form-data’) // post传输请求头设置 form-data的格式，需前后端一致
    let ces = new FormData;
    ces.append(‘lx’, 0);
    xes.append(‘name’, ‘xxx’);
    shr.send(ces);

2.x-www-form-urlencoded 格式的字符串
格式： “lx=1&name=xxx” 「常用格式」
Qs库，序列化参数 npm i qs
Qs.stringfy/parse: 实现对象和urlencoded格式字符串之间的转换
xhr.setrequestheader(‘content-type’, ‘x-www-form-urlencoded’)
Qs.stringfy({lx: 0, name: ‘xxx’})

3.row字符串格式
普通字符串 text/plain
JSON字符串 appliaction/json json.stringfy/parse 「常用」
xml格式字符串 application/xml

4.binary进制数据文件 「buffer/二进制文件」
一般也应用于文件上传
图片 image/jpeg
excel applicetion/vnd.openxmlformats-officedocument.spreadsheetml.sheet

5.GraphQL

实例：

  1. let xhr = new XMLHttpRequest；
  2. xhr.open('GET','./1.json'， true)；
  3. //设置请求头信息，超时时间，携带资源凭证 需要在open之后
  4. xhr.setrequestheader('content-type', 'x-www-form-urlencoded')
  5. xhr.onreadystatechange = function(){
  6.   if(xhr.readyState === 4 && xhr.state === 200){
  7.     xhr.response
  8.     xhr.responseText
  9.     xhr.responseXML
  10.     xhr.getResponseHeadeajax
  11.   }
  12. }
  13. xhr.send(null)
  15. // result api
  16. let xhr = new XMLHttpRequest；
  17. xhr.open('GET','./userinfo?id=1')； // router Query
  18. xhr.open('GET', './userinfo/1') // router Params
  19. // 后端需按照这种作处理 app.get('/userinfo/:id')
  20. xhr.onreadystatechange = function(){
  21.   if(xhr.readyState === 4 && xhr.state === 200){
  22.     if(xhr.status !== 200) return;
  23.     if(xhr.readyState === 4){
  24.       console.log(xhr.response)
  25.     }
  26. }
  27. }
  28. xhr.send(null)

xhr还有哪些方法？
xhr.about 中断请求 触发 xhr.onabout
xhr.time 设置超时事件 xhr.ontime 监听是否超时
xhr.withCredentials 在CORS跨域资源请求中，允许携带跨域资源凭证，默认：false， 例如cookie，
xhr.upload.onprogress 监听文件上传的进度