原生JavaScript实现Ajax（三）：ajax函数的最终封装

最新推荐文章于 2024-01-31 20:28:38 发布
置顶 最新推荐文章于 2024-01-31 20:28:38 发布
阅读量1.8k 收藏 5
点赞数 3
分类专栏： 前端 文章标签： javascript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GY_U_YG/article/details/72823222
版权

经过前面两篇文章的详细讲解，我们已经对ajax有了进一步的认识，基于此，
我们完全可以自行封装一个ajax函数，用法和jQuery中的一样，下面我们就开始吧

封装ajax

1，我们本着从简单到复杂的原则，不搞一步到位，一步一步来完成，比如，我们先是完成一个get请求的异步传输

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('MicroSoft.XMLHTTP');
    }
}

function ajax(method, url, data, async) {
    var xhr = createXHR();
    url = url + '?rand=' + Math.random() + '&' + data;
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                alert(xhr.responseText);
            } else {
                alert('获取数据错误！错误代号：' + xhr.status + '错误信息：' + xhr.statusText);
            }
        }
    }

    xhr.open(method, url, async);
    xhr.send(null);
}


//调用
document.addEventListener('click', function() {
    ajax('GET', 'test.php', 'user=guoyu&age=28', true);
}, false);

这里写图片描述

下面我们来逐步修缮，完善这个ajax函数封装

首先是 ajax函数中当xhr.status == 200时，弹出alert(xhr.responseText);我们肯定不能这么做，当所有都正确的运行到完全获取到服务器返回数据时，我们要拿到返回的数据进行业务上的使用。有人说，可以return xhr.responseText，但是你再仔细看，这是函数里面嵌套的函数，注意作用域的问题，ajax里套了onreadystatechange的事件处理函数。

function a() {
    function b() {
        return 123;
    }
}
alert(a());//undefined
//所以，上述返回的方式，得到的也是undefined

既然不能这样返回，好像只能在封装ajax()的时候操作返回的数据，我们没有办法在调用的时候调用的地方的作用域使用返回数据进行业务开发啊，怎么办？怎么解决这个问题，在调用的时候能 ‘跨越作用域得到服务器返回的数据’ 呢？利用回调函数！

具体做法就是ajax()多带一个参数，这个参数是个对象。对象中比如给个success()函数，如果数据返回成功，会回调success()函数，把返回的数据当做参数传递给success(),这样就可以在调用的时候操作服务器返回的数据了。

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('MicroSoft.XMLHTTP');
    }
}

function ajax(method, url, data, async, obj) {
    var xhr = createXHR();
    url = url + '?rand=' + Math.random() + '&' + data;
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                //alert(xhr.responseText);
                obj.success(xhr.responseText); //回调传递参数，在调用端进行操作返回的数据
            } else {
                alert('获取数据错误！错误代号：' + xhr.status + '错误信息：' + xhr.statusText);
            }
        }
    }

    xhr.open(method, url, async);
    xhr.send(null);
}
//调用
document.addEventListener('click', function() {
    ajax('GET', 'test.php', 'user=XiJP&age=64', true, {
        success: function(data) {
            alert(data);
        }
    });
}, false);

这里写图片描述

以上代码给我们的启示：既然你可以通过对象传参，然后再回调回来，那么其他的参数是不是也可以这样呢，你看ajax()这么多参数，看起来多不好看啊。那我们把所有参数都集中在这个对象里，如下：都是可以的。

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('MicroSoft.XMLHTTP');
    }
}

function ajax(obj) {
    var xhr = createXHR();
    //url = url + '?rand=' + Math.random() + '&' + data;
    obj.url = obj.url + '?rand=' + Math.random() + '&' + obj.data;
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                //alert(xhr.responseText);
                obj.success(xhr.responseText); //回调传递参数，在调用端进行操作返回的数据
            } else {
                alert('获取数据错误！错误代号：' + xhr.status + '错误信息：' + xhr.statusText);
            }
        }
    }

    xhr.open(obj.method, obj.url, obj.async);
    xhr.send(null);
}

//调用ajax()
document.addEventListener('click', function() {
    ajax({
        method: 'GET',
        url: 'test.php',
        data: 'user=guoyu&age=27',
        success: function(data) {
            alert(data);
        }
    });
}, false);

再说特殊字符问题，上面调用ajax的时候，data如果是data:’user=g&uoyu&age=27’;怎么办，又遇到这个问题了。解决的方法是将data属性从字符串变为对象，对象里面的对象了。当然了，再写个函数，用于解析data这个对象，转换为字符串，同时解决特殊字符问题。

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('MicroSoft.XMLHTTP');
    }
}

function params(data) {
    var arr = [];
    for (var i in data) {
        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
    }
    return arr.join('&');
}


function ajax(obj) {
    var xhr = createXHR();
    obj.url = obj.url + '?rand=' + Math.random() + '&' + params(obj.data);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                obj.success(xhr.responseText); //回调传递参数，在调用端进行操作返回的数据
            } else {
                alert('获取数据错误！错误代号：' + xhr.status + '错误信息：' + xhr.statusText);
            }
        }
    }

    xhr.open(obj.method, obj.url, obj.async);
    xhr.send(null);
}

//调用ajax()
document.addEventListener('click', function() {
    ajax({
        method: 'GET',
        url: 'test.php',
        data: {
            'name': 'gu&oyu',
            'age': 27
        },
        success: function(data) {
            alert(data);
        }
    });
}, false);

这里写图片描述

需要提交给服务器的参数解析后追加在URL后面，有可能是”?”也可能是”&”。需要判断一下

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('MicroSoft.XMLHTTP');
    }
}

function params(data) {
    var arr = [];
    for (var i in data) {
        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
    }
    return arr.join('&');
}


function ajax(obj) {
    var xhr = createXHR();
    //obj.url = obj.url + '?rand=' + Math.random();
    obj.data = params(obj.data);
    //get时，在URL后加参数，首先判断有没有“？”，也就是判断加进去的参数是不是第一个参数，第一个用？后面用&
    if (obj.method == 'GET') {
        //obj.url = obj.url.indexOf('?') == -1 ? obj.url+'?'+obj.data : obj+'&'+obj.data;
        obj.url += obj.url.indexOf('?') == -1 ? '?'+obj.data : '&'+obj.data;
        console.log(obj.url);
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                obj.success(xhr.responseText); //回调传递参数，在调用端进行操作返回的数据
            } else {
                alert('获取数据错误！错误代号：' + xhr.status + '错误信息：' + xhr.statusText);
            }
        }
    }

    xhr.open(obj.method, obj.url, obj.async);
    xhr.send(null);
}

//调用ajax()
document.addEventListener('click', function() {
    ajax({
        method: 'GET',
        url: 'test.php',
        data: {
            'name': 'guoyu',
            'age': 27
        },
        success: function(data) {
            alert(data);
        }
    });
}, false);

POST

上面先用GET方式简单写了一次封装，现在轮到POST了，如果是POST，提交的数据就不是跟在URL后面了，而是放在send()里，同时记得设置请求头信息：

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('MicroSoft.XMLHTTP');
    }
}

function params(data) {
    var arr = [];
    for (var i in data) {
        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
    }
    return arr.join('&');
}


function ajax(obj) {
    var xhr = createXHR();
    obj.url = obj.url + '?rand=' + Math.random();
    obj.data = params(obj.data);
    if (obj.method == 'GET') {
        obj.url += obj.url.indexOf('?') == -1 ? '?'+obj.data : '&'+obj.data;
        console.log(obj.url);
    }
    xhr.open(obj.method, obj.url, obj.async);
    if (obj.method == 'POST') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(obj.data);
    } else {
        xhr.send(null);
    }

    //异步处理的事件函数
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                obj.success(xhr.responseText);
            } else {
                alert('获取数据错误！错误代号：' + xhr.status + '错误信息：' + xhr.statusText);
            }
        }
    }  
}




//调用ajax()
document.addEventListener('click', function() {
    ajax({
        method: 'POST',
        url: 'test.php',
        data: {
            'name': 'guoyu',
            'age': 27
        },
        success: function(data) {
            alert(data);
        },
        async: true//异步
    });
}, false);

这里写图片描述

图中，两个Array，第一个是PHP中打印的GET参数列表，第二个是PHP中打印的POST参数列表

同步、异步切换

上面的代码只是异步，如果换成同步，就不会弹出PHP服务端返回的数据了，因为还没有针对同步做逻辑处理。

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('MicroSoft.XMLHTTP');
    }
}

function params(data) {
    var arr = [];
    for (var i in data) {
        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
    }
    return arr.join('&');
}


function ajax(obj) {
    var xhr = createXHR();
    obj.url = obj.url + '?rand=' + Math.random();
    obj.data = params(obj.data);
    if (obj.method == 'GET') {
        obj.url += obj.url.indexOf('?') == -1 ? '?'+obj.data : '&'+obj.data;
        console.log(obj.url);
    }
    xhr.open(obj.method, obj.url, obj.async);
    if (obj.method == 'POST') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(obj.data);
    } else {
        xhr.send(null);
    }

    //异步处理
    if (obj.async == true) {
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {//异步才有的readyState
                if (xhr.status == 200) {//200状态码是不分同步异步的
                    obj.success(xhr.responseText);
                } else {
                    alert('获取数据错误！错误代号：' + xhr.status + '错误信息：' + xhr.statusText);
                }
            }
        } 
    }

    //同步处理放在 open，send之后
    if (obj.async == false) {
        if (xhr.status == 200) {
            obj.success(xhr.responseText);
        } else {
            alert('获取数据错误！错误代号：' + xhr.status + '错误信息：' + xhr.statusText);
        }
    }
}


//调用ajax()
document.addEventListener('click', function() {
    ajax({
        method: 'POST',
        url: 'test.php',
        data: {
            'name': 'guoyu',
            'age': 27
        },
        success: function(data) {
            alert(data);
        },
        async: false
    });
}, false);

封装过程中，无论是同步，还是异步，都有一小段代码是http状态码是200的时候，那一段代码重复了，需要封装成一个小函数，最终的封装如下：

function createXHR() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else {
        return new ActiveXObject('MicroSoft.XMLHTTP');
    }
}

function params(data) {
    var arr = [];
    for (var i in data) {
        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
    }
    return arr.join('&');
}


function ajax(obj) {
    var xhr = createXHR();
    obj.url = obj.url + '?rand=' + Math.random();
    obj.data = params(obj.data);
    if (obj.method == 'GET') {
        obj.url += obj.url.indexOf('?') == -1 ? '?'+obj.data : '&'+obj.data;
        console.log(obj.url);
    }
    xhr.open(obj.method, obj.url, obj.async);
    if (obj.method == 'POST') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(obj.data);
    } else {
        xhr.send(null);
    }

    //异步处理
    if (obj.async == true) {
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {//异步才有的readyState
                callback();
            }
        } 
    }

    //同步处理放在 open，send之后
    if (obj.async == false) {
        callback();
    }

    //无论同步异步，http都要判断状态码是否200，这一段共同代码，可以在ajax内部封装一个小函数
    function callback() {
        if (xhr.status == 200) {
            obj.success(xhr.responseText);
        } else {
            alert('获取数据错误！错误代号：' + xhr.status + '错误信息：' + xhr.statusText);
        }     
    } 
}
GY_U_YG
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
原生Javascript封装的一个AJAX函数分享
01-19
最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法. 所以我也花一天时间写了一个,参数与调用方法类似于jquery的ajax.就叫xhr吧,因为xhr=XMLHttpRequest. 代码如下: /* * Name: xhr,AJAX封装函数 * Description:
原生javascript实现的ajax异步封装功能示例
11-28
本文实例讲述了原生javascript实现的ajax异步封装功能。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
【学习笔记77】ajax的函数封装
yizhiyang
12-03 916
ajax的函数封装
如何对Ajax请求进行封装操作，解决跨域问题的方法，如何使用core解决跨域
最新发布
m0_71966801的博客
01-31 1348
代码重用：通过封装Ajax操作，可以将相同的代码段抽象成一个函数或方法，这样就可以在多个地方重复使用，避免代码冗余和重复编写。错误处理：封装Ajax操作可以统一处理Ajax请求的错误，避免在每个Ajax调用处都进行错误处理，提高代码的健壮性和可靠性。代码简洁：封装Ajax操作可以将繁琐的Ajax调用过程简化为一个函数或方法，从而减少代码量，提高代码的可读性和可维护性。统一管理：通过封装Ajax操作，可以将所有的Ajax请求都集中在一个地方进行管理，方便统一调用和维护。
Ajax 封装
weixin_47505105的博客
03-09 4558
介绍了原生ajax存在的问题，以及一步步完善对ajax进行封装
封装自己的Ajax函数
m0_57101855的博客
04-17 547
aja() 函数是我们自定义的 Ajax 函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性： method 请求的类型 url 请求的 URL 地址 data 请求携带的数据 success 请求成功之后的回调函数 封装分为三步： 1.把外界传递过来的参数转化为查询字符串格式 // 处理data函数 // 功能：把数据对象转化为查询字符串格式发送到服务器 function resolveData(data) { var arr = []; // for…...
Ajax函数的封装
lvhanghmm的博客
01-07 198
Ajax函数的封装 看Ajax的封装之前我们先看看！没有封装的实现步骤吧！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
原生JavaScript实现AJAX、JSONP
01-19
其实，原生JavaScript实现AJAX并不难，这篇文章将会讲解如何实现简单的AJAX，还有跨域请求JSONP！ 一、AJAX AJAX的核心是XMLHttpRequest。 一个完整的AJAX请求一般包括以下步骤： 实例化XMLHttpRequest对象 连接...
Ajax函数封装
vvvvvlj
07-07 344
Ajax函数封装01 问题：发送一次请求代码过多，发送多次请求代码冗余且重复。 解决方案：将请求代码封装到函数中，发请求时调用函数即可。 html： function ajax (options){ //创建ajax对象 var xhr = new XMLHttpRequest() xhr.open(options.type,options.url) xhr.send() //当xhr对象接收完响应数据后出发 xhr.onl
Ajax请求简单封装
weixin_44509418的博客
04-10 429
Ajax请求简单封装
ajax封装函数
08-01
对ajax基础的封装
Ajax的封装
weixin_51445423的博客
04-21 6967
前端封装Ajax
ajax的封装
m0_45884629的博客
11-01 1894
ajax的封装
Ajax-笔记 封装 Ajax 函数
qiaokelizhuzhu的博客
04-23 102
Ajax-笔记 封装 Ajax 函数
封装自己的Ajax函数 丨Ajax
黑马程序员官方博客
03-27 236
itheima() 函数是我们自定义的 Ajax 函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性：method 请求的类型url 请求的 URL 地址data 请求携带的数据success 请求成功之后的回调函数1.3 处理data参数。
如何封装一个Ajax函数
主机吧的博客
05-20 402
这篇文章主要介绍了如何封装一个Ajax函数，帮助大家更好的理解和学习网络编程，感兴趣的朋友可以了解下 如何封装Ajax函数 一个Ajax函数： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // 一个Ajax函数 var xhr = null; if(window.XMLHttpRequest){ xhr = new X...
AJAX异步请求函数的封装及示例
Java之道
10-17 7000
AJAX异步请求函数的封装及示例                                                                           　　　　　++YONG原创，转载请注明1.      封装函数：封装的一个异步请求发送的函数和一个回调函数的模板：myAjax.js
Ajax封装函数
m0_56262017的博客
07-14 361
Ajax封装函数（reAjax.js）
使用原生JavaScript来封装ajax请求
04-17
关于使用原生JavaScript来封装ajax请求，是一个很常见的问题。对于这个问题，我可以给您提供以下的思路和代码示例，帮助您更好地理解和实现： 思路： 1. 创建XMLHttpRequest对象 2. 设置请求参数，包括请求方法、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值