【面试】1006- 面试官：Ajax 原理是什么？如何实现？

浅浅的花香味﹌ 2022-10-12 01:52 233阅读 0赞

![b7fe55d17561accc19d71024f35fc68a.png][]

## 一、是什么 ##

`AJAX`全称(Async Javascript and XML)

即异步的`JavaScript` 和`XML`，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页

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

流程图如下：

![9ef4e5d24002a3dc30c04c7a425e7abb.png][]

下面举个例子：

领导想找小李汇报一下工作，就委托秘书去叫小李，自己就接着做其他事情，直到秘书告诉他小李已经到了，最后小李跟领导汇报工作

`Ajax`请求数据流程与“领导想找小李汇报一下工作”类似，上述秘书就相当于`XMLHttpRequest`对象，领导相当于浏览器，响应数据相当于小李

浏览器可以发送`HTTP`请求后，接着做其他事情，等收到`XHR`返回来的数据再进行操作

## 二、实现过程 ##

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

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

### 创建XMLHttpRequest对象 ###

通过`XMLHttpRequest()` 构造函数用于初始化一个 `XMLHttpRequest` 实例对象

const xhr = new XMLHttpRequest();

### 与服务器建立连接 ###

通过 `XMLHttpRequest` 对象的 `open()` 方法与服务器建立连接

xhr.open(method, url, [async][, user][, password])

参数说明：

*  `method`：表示当前的请求方式，常见的有`GET`、`POST`
 *  `url`：服务端地址
 *  `async`：布尔值，表示是否异步执行操作，默认为`true`
 *  `user`: 可选的用户名用于认证用途；默认为\`null
 *  `password`: 可选的密码用于认证用途，默认为\`null

### 给服务端发送数据 ###

通过 `XMLHttpRequest` 对象的 `send()` 方法，将客户端页面的数据发送给服务端

xhr.send([body])

`body`: 在 `XHR` 请求中要发送的数据体，如果不传递数据则为 `null`

如果使用`GET`请求发送数据的时候，需要注意如下：

*  将请求数据添加到`open()`方法中的`url`地址中
 *  发送请求数据中的`send()`方法中参数设置为`null`

### 绑定onreadystatechange事件 ###

`onreadystatechange` 事件用于监听服务器端的通信状态，主要监听的属性为`XMLHttpRequest.readyState` ,

关于`XMLHttpRequest.readyState`属性有五个状态，如下图显示

![55278f04f23be87b0be9e07dbc698e4d.png][]

只要 `readyState`属性值一变化，就会触发一次 `readystatechange` 事件

`XMLHttpRequest.responseText`属性用于接收服务器端的响应结果

举个例子：

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()

## 三、封装 ##

通过上面对`XMLHttpRequest`对象的了解，下面来封装一个简单的`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)
        }
    })

### \--The End-- ###

面试官JavaScript系列正在更新：16/33

*  [面试官：说说你对Javascript中作用域的理解?][Javascript]  
    
 *  [面试官：JavaScript原型，原型链 ? 有什么特点？][JavaScript_ _]  
    
 *  [面试官：说说Javascript中的继承？如何实现继承？][Javascript 1]  
    
 *  [面试官：说说你对Javascript中this对象的理解][Javascript_this]  
    
 *  [面试官：JavaScript中执行上下文和执行栈是什么？][JavaScript]  
    
 *  [面试官：JavaScript中的事件模型如何理解?][JavaScript 1]  
    
 *  [面试官：解释下什么是事件代理？应用场景？][Link 1]

![8bae8dae39530148e400a54d9d0cddfd.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 2]

![75f69194cb4301ff1e1cab4af0fa0a7f.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[b7fe55d17561accc19d71024f35fc68a.png]: /images/20221005/e2c5583b9fa041dfb1249234fbb12b49.png
[9ef4e5d24002a3dc30c04c7a425e7abb.png]: /images/20221005/3e7608cb14d94f9b95f37dba8ac7ae34.png
[55278f04f23be87b0be9e07dbc698e4d.png]: /images/20221005/130690d054f345e4a89026e97b6cdf69.png
[Javascript]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10caadcb6743bba52b054baa67b782ec057522d87204fc5fb02050e3a01fcc32a2de949f62&idx=2&mid=2247485691&scene=21&sn=17ceeb1eebf1ca79991a44487fae3b06#wechat_redirect
[JavaScript_ _]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb5dcb67424bf470fe32ebe876597f66a9fed17bb9ef18c53eb33e39504dbcec7c2b4a98&idx=1&mid=2247485707&scene=21&sn=56b670c1587570276d1f2dda04c804a4#wechat_redirect
[Javascript 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb77cb6742619b2a76aa0d882d4e94d7021d8813f6ea09667b16146040faed9806203523&idx=2&mid=2247485729&scene=21&sn=e3d6148c0f4ab3617bcdf8f8501c7eb2#wechat_redirect
[Javascript_this]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb6dcb67427b39ac8102099de814bfe368726aa25cb78967f8ca7c1107c59fc5ac29ba92&idx=2&mid=2247485755&scene=21&sn=8df3e7c0ada42fc112f2fa4c8bf0448c#wechat_redirect
[JavaScript]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb1dcb67420bfb31f6560570b9b1dbcb3b46ad83bee8ec240ae1bfa8fbe9edfb18521576&idx=1&mid=2247485771&scene=21&sn=cb4eccd7996c95ca260c4a8d85e92113#wechat_redirect
[JavaScript 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cbc1cb6742d7d877332259c1563d2dcc8b114c5b1d1ed8c08b71b47502053ae5cb341c8e&idx=1&mid=2247485847&scene=21&sn=6214e1eda9a0205c143e6c26ac4426ca#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb89cb67429f566962a6b4f76b953cbe1f59d35e8b338dbb6d1b42d2e0e647ca0fe47f5c&idx=2&mid=2247485919&scene=21&sn=15d93516f2118b13700a1e6e2ee1a56a#wechat_redirect
[8bae8dae39530148e400a54d9d0cddfd.gif]: /images/20221005/0320c2db7a194de3a0deb6ecb993d453.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[75f69194cb4301ff1e1cab4af0fa0a7f.gif]: /images/20221005/af03ebf17aa7478a8bf0ea00c2457d1a.png