什么是Ajax？封装

拒绝76

已于 2022-03-30 11:28:25 修改

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： ajax

于 2022-03-30 11:27:21 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_61434466/article/details/123841270

AJAX是一种创建交互式网页应用的技术，允许在不刷新页面的情况下与服务器交换数据并更新内容。其原理主要涉及XMLHttpRequest对象的使用，包括建立连接、发送请求、监听通信状态和处理响应数据。文章还探讨了Ajax的封装，以简化其在实际应用中的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是ajax

AJAX 全称(Async Javascript and XML) 即异步的 JavaScript 和 XML ，是⼀种创建交互式⽹⻚应
⽤的⽹⻚开发技术，可以在不重新加载整个⽹⻚的情况下，与服务器交换数据，并且更新部分⽹⻚

原理

Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后
⽤ JavaScript 来操作 DOM ⽽更新⻚⾯

实现 Ajax 异步交互需要服务器逻辑进⾏配合，需要完成以下步骤：

创建 Ajax 的核⼼对象 XMLHttpRequest 对象
通过 XMLHttpRequest 对象的 open() ⽅法与服务端建⽴连接
构建请求所需的数据内容，并通过 XMLHttpRequest 对象的 send() ⽅法发送给服务器端
通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
接受并处理服务端向客户端响应的数据结果
将处理结果更新到 HTML ⻚⾯中

举个例⼦：

const request = new XMLHttpRequest()
request.onreadystatechange = function(e){
 if(request.readyState === 4){ // 整个请求过程完毕
 if(request.status >= 200 && request.status <= 300){
 console.log(request.responseText) // 服务端返回的结果
 }else if(request.status >=400){
 console.log("错误信息：" + request.status)
 }
 }
}
request.open('POST','http://xxxx')
request.send()

2.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)
     }
})