2021.7.14 AJAX基础_npm qs form-url-encoded格式的字符串-CSDN博客

本文链接：https://blog.csdn.net/qq_44014425/article/details/118718932

什么是AJAX?

ajax全名：async javascript and xml
ajax核心作用：实现了数据请求 + 客户端渲染的局部刷新

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

操作步骤：

创建xhr实例：let xhr = new XMLHttpRequest;
打开一个URL地址（发送请求前的一些配置信息）—— open方法和它常见的一些参数
- method主要两个请求方式：GET和POST(get/delete/head/options/post/put/patch…)
- GET和POST请求在官方文档中是没有明确区别的，但是浏览器或者开发的时候，都有一套约定俗成的规范：
  
  GET请求传递给服务器的信息，除了请求头传递以外，要求基于URL问号传参传递给服务器
  xhr.open(‘GET’, ‘./data.json?lx=1&name=xxx’);
  
  POST请求要求传递给服务器的信息，是基于请求主体的
  xhr.send(‘lx=1&name=xxx’);
  
  由于这两个规则导致
  1. GET传递的信息不如POST多，因为URL有长度限制 [IE:2083个字符, chrome:8182个字符]，超过这个长度的信息会被自动截掉，这样导致传递内容过多，最后服务器收到的信息是不完整的！
    POST理论上是没有限制的，但是传递的东西越多，速度越慢，可能导致浏览器报传输超时的错误，所以实际上我们会自己手动限制！
  2. GET请求会产生缓存 [浏览器默认产生的，不可控的缓存]：两次及以上，浏览器请求相同的API接口，并且传递的参数也一样，浏览器可能会把第一次请求的信息直接返回，而不是从服务器获取最新的信息！
    在某些需求时，例如实时观测股票动态的网页，需要每隔一分钟刷新一下网页，这时候我们可以通过手动设置GET请求的参数来实现每次可以请求到新的网页xhr.open('GET', './1.json?lx=1&name=xxx&_'+Math.random())
  3. POST相对于GET来讲更安全一些：GET传递的信息是基于URL末尾拼接，这个随便做一些劫持或者修改，就可以直接改了，而POST请求主体信息的劫持不是很好做。但是“互联网面前，人人都在裸奔！”，所以不管什么方式，只要涉及安全的信息，都需要手动加密！！[因为默认所有的信息传输都是明文的]！
- 这两种请求的参数：
  1. url请求地址
  2. async是否采用异步（默认为true）
  3. username
  4. userpass
监听请求的过程，在不同的阶段做不同的处理（包含获取服务器的相应信息） onreadystatechange
- ajax状态 xhr.readeState
  - 0 UNSENT 未发送
  - 1 OPENED
  - 2 HEADERS_RECEIVED 响应头信息已经返回
  - 3 LOADING 响应主体信息正在处理
  - 4 DONE 响应主体信息已经返回
- HTTP状态码 xhr.status（状态码）/xhr.statusText（对状态码的描述）
  - 200
  - 206 服务器成功处理了部分GET请求（用于断点续传）
  - 301 永久转移（用于域名迁移）
  - 302 临时转移（用于负载均衡）
  - 304 未修改，当前页面在缓存中，服务器未返回任何资源
  - 305 使用代理
  - 400 请求参数有误
  - 401 没有权限
  - 403 服务器拒绝执行
  - 404 地址错误
  - 408 请求超时
  - 500 未知服务器错误
  - 503 服务器超负荷
  - 505 当前HTTP版本不被支持
  - ……
- 获取响应主体信息xhr.response/xhr.responseText/xhr.responseXML...
  服务器返回的响应主体的格式
  - 字符串 [一般是JSON字符串] 最常用
  - XML
  - 进制格式数据
  - 文件流格式数据 [buffer/二进制…]
  - …
- 获取响应头信息xhr.getResponseHeader/xhr.getAllResponseHeaders（获取响应头所有信息）

发送请求：send中传递的信息，就是设置请求主体的信息 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
   ...
5. GraphQL

xhr有多少个方法？
+ abort 中断请求触发xhr.onabort事件
+ onerror 信息没有返回[可能是断网了]
+ onload 信息返回，HTTP状态码不一定是200
+ ontimeout 超时可以通过xhr.ontimeout监听超时时间
+ withCredentials xhr.withCredentials = true 在CORS跨域资源请求中，允许携带资源凭证例如：cookie
+ xhr.upload.onprogress 监听文件上传的进度
+ …