原生 ajax 封装 - HelloWorld开发者社区

一、AJAX 简介

AJAX 全称为 Asynchronous Javascript And XML，就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
AJAX 不是新的编程语言，不是新的一门独立的技术，而是一种使用现有标准的新方法。

二、AJAX 的工作原理

Ajax 的工作原理相当于在用户和服务器之间加了一个中间层(Ajax 引擎)，使用户操作与服务器响应异步化。

三、AJAX 的特点

AJAX 的优点
1. 可以无需刷新页面而与服务器端进行通信。
2. 允许你根据用户事件来更新部分页面内容。
缺点
1. 没有浏览历史，不能回退
2. 存在跨域问题
3. SEO 不友好

四、基本使用

// 1.创建XMLHttpRequest对象
let xhr
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest()
} else if (window.ActiveObject) {
  // 兼容IE6以下版本
  xhr = new ActiveXobject('Microsoft.XMLHTTP')
}

// 2.设置请求信息
xhr.open('get', 'http://localhost:3000/test_get')

// 3.发送请求
xhr.send() // get请求不传body参数，只有post请求使用
/*
      4.接收响应
        - xhr.responseXML 接收xml格式的响应数据
        - xhr.responseText 接收文本格式的响应数据
*/
xhr.onreadystatechange = function () {
  /*
          xhr.readyState 可以用来查看请求当前的状态
            0: 对应常量UNSENT，表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。
            1: 对应常量OPENED，表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息。
            2: 对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已经收到。
            3: 对应常量LOADING，表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。
            4: 对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了
        */
  if (xhr.readyState == 4) {
    let status = xhr.status
    if ((status >= 200 && status < 300) || status == 304) {
      options.success && options.success(xhr.responseText, xhr.responseXML)
    } else {
      options.error && options.error(status)
    }
  }
}

五、解决 IE 缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址即可避免缓存问题

xhr.open('get', 'http://localhost:3000/test_get' + Date.now())

六、AJAX 封装

// 格式化请求参数
function formatParams(data) {
  let arr = []
  for (let name in data) {
    arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]))
  }
  arr.push(('v=' + Math.random()).replace('.', ''))
  return arr.join('&')
}
function ajax(options) {
  options = options || {} // 调用函数时如果options没有指定，就给它赋值{},一个空的Object
  options.method = (options.method || 'GET').toUpperCase() // 请求格式GET、POST，默认为GET
  options.dataType = options.dataType || 'json' // 响应数据格式，默认json
  options.timeout = options.timeout || 30000
  let params = formatParams(options.data) // options.data请求的数据
  let xhr
  // 考虑兼容性
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest()
  } else if (window.ActiveObject) {
    // 兼容IE6以下版本
    xhr = new ActiveXobject('Microsoft.XMLHTTP')
  }

  // 启动并发送一个请求
  if (options.method == 'GET') {
    xhr.open('get', options.url + '?' + params, true)
    xhr.send(null)
  } else if (options.method == 'POST') {
    xhr.open('post', options.url, true)
    // 设置表单提交时的内容类型
    // Content-type数据请求的格式
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    xhr.send(params)
  }

  // 设置有效时间
  setTimeout(function () {
    if (xhr.readySate != 4) {
      xhr.abort()
    }
  }, options.timeout)
  /*
    接收
    options.success成功之后的回调函数  options.error失败后的回调函数
    xhr.responseText,xhr.responseXML  获得字符串形式的响应数据或者XML形式的响应数据
  */
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      let status = xhr.status
      if ((status >= 200 && status < 300) || status == 304) {
        options.success && options.success(xhr.responseText, xhr.responseXML)
      } else {
        options.error && options.error(status)
      }
    }
  }
}
//基本的使用实例
ajax({
  url: 'http://localhost:3000/test_get',
  method: 'get',
  data: {
    name: 'name',
    age: 24,
  },
  success: function (data) {
    console.log(data, 'asdasdsa')
  },
})

七、get/post

可以使用前面封装的 ajax 函数

function get(url, data, callback) {
  ajax({
    url,
    method: 'get',
    data,
    success(result) {
      callback(result)
    },
  })
}
function post(url, data, callback) {
  ajax({
    url,
    data,
    method: 'post',
    success(result) {
      callback(result)
    },
  })
}

// 测试 get
get('http://localhost:3000/test_get', { name: 'name', age: 24 }, function (
  data
) {
  console.log(data, 'get')
})
// 测试 post
post('http://localhost:3000/test_post', { name: 'name', age: 24 }, function (
  data
) {
  console.log(data, 'post')
})