ajax封装（HTTP状态码，ajax状态值）

1、创建一个XMLHttpRequest对象，这里可以处理一下ie6的兼容问题

2、通过open()与服务器建立连接，这里有三个参数

参数一：请求方式（无论是GET数据还是POST数据，发送的形式都是字符串）

参数二：地址

参数三：是否异步

3、通过send()发送请求也可以用send接受post发送的数据

4、通过onredystatechange监听（页面或者readystate），如果readystate==4（这里只是完成）status==200这两个条件同时满足是就代表于后台搭建成功

5、通过responseText来获取服务器返回的数据（通过回调函数的参数获取）

代码如下：

注意：这里的地址是自己建的json文件随便写的数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function ajax(type, url, success, error) {
      //  浏览器兼容处理
      if (window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest()
      } else {
        var xhr = new ActiveXObject('Microsoft.XMLHTTP')
      }
      const methods = type.toLowerCase()
      // 三个参数
      // 参数一 请求方式
      // 参数二  请求地址
      // 参数三  是否异步   true 为异步  false  不是异步
      xhr.open(methods, url, true)
      // 发送请求
      xhr.send()
      // 监听事件
      xhr.onreadystatechange = function () {
        // 判断
        if (xhr.readyState == 4) {
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            // 成功时返回数据
            success && success(xhr.responseText)
          } else {
            // 失败是返回状态码
            error && error(xhr.status)
          }
        }
      }
    }

    ajax(
      'get',
      '../data/data.json',
      function (res) {
        console.log(res)
      },
      function (err) {
        console.log(err)
      }
    )
  </script>
</html>

拓展一下：

ajax状态值

0---> ajax 对象创建完成但是没有与后台建立链接

1---->ajax 对象与后台建立连接，但是还没有发送完成

2---->ajax 对象发送完成数据还没有接收到

3---->ajax 原始数据部分数据接收完成 (数据还没有进行加密解密)

4---->ajax 数据最终接收完成

同步异步

程序中

同步：一个一个去做

异步：同时做多个事情，比如：一边打游戏，一边聊天，一边吃饭

数据请求时候都是异步的事件定时器 promise

生活中

同步：同时做多个事情

异步：一个一个做程序中正好相反

常见HTTP状态码

200 -> 请求成功

304 -> 重定向

403 -> 服务器拒绝请求

404 -> 请求的资源不存在

414 -> 请求的地址过长

500 -> 后端程序出现了问题

502 -> 后端服务器的问题

ajax封装（HTTP状态码，ajax状态值）

猜你喜欢