[JavaScript知识库]ajax请求的封装及理解

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面

Ajax这个术语源自描述从基于 Web 的应用到基于数据的应用
。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户的核心对象XMLHttpRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX工作原理图，如下：

Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后? JavaScript 来操作 DOM ?更新??。
其工作原理：
1.创建 Ajax 的核?对象 XMLHttpRequest 对象
2.通过 XMLHttpRequest 对象的 open() ?法与服务端建?连接，构建请求所需的数据内容
3.并通过 XMLHttpRequest 对象的 send() ?法发送给服务器端
4.通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
5.接受并处理服务端向客户端响应的数据结果
6.将处理结果更新到 HTML ??中

ajax封装
//封装?个ajax请求
function ajax(options) {
     //创建XMLHttpRequest对象
     const xhr = new XMLHttpRequest()
     //初始化参数的内容
     options = options || {}
     options.type = (options.type || 'GET').toUpperCase()
     options.dataType = options.dataType || 'json'
     const params = options.data
     //发送请求
     if (options.type === 'GET') {
         xhr.open('GET', options.url + '?' + params, true)
         xhr.send(null)
     } else if (options.type === 'POST') {
         xhr.open('POST', options.url, true)
         xhr.send(params)
     //接收请求
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4) {
             let status = xhr.status
             if (status >= 200 && status < 300) {
                 options.success && options.success(xhr.responseText, xhr.responseXML)
             } else {
                 options.fail && options.fail(status)
             }
         }
     }
}

根据上?的封装后的使??式：
ajax({
     type: 'post',
     dataType: 'json',
     data: {},
     url: 'https://xxxx',
     success: function(text,xml){//请求成功后的回调函数
         console.log(text)
     },
     fail: function(status){请求失败后的回调函数
         console.log(status)
     }
})

ajax请求的封装参考了这位朋友，别人的劳动成果，要附上