使用原生JS封装一个Ajax

72 阅读 0 评论 48 点赞

我是靠谱客的博主鲤鱼小白菜，最近开发中收集的这篇文章主要介绍使用原生JS封装一个Ajax，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

原生的Ajax写起来比较麻烦，而且每次使用的时候都得从头开始写，导致了很多不必要的工作量，产生了大量的冗余代码。这里就可以封装一个Ajax,以供以后的开发中进行使用。

首先，要想封装一个Ajax，就得弄清楚原生Ajax的代码逻辑：

第一步声明一个xhr对象；第二步就是当xhr.onreadystatechange发生改变的时候，执行相应的处理函数；第三步是用xhr.open打开连接；第四步是通过xhr.send发送数据。在弄清楚其工作原理之后，就可以对Ajax进行封装了。

这里使用的是通过声明class类的方式来进行封装。

class Ajax{
            constructor(obj) {
                this.method = obj.method
                this.url = obj.url
                this.data = obj.data
                this.success = obj.success
            }
            Send(){
                let success = this.success   // 获取obj的success函数这个参数
                // 开始封装Ajax
                var xhr = new XMLHttpRequest()  // 新建一个Ajax
                xhr.onreadystatechange = function(){  // 监听状态的改变
                    // 注册回调函数
                    if(xhr.readyState == 4 && xhr.status == 200){
                        success(xhr.responseText)
                    }
                }
                if(this.method == "get"){
                    xhr.open(this.method,this.url,true)     // 打开连接
                    xhr.send(null)                          // 发送数据
                }else if(this.method == "post"){
                    xhr.open(this.method,this.url,true)     // 打开连接
                    // post设置响应头
                    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
                    // 发送数据
                    xhr.send(JSON.stringify(this.data))     
                }else{
                    console.log("不是乐意识别的请求方式")
                    return false
                }
            }
        }

上述代码为Ajax的封装过程：首先，我们创建一个叫做Ajac的class类，并传入一个obj对象参数，然后再这个类中声明一个Send()方法，用来发起请求，再这个方法中，我们还原了原生Ajax的工作流程，并在条件xhr.readyState == 4 && xhr.status == 200为真的时候，声明了一个success的回调方法，以执行请求成功之后额回调操作。

以下代码为封装好的这个Ajax类的使用方法：

        // 新建一个Ajax类
        var ajax = new Ajax({
            url: 'http://127.0.0.1:8099/api/get',
            method:"get",
            // data:,
            success:function(res){
                console.log(res)
            }
        })
        // 发送请求
        ajax.Send()

其使用方法就跟jQuery中的Ajax的用法差不多，使用的时候就new一个Ajax类，并传入url、method、data等参数，再调用success回调函数。然后通过这个类的Send()方法，就可以发起Ajax请求了。