Ajax

Ajax 概述

它是浏览器提供的一套方法, 可以实现页面无刷新更新数据, 提供用户浏览网站应用的体验

Ajax 请求步骤

// 创建请求对象
var xhr = new XMLHttpRequest()
// 定义发送方式,发送地址
xhr.open('get', 'http://localhost:3000/first')
// 发送请求
xhr.send()
// 接收请求
xhr.onload = function () {
    // xhr.responseText 获取文本
    console.log(xhr.responseText)
}

请求参数传递

get 请求

xhr.open('get', 'http://localhost:3000/get?username=zs&age=23')

post 请求

// 表单传输
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('username=zs&age=23')
// json 传输
xhr.setRequestHeader('Content-Type', 'application/json;charset=utf8')
xhr.send(JSON.stringify({username: 'zs', age: 23})) // 必须传递对象格式的字符串

Ajax 状态码

在创建 ajax 对象, 配置 ajax 对象 , 发送请求 以及接收完服务端响应数据, 这个过程中每一个步骤会对应一个数值, 这个数值就是ajax状态码

0 ：请求未初始化（还没有调用 open 方法）

1 ：请求已经建立，但是还没有发送（还没有调用 send 方法）

2 ： 请求已经发送

3 ： 请求正在处理中，通常响应中已经有部分数据可以用了

4 ：响应已经完成，可以获取并使用服务器的响应了

xhr.readyState // 获取 ajax 状态码

// 由于响应再获取阶段的不固定性，xhr.readyState 不能准确的获取到当前的状态码
// onreadystatechange 当 readyState 改变时触发 要在 send 前面开始监听
xhr.onreadystatechange = function () {
    console.log(xhr.readyState)
}
xhr.send()

onload 和 onreadystatechange 区别

onload ：不兼容IE低版本浏览器，不要判断 ajax 状态码， 只被调用一次 推荐

onreadystatechange ：兼容IE低版本浏览器 ，需要判断ajax状态码，被调用多次

Ajax 错误处理

• 判断 http 状态码进行处理

  • xhr.status
    

var xhr = new XMLHttpRequest()
xhr.open('get', 'http://localhost:3000')
xhr.send()
xhr.onload = function () {
    if (xhr.status == 200) {
        // 处理代码
    }
}

• 网络中断，请求无法发送到服务端
  • 不会触发onload 事件，会触发xhr对象下面的onerror事件，在onerror 事件处理函数中对错误进行处理

xhr.onerror = function () {
    console.log('网络连接中断...')
}

低版本IE浏览器的缓存问题

在低版本的IE浏览器中， Ajax请求有严重的缓存问题；即在请求地址不发生改变的情况下，只有第一次请求会真正发送到服务端，后续的请求都会从浏览器的缓存中获取结果，即使服务端的数据更新了，客户端依然拿到的缓存中旧数据；

解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同

Ajax 封装

// 封装
function ajax(options) {
  // 设置默认选项
  var defaults = {
    type: 'get',
    url: '',
    data: {},
    header: {
      'Content-type': 'application/x-www-form-urlencoded'
    },
    success: function () {},
    error: function () {}
  }
  Object.assign(defaults, defaults)

  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') {
    xhr.open(defaults.type, defaults.url + '?' + params)
    xhr.send()
  }
  // 判断 post 请求头
  if (defaults.type == 'post') {
    xhr.open(defaults.type, defaults.url)
    xhr.setRequestHeader('Content-Type', defaults.header['Content-Type'])
    if (defaults.header['Content-Type'] == 'application/json;charset=utf8') {
      xhr.send(JSON.stringify(defaults.data))
    } else if (defaults.header['Content-Type'] == 'application/x-www-form-urlencoded') {
      xhr.send(params)
    }
  }
  // 请求成功回调函数
  xhr.onload = function () {
    // 获取服务端请求头
    var resHeader = xhr.getResponseHeader('Content-Type')
    var resText = xhr.responseText
    // 前端获取的数据默认是文本类型, 需要手动处理
    if (resHeader.includes('application/json')) {
      resText = JSON.parse(resText)
    }
    // 指定不同情况下的回调函数
    if (xhr.status == 200) {
      defaults.success(resText, xhr)
    } else {
      defaults.error(resText, xhr)
    }
  }
}

// 调用
jax({
  type: 'post',
  url: 'http://localhost:3000/post',
  header: {
    'Content-Type': 'application/json;charset=utf8'
  },
  data: {
    username: 'zs',
    age: 23
  },
  success: function (data, xhr) {
    console.log(data)
    console.log(xhr)
  },
  error: function (data, xhr) {
    console.log(data, xhr)
  }
})