AJAX

• AJAX = Asynchronous JavaScript and XML.
• AJAX 是一种用于创建快速动态网页的技术。
• AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。
• 传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。

实现 原生AJAX

1. 创建 XMLHttpRequest（xhr） 对象实例（准备手机）
2. 建立连接，调用 xhr.open() 建立连接（查找电话号码，准备拨号）
3. 发送数据，调用 xhr.send() （拨号）
4. 准备处理响应数据（等待接通电话，通话）

// 创建核心对象
const xhr = new XMLHttpRequest()
// 建立连接
xhr.open(method, url, async)
// 发送请求
// 如果为 post 需要在 send 前调用 setRequestHeader() 方法设置请求头
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(params)
// 处理响应
xhr.onreadystatechange == function() {
    
    
  // 当 readyState 改变时，执行该回调函数
  // readyState 属性存有 XMLHttpRequest 的状态信息。
  // 可以理解为请求到达哪个阶段了。
  // 状态值可取 0-4 的值，4表示请求处理完毕，响应就绪
  if(xhr.readyState === 4) {
    
    
    // status 表示的是 HTTP 状态码
    // 200 表示 OK (成功)
    if(xhr.status === 200) {
    
    
      // 从响应中获取返回的数据
      let data = xhr.responseText
    }
  }
}

封装后的 AJAX

/**
 * ajax
 * @param options ajax 选项对象，对象结构如：{url, method, data, dataType, success, error}
 *  url: 请求资源的路径
 *  method：请求方法，默认为 GET
 *  async：是否异步，通常 ajax 都使用异步，true 表示异步，false 表示同步
 *  params: 处理用于向后端发送的数据
 *  data：对象，向服务端发送的数据，如：{username: 'admin', password: 'admin'}
 *  dataType：预期从服务端返回的数据格式，默认为 json
 *  success：函数，是请求成功后执行的回调函数，传递请求成功的数据作为参数，如：function(data) {}
 *  error：函数，是请求失败后执行的回调函数
 */
 function ajax(options = {
     
     }) {
    
    
  // 解构在 options 选项中的属性
  let {
    
    url, method = 'GET', data, dataType = 'json', success, error} = options

  if (!url) {
    
    
    throw new Error('ajax 请求必须提供 url 地址')
  }

  // 处理用于向后端发送的数据
  let params = null
  if (data) {
    
    
    // 临时在 params 中保存数组数据
    params = []
    // 迭代 data 对象中各属性 例：{username: 'admin', password: 'admin'}
    for (const key in data) {
    
    
      params.push(`${
      
      key}=${
      
      data[key]}`) // ['username=admin', 'password=admin']
    }
    // 将数组中每个元素以 `&` 符号拼接，生成查询字符串结构
    params = params.join('&')
  }

  // 如果是 GET 数据，并存在向后端发送的数据，则将查询字符串以 ? 号拼接在 URL 后
  if (method === 'GET' && params) {
    
    
    url += `?${
      
      params}`
    params = null
  }

  // 创建核心对象
  const xhr = new XMLHttpRequest()
  // 打开，建立连接
  xhr.open(method, url, true)
  // 设置数据头
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  // 发送请求
  xhr.send(params)
  // 处理响应
  xhr.onreadystatechange = function() {
    
    
    // 请求处理完毕，响应就绪
    if (xhr.readyState === 4) {
    
    
      // HTTP 状态码 2xx 表示成功
      if (xhr.status >= 200 && xhr.status < 300) {
    
    
        // 获取响应数据
        let data = xhr.responseText
        // 如果预期从后端返回的是 JSON 格式的数据，则需要进行 JSON 解析转换
        if (dataType === 'json') {
    
    
          data = JSON.parse(data)
        }
        // 后续数据处理逻辑
        success && success(data)
      } else {
    
    
        // 有错误，则传递HTTP状态码
        error && error(xhr.status)
      }
    }
  }
}