AJAX 基础知识（一）

Guyal_
110 阅读7分钟

什么是 AJAX

  • async javascript and xml：异步的 JS 和 XML
    • 全局刷新「服务器渲染」和局部刷新「AJAX」
  • async JavaScript：这里不是指的以后发送 AJAX 请求都采用异步
    • 而是代表浏览器的异步「局部」刷新「前后端分离」
    • 浏览器的全局刷新「不分离，服务器渲染」
    • XML：可扩展的标记语言「自己定义的」
    • HTML：超文本标记语言「W3C规定的」

AJAX 的核心步骤

一、创建一个 XMLHTttpRequest 实例对象「IE 低版本浏览器使用的是：ActiveXObject」

let xhr = new XMLHttpRequest;

二、发送请求前的一些配置信息

  1. method：请求方式「一般推荐使用大写」

    • GET 系列的请求

      • GET：项目中，GET 一般用于从服务器获取信息「给服务器的少，从服务器拿的多」
      • DELETE：一般用于删除服务器上的某个文件
      • HEAD：只获取服务器的响应头信息，不需要获取响应主体信息「状态码返回：204」
      • OPTIONS：试探请求
        • 在没发送真实的请求之前，总是先发送一个 OPTIONS 试探请求，主要是验证两端是否能够跨域通信
        • 如果能跨域通信了，那么在发送真正的请求

    • POST 系列的请求

      • POST： 一般用于给服务器推送信息「给服务器的多，从服务器端获取的少」

      • PUT：用于向服务器上存放文件或者存放大批量数据「富文本编辑器/传文件」

      • PATCH：

    GET 和 POST 两大系列的区别

    • 传递的参数不同
      • GET 系列的请求，传递给服务器的信息，除了请求头传递以外，要求基于 URL 问号传参的形式传递给服务器完成的
      • POST 是基于请求主体完成的；当然都可以设置请求头，携带部分信息
    • GET 传递的信息不如 POST 多
      • 因为 URL 有长度限制的「IE 下是有 2KB 的限制」，超过这个长度的信息会被自动截掉，这样导致内容过多，最后服务器收到的信息是不完整的
      • POST 理论上是没有限制的，但是传递的东西越多，速度越慢，可能导致浏览器报错，传输超时的错误，所以实际上我们会自己手动做限制
    • GET 会产生缓存「浏览器默认产生的，不可控的缓存」
      • 两次及以上，请求相同的 API 接口，并且传递的参数也一样，浏览器可能会把第一次请求的信息直接返回，而不是从服务器获取最新的信息
      • 清除缓存的方式：在请求 URL 的末尾设置随机数，以此来清除 GET 缓存的副作用
    • POST 相对于 GET 来讲更安全一些

      • GET 传递的信息是基于 URL 末尾拼接，这个随便做一些劫持或者修改，都可以直接改了

      • POST 请求也不是绝对的安全，只要涉及安全的信息，都需要手动加密「因为默认所有的信息传输都是明文的」

    什么时候用 GET / POST

    • 敏感或者需要保证安全的一些数据需要使用 POST
    • 传递给服务器信息比较多的时候，也需要使用 POST
  2. URL 请求地址
  3. async 是否采用异步
    • 默认为 true，一般都采用异步编程，以防止同步下，当数据请求超时，其余事情无法处理的问题（避免阻塞）
  4. username/userpass
    • 提供用户名和密码，只有提供了之后才能发送请求

三、监听请求的过程：xhr.onreadystatechange = function(){}

  1. readystate：AJAX 请求状态
    • 0：UNSENT「最开始」
    • 1：OPENED「已经执行 opend 方法了」
    • 2： HEADERS_RECEIVED「服务器已经返回了响应头信息」
    • 3：LOADING「响应主体信息正在处理和返回」
    • 4：DONE「响应主体信息已经获取，此时证明 AJAX 请求结束了」
  2. 服务器返回的 HTTP 状态码

  • xhr.status(状态码)

    • 常见状态码
      • 200：OK「成功」
      • 1：通知
      • 2：代表成功
      • 3： 代理成功「重定向」，需要进行一些处理
      • 4：客户端错误
      • 5：服务器端错误
    • 响应状态码
      • 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：比如：调用第三方接口，不允许使用
      • 404 Not Found：找不到文件「地址错误」
      • 405 Method Not Allowed：请求方式不被允许
      • 408 Request Timeout：请求超时
      • 500 Internal Server Error：服务器出现异常，具体不知道哪出现的异常「未知服务器错误」
      • 503 Service Unavailable：超载负荷「超出服务器所能承受的最大容量了」
      • 505 HTTP Version Not Supported：HTTP 版本不支持

  • 获取响应主体信息

    • xhr.response
    • xhr.responseText
    • xhr.responseXML

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

    • 字符串「一般是 JSON 字符串」「最常用的」
    • XML 格式数据
    • 文件流格式数据「buffer/二进制」

  • 获取响应头信息

    • xhr.getResponseHeader：获取指定的响应头信息
    • xhr.getAllResponseHeaders：获取所有的响应头信息

  • 设置请求头

    • xhr.setRequestHeader()

四、发送数据请求：xhr.send()

  • send 中存放的是基于请求主体传递给服务器的信息，如果没有则传递 null
  • POST 请求通过请求主体发送信息
  • 设置请求头信息&超时时间&携带资源凭证，需要设置在 open 之后 send 之前
  • 设置请求头信息中，不允许出现中文
  • send 方法，默认把对象格式转换为字符串格式：text/plain

数据格式「设置请求头中的 Content-Type」

  • form-data：主要应用于文件的上传或者表单数据提交或者图片
    • 'Content-Type', 'multipart/form-data'
  • x-www-form-urlencoded：类似于问号传参格式「"lx=1&name=gy"」
    • 'Content-Type', 'application/x-www-form-urlencoded'
    • Qs.stringify/parse：实现对象和 urlencoded 格式字符串之间的转换
    • JSON.stringify/JSON.parse 也可以实现
  • binary：进制数据文件，一般用于文件上传
    • 图片
      • 请求头：image/jpeg
    • Excel 格式
      • 请求头：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
  • 普通字符串格式
    • Content-Type：text/plain
  • JavaScript 字符串格式
    • Content-Type：application/javascript
  • JSON 字符串
    • Content-Type：application/json
  • XML 格式字符串
    • Content-Type：application/xml

AJAX 方法

  • abort：中断当前 AJAX 请求，会触发：xhr.onabort() 事件
  • getAllResponseHeaders：获取所有的响应头信息『当做字符串获取』
  • getResponseHeader：获取指定的响应头信息
  • open
  • overrideMimeType：指定 content-Type 类型
  • send：发送请求
  • setRequestHeader：设置响应头信息

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

  • xhr.response / xhr.responseText / xhr.responseXML
  • xhr.status / xhr.statusText
  • xhr.timeout
  • xhr.withCredentials
  • xhr.abort()
  • xhr.getAllResponseHeaders()
  • xhr.getResponseHeader([key])
  • xhr.open()
  • xhr.overrideMimeType()
  • xhr.send()
  • xhr.setRequestHeader()

AJAX 事件监听

  • onabort：中断 AJAX 请求，触发
  • onerror：请求失败
  • onload：加载成功
  • onloadend：加载完成
  • onloadstart：加载开始
  • onprogress：上传文件
  • upload：上传文件
    • onprogress：监听上传进度「做进度条」
    • xhr.upload.onprogress = function() {}：文件传输监听上传进度
  • onreadystatechange：监听状态
  • ontimeout：超时 设置超时时间，监听是否超时
  • readyState：请求状态
  • timeout：设置是否超时
  • status：HTTP 状态码
  • withCredentials：在 CORS 跨域资源请求中，是否允许携带资源凭证「例如：cookie；是否允许携带 cookie」，默认为 false，不允许
  • 获取响应主体信息
    • response: (...)
    • responseText: (...)
    • responseType: (...)
    • responseURL: (...)
    • responseXML: (...)
avatar
文章
阅读
粉丝