是什么

AJAX全称(Async Javascript and XML)
即异步的JavaScript 和XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面

image.png

实现过程

  • 创建 Ajax的核心对象 XMLHttpRequest对象
  • 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接
  • 构建请求所需的数据内容，并通过XMLHttpRequest 对象的 send() 方法发送给服务器端
  • 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
  • 接受并处理服务端向客户端响应的数据结果
  • 将处理结果更新到 HTML页面中
  1. //封装一个ajax请求
  2. function ajax(options) {
  3.     //创建XMLHttpRequest对象
  4.     const xhr = new XMLHttpRequest()
  6.     //初始化参数的内容
  7.     options = options || {}
  8.     options.type = (options.type || 'GET').toUpperCase()
  9.     options.dataType = options.dataType || 'json'
  10.     const params = options.data
  12.     //发送请求
  13.     if (options.type === 'GET') {
  14.         xhr.open('GET', options.url + '?' + params, true)
  15.         xhr.send(null)
  16.     } else if (options.type === 'POST') {
  17.         xhr.open('POST', options.url, true)
  18.         xhr.send(params)
  20.     //接收请求
  21.     xhr.onreadystatechange = function () {
  22.         if (xhr.readyState === 4) {
  23.             let status = xhr.status
  24.             if (status >= 200 && status < 300) {
  25.                 options.success && options.success(xhr.responseText, xhr.responseXML)
  26.             } else {
  27.                 options.fail && options.fail(status)
  28.             }
  29.         }
  30.     }
  31. }
  33.   // 使用
  34.   ajax({
  35.     type: 'post',
  36.     dataType: 'json',
  37.     data: {},
  38.     url: 'https://xxxx',
  39.     success: function(text,xml){//请求成功后的回调函数
  40.         console.log(text)
  41.     },
  42.     fail: function(status){////请求失败后的回调函数
  43.         console.log(status)
  44.     }
  45. })