Ajax基础

AJAX

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

什么是 AJAX

• 异步的 JavaScript 和 XML
• 通过 AJAX，我们可以在不刷新整个页面的前提下，从后端请求数据，实现页面局部的内容刷新（传统网页要更新内容必须重载整个页面）。

AJAX 工作原理

1、在某个阶段触发一个事件，然后浏览器创建一个 XMLHttpRequest 对象，向服务器发送一个请求信息；
2、服务器根据请求的信息作出响应，返回页面所需要的内容；
3、浏览器使用请求到的数据通过 JS 处理实现网页的更新。

AJAX 请求过程

• 创建 XMLHttpRequest 对象

let xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest()
} else {
  xhr = new ActiveXObject('Microsolf.XMLHTTP')
}

• 发送请求

  • GET

  /**
   * type -- 类型
   * url -- 请求地址
   * async -- 是否异步发起请求
   */
  xhr.open(type, url, async)
  
  

  • POST

  /**
   * POST 请求比 GET 请求多一步，发送数据
   */
  xhr.open()
  xhr.send(data)
  

  • 设置请求头

  xhr.setRequestHeader(key, value)
  // 一般前后端使用 JSON 数据格式进行交互，所以我们要设置请求头为
  ('Content-Type', 'application/json')
  

• 根据 xhr 的 readyState 属性判断状态
  readyState 属性的值

  • 0：请求未初始化，open 还没有调用
  • 1：服务器连接已建立，已经调用了 send(),正在发送请求
  • 2：服务器已经接收到请求
  • 3：服务器正在处理请求
  • 4：请求已经完成，浏览器已经接收到响应数据

  通过 XMLRequest 的 readyStateChange 事件感知 readyState 的变化

  xmlHttp.onreadyStateChange = function () {
    if (xmlHttp.readyState === 4 || xmlHttp.status === 200) {
      // 请求到正确的相应内容之后的操作
    }
  }
  

封装一个 AJAX，用于处理 POST 和 GET 请求

参数列表

参数	说明	类型	可选值	默认值
method	请求方法	String	GET/POST	GET
url	请求地址	String	略	空
async	是否异步	Boolean	true/false	true
data	请求参数	Object	{}	空
cb	回调函数	Function	func	空

const request = function (options) {
  let xhr = null
  // 对传递的数据格式化
  let params = fomateParams(options.data)
  // 兼容处理 IE6、IE7
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest()
  } else {
    xhr = new ActiveXObject()
  }
  
  /**
   * 判断请求类型
   * GET 请求直接把格式化后的数据拼接到 URL 后面，不需要设置请求头，不需要调用 send 方法
   * POST 请求，设置请求头，调用 send 方法，传入 处理后的数据
   */
  if (options.type === 'GET') {
    xhr.open(options.type, options.url + params, options.async)
  } else if (options.type === 'POST') {
    xhr.setRequestHeader('Content-type', 'application/x-www-from-urlencoded')
    xhr.open(options.type, options.url, options.async)
    xhr.send(params)
  }

  /**
   * 绑定 readystatechange 事件，判断响应信息
   */
  xhr.addEventListener('readystatechange', function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      options.success(xhr.responseText)
    }
  })
  
  // 定义格式化数据的方法，把对象形式参数转换成 URL 形式的字符串
  const fomateParams = function (obj) {
    if (obj === null) {
      return null
    }
    let arr = []
    for (let key in obj) {
      arr.push(key + '=' + obj[key])
    }
    return arr.join('&')
  }
}

// 调用方法
request({
 method: 'GET',
 url: '',
 async: true,
 data: {
  username: 'tim',
  password: '123123123'
 },
 success: function (res) {
   console.log(res)
 }
})

上面是第一次写的版本，存在诸多问题

• onreadystatechange 的字母都是小写，而不是驼峰 onReadyStateChange，readyStete 属性是驼峰
• readystatechange 应该绑定在 open 方法调用之前，不然感知不到（前面明明说了 readyState 的五种状态，粗心阿）
• 如果使用函数表达式定义格式化数据方法，那么就要放在使用它之前声明（函数表达式不会变量提升，函数声明才会）

改良过后

const request = function (options) {
  let xhr = null
  // 对传递的数据格式化
  let params = fomateParams(options.data)
  // 兼容处理 IE6、IE7
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest()
  } else {
    xhr = new ActiveXObject()
  }

  // readystatechange 事件绑定在 open 方法调用之前
  xhr.addEventListener('readystatechange', function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      options.success(xhr.responseText)
    }
  })
  
  /**
   * 判断请求类型
   * GET 请求直接把格式化后的数据拼接到 URL 后面，不需要设置请求头，不需要调用 send 方法
   * POST 请求，设置请求头，调用 send 方法，传入 处理后的数据
   */
  if (options.type === 'GET') {
    xhr.open(options.type, options.url + params, options.async)
  } else if (options.type === 'POST') {
    xhr.setRequestHeader('Content-type', 'application/x-www-from-urlencoded')
    xhr.open(options.type, options.url, options.async)
    xhr.send(params)
  }
  
  // 函数表达式改为函数声明
  function fomateParams (obj) {
    if (obj === null) {
      return null
    }
    let arr = []
    for (let key in obj) {
      arr.push(key + '=' + obj[key])
    }
    return arr.join('&')
  }
}

2021.04.18 改

/**
     * @param url
     * @param method
     * @param data
     * @param successCallback
     * @param failCallback
     */
    function request(options) {
      let {url, method, async, data, successCallback, failCallback} = options
      // 定义xml对象，根据不同的浏览器使用不同的函数创建
      let xhr
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
      } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
      }
      // 监听请求完成事件
      xhr.onreadystatechange = function (res) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          successCallback(xhr)
        } else {
          failCallback(xhr)
        }
      }
      
      if (method === 'GET') {
        if (data) {
          url = url + '?' + formateParam(data)
        }
        xhr.open(method, url, async)
        xhr.send(null)
      } else {
        xhr.open(method, url, async)
        xhr.send(data)
      }
      
    }
    
    function formateParam(data) {
      if (typeof data !== 'object' || data === null) {
        throw new TypeError('data is not object type')
      }
      if (JSON.stringify(data) === '{}') {
        return ''
      }
      let tempArr = []
      for (let key in data) {
        tempArr.push(key + '=' + data[key])
      }
      return tempArr.join('&')
    }
    
    let options = {
      url: 'https://www.baidu.com',
      method: 'GET',
      async: true,
      data: null,
      successCallback: function (res) {
        console.log(res)
      },
      failCallback: function (res) {
        console.log(res)
      }
    }

拓展空间

POST 与 GET 请求的区别

• GET 一般用户请求数据，POST 一般用于向服务器发送数据，但不是绝对的，POST 也可用来请求数据。
• GET 发送数据拼接在 url 后面，这就意味着我们不能通过 GET 传递过大的数据量；POST 传递参数通过 send 方法发送，服务端从请求体中获取数据。
• GET 发送数据的长度有限制（虽然本身没有限制，但URL有长度限制，这是各浏览器厂商的限制），POST 无限制。
• GET 请求比 POST 请求更加不安全，因为发送数据的时候直接暴露在 URL 中。
• GET 请求会被浏览器主动缓存，POST 不会主动缓存，除非手动设置。
• GET产生一个TCP数据包；POST产生两个TCP数据包。对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

TCP

三次握手

• 客户端发送SYN，表明要向服务器建立连接。同时带上序列号ISN
• 服务器返回ACK（序号为客户端序列号+1）作为确认。同时发送SYN作为应答（SYN的序列号为服务端唯一的序号）
• 客户端发送ACK确认收到回复（序列号为服务端序列号+1）

为什么要三次握手

• 第一次握手：证明了发送方能发数据
• 第二次握手：ack确保了接收方能收数据，syn确保了接收方能发数据
• 第三次握手：确保了发送方能收数据

常见 HTTP 响应码

• 100 这个临时响应表明，迄今为止的所有内容都是可行的，客户端应该继续请求，如果已经完成，则忽略它。
• 200 OK 请求成功
• 301 被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个 URI 之一。
• 302 临时重定向
• 304 Not Modified 如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。
• 400 Bad Request 语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求；请求参数有误。
• 401 Unauthorized 未授权
• 403 Forbidden 禁止访问
• 404 Not Found 未找到
• 405 Method Not Allowed 请求方法错误
• 500 Internal Server Error 服务器遇到了不知道如何处理的情况
• 502 Bad Gateway 此错误响应表明服务器作为网关需要得到一个处理这个请求的响应，但是得到一个错误的响应
• 504 Gateway Timeout 当服务器作为网关，不能及时得到响应时返回此错误代码。