打造自己的js库1 -- ajax操作的封装

最新推荐文章于 2023-09-20 10:27:08 发布

reloney

最新推荐文章于 2023-09-20 10:27:08 发布

阅读量340

点赞数

分类专栏：打造自己的js库文章标签： xmlhttprequest jquery ajax 框架 ajax封装

本文链接：https://blog.csdn.net/xzlove_/article/details/39472867

版权

打造自己的js库专栏收录该内容

4 篇文章 0 订阅

订阅专栏

ajax操作十分简单，但首先需要熟悉xmlhttp对象，Xmlhttp是一种浏览器对象，可用于模拟http的GET和POST请求。配合JavaScript可以实现页面数据在无刷新下的定时数据更新，这也是ajax的应用场景，我们先来说一下该对象的几个状态。

0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。

因此我们可以使用一下方式来指定回调函数

if (request.readyState == 4) {
     if (request.status == 200) 
       callback.call();
    }

另外其中的status则是指对应的http状态比如404 200 500等等，非常多。具体含义请参考http协议部分。

一下我们通过模仿jquery ajax的操作来封装我们的ajax

var $$ = function() {
    var url,
        params,
        method,
        dataType,
        callback,
        beforeSend,
        asnyc,
        error;
    var createOpp = function() {
            var xmlHttp;
            if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            else xmlHttp = new XMLHttpRequest();
            return xmlHttp;
        },
        ajax = function(setting) {
            method = setting.method || "post";
            callback = setting.success || function() {};
            params = setting.params || "";
            dataType = setting.dataType || "";
            beforeSend = setting.beforeSend || undefined;
            asnyc = setting.asnyc || true;
            error = setting.error || function(){};
            url = setting.url || function(){};
            var xhr = createOpp();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    if(dataType == "json")
                        callback.call(this,eval('(' + xhr.responseText + ')'));
                    else
                        callback.call(this, xhr.responseText);
                } else if(xhr.readyState == 1 && beforeSend){
                    beforeSend.call(this, xhr);
                }
            };
            xhr.onerror = error;
            xhr.open(method.toUpperCase(), setting.url, asnyc);
            if (method == "post")
                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

            xhr.send(params);
        },
        post = function(url, params, callback) {
            ajax({"url" : url,"params":params,"success":callback});
        },
        get = function(url, params, callback) {
            ajax({"method":"get","url" : url,"params":params,"success":callback});
        },
        getJSON = function(url, params, callback){
            ajax({"method":"get","dataType":"json","url" : url,"params":params,"success":callback});
        };

    return {
        ajax: ajax,
        post: post,
        get : get,
        getJSON : getJSON
    }
}();

使用的时候则是直接调用$$.ajax $$.post等方法就可以了。