Question

问题：我试图复制jQuery ajax方法，因为我在脚本中多次使用XMLHttpRequest。但是，我不认为包含jQuery作为依赖是必要的，因为我只使用jQuery库中最多3个方法。因此，我需要一种很好的方法来复制jQuery的ajax方法，到目前为止，我已经做到了这一点，但请参阅代码示例下面的输出说明：

function ajax(obj) {
    /*
    obj = {
        type: 'GET',
        url: 'my/url/',
        success: function (response) {},
        error: function (response) {},
        isTrue: true
    }
    */

    var 
        response = null, // defaults to null
        complete = function (resp) {
            console.log(resp); // outputs the response
            response = resp;
        },
        error = function (resp) {
            response = resp;
        }, 
        request = new XMLHttpRequest();

    request.open(obj.type || 'GET', obj.url, obj.isTrue || true);

    request.onreadystatechange = function (e) {
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 400) {
                complete(request.responseText);
            } else {
                error(request.statusText);
            }
        }
    }

    request.send();

    return {
        done: function (callback) {
            callback(response);
        }
    }
}

然后当我在另一个函数中调用ajax函数时：

var xhr = ajax({
            url: 'js/routes.js',
        }).done(function (resp) {
            console.log(resp); // outputs 'null'
        });

响应变量为null，尽管complete（）函数将响应变量设置为ajax .responseText的值。

问题：如何从请求中将.responseText的值返回给ajax函数返回的对象，以便我可以在回调函数中对它执行某些操作，就像我打算在里面做的那样该对象的.done（）方法？

谢谢！

Answer 1

您的实施中有错误。完成了＆＃39;功能不等待响应。

function ajax(obj) {
    /*
       obj = {
       type: 'GET',
       url: 'my/url/',
       success: function (response) {},
       error: function (response) {},
       isTrue: true
       }
       */

    var _callback = null,
        response = null, // defaults to null
        complete = function (resp) {
            if(_callback){
                _callback(resp);
            }
            response = resp;
        },
        error = function (resp) {
            if(_callback){
                _callback(resp);
            }
            response = resp;
        }, 
        request = new XMLHttpRequest();

    request.open(obj.type || 'GET', obj.url, obj.isTrue || true);

    request.onreadystatechange = function (e) {
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 400) {
                complete(request.responseText);
            } else {
                error(request.statusText);
            }
        }
    }

    request.send();

    return {
        done: function (callback) {
            if(response){
                callback(response);
            }else{
                _callback = callback;
            }

        }
    }
}

编辑*

考虑使用微库而不是jQuery。不要重新发明轮子。 http://microjs.com/#ajax

如何复制jQuery ajax方法

1 个答案: