Ajax 异步编程

1. 同步异步概述

1.1 同步

一个人同一时间只能做一件事情, 只有一件事情做完, 才能做另外一件事
落实到代码中, 就是上一行代码执行完成后, 才能执行下一行代码, 即代码逐行执行

1.2 异步

一个人一件事情做了一半, 转而去做其他事情, 当其他事情做完以后, 再回过头继续做之前未完成的事情
落实到代码上, 就是异步代码虽然需要花费时间去执行, 但程序不会等待异步代码执行完成后再继续执行后续代码, 而是直接执行后续代码, 当后续代码执行完成后再回头看异步代码是否返回结果, 如果已有返回结果, 再调用事先准备好的回调函数处理异步代码执行的结果

2. Ajax 封装

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function ajax (options) {
      // 存储的是默认值
      var defaults = {
        type: 'get',
        url: '',
        data: {},
        header: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function () {},
        error: function () {}
      }

      // 使用options对象中的属性覆盖defaults对象中的属性
      Object.assign(defaults, options)

      var xhr = new XMLHttpRequest()
      // 拼接请求参数的变量
      var params = ''
      // 循环用户传递进来的对象格式参数
      for (var attr in defaults.data) {
        params += attr + '=' + defaults.data[attr] + '&'
      }
      // 将参数最后面的&截取掉
      params = params.substr(0, params.length - 1)
      
      // 判断请求方式
      if (defaults.type === 'get') {
        defaults.url = defaults.url + '?' + params
      }

      // 配置ajax对象
      xhr.open(defaults.type, defaults.url)
      if (defaults.type === 'post') {
        var contentType = defaults.header['COntent-Type']
        xhr.setRequestHeader('Content-Type', defaults.header['Content-Type'])
        
        if (contentType === 'application/json') {
          xhr.send(JSON.stringify(defaults.data))
        } else {
          xhr.send(params)
        }
      } else {
        xhr.send()
      }

      xhr.onload = function () {
        // 获取响应头中的数据
        const contentType = xhr.getResponseHeader('Content-Type')
        // 服务器端返回的数据
        var responseText = xhr.responseText
        if (contentType.includes('application/json')) {
          // 将json字符串转换为json对象
          responseText = JSON.parse(responseText)
        }

        if (xhr.status === 200) {
          defaults.success(responseText)
        } else {
          defaults.error(responseText, xhr)
        }
        
      }
    }
    ajax({
      // 请求地址
      url: 'http://localhost:3000/responseData',
      success: function (data) {
        console.log(data)
      }
    })
  </script>
</body>
</html>

Ajax 异步编程

Ajax 异步编程

1. 同步异步概述

1.1 同步

1.2 异步

2. Ajax 封装

猜你喜欢