完整的AJAX

  1. //创建异步对象
  2. const xhr = new XMLHttpRequest();
  3. //设置 请求行 open(请求方式，请求url):
  4. // async: 默认是 true; 代表异步请求
  5. // 如果async = false, 那么 xhr.send() 会阻塞
  6. xhr.open(method: [get, post], url: string, async: [true, false])
  7. //设置请求（GET方式忽略此步骤）头:setRequestHeader()
  8. xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  9. // 2.post的参数在这个函数中设置(如果有参数)send(x+y)
  10. xhr.send();
  11. //监听
  12. xhr.onreadystatechange = () => {
  13.     if (xhr.readyState === 4 && xhr.status === 200) {
  14.        console.log(xhr.responseText);
  15.     }
  16. };
  17. //readyState
  18. 0：初始化，XMLHttpRequest对象还没有完成初始化
  19. 1：载入，XMLHttpRequest对象开始发送请求
  20. 2：载入完成，XMLHttpRequest对象的请求发送完成
  21. 3：解析，XMLHttpRequest对象开始读取服务器的响应
  22. 4：完成，XMLHttpRequest对象读取服务器响应结束

Get/Post

GET POST
后退按钮/刷新 无害 数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签 可收藏为书签 不可收藏为书签
缓存 能被缓存 不能缓存
编码类型 application/x-www-form-urlencoded application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史 参数保留在浏览器历史中。 参数不会保存在浏览器历史中。
对数据长度的限制 是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。 无限制。
对数据类型的限制 只允许 ASCII 字符。 没有限制。也允许二进制数据。
安全性 与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。
在发送密码或其他敏感信息时绝不要使用 GET ！		 POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性 数据在 URL 中对所有人都是可见的。 数据不会显示在 URL 中。

常见请求头

  • 1XX通知
  • 2XX成功
  • 3XX重定向
  • 4XX客户端错误
  • 5XX服务端错误 AJAX - 图1AJAX - 图2AJAX - 图3AJAX - 图4