Question

我想知道是否有更好的方法来为jquery创建可重用的ajax对象。

这是我未经测试的代码。

var sender = {
    function ajax(url, type, dataType,  callback) {
        $.ajax({
            url: url,
            type: type,
            dataType: dataType,
            beforeSend: function() {
                onStartAjax();
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                callback.failure(XMLHttpRequest, textStatus, errorThrown);
            },
            success: function(data, textStatus) {
                callback.success(data, textStatus);
            },
            complete: function (XMLHttpRequest, textStatus) {
                onEndAjax();
            }
        });
    },
    function onStartAjax() {
        // show loader
    },
    function onEndAjax() {
        // hide loader
    }  
};


<script type="text/javascript">
    var callback = {
        success: function(data, textStatus) {
            $('#content').html(data);
        },
        failure: function(XMLHttpRequest, textStatus, errorThrown) {
            alert('Error making AJAX call: ' + XMLHttpRequest.statusText + ' (' + XMLHttpRequest.status + ')');
        }
    }

    sender.ajax(url, type, dataType, callback);

</script>

Answer 1

您可以单独设置相同的基本选项。

例如，如果你总是在这里使用相同的东西：

    type: type, 
    dataType: dataType,

对于这些类型，您可以单独设置它们。

以下是你如何做这类事情：

$.ajaxSetup({
  type: "POST",
  contentType: "application/json; charset=utf-8",
  data: "{}"
});

现在已经设置好了，你可以简化你的个人ajax调用。

编辑：

注意：将参数设置为$ .ajax会覆盖这些默认值。因此，将“数据”预设为空的JSON字符串是安全且理想的。这样，任何指定数据参数的$ .ajax调用都将按预期运行，因为不会使用默认值。这有助于避免在部署的站点上难以找到的问题。

Answer 2

这是我做的：

var ajaxclient = (function (window) {

    function _do(type, url)
    {
        return $.ajax({
            url:url,
            type:type,
            dataType:'json',
            beforeSend: _onStartAjax                
        }).always(_onEndAjax);
    }

    function _onStartAjax()
    {
        console.log("starting ajax call");
    }

    function _onEndAjax()
    {
        console.log("finished ajax call");
    }

    return {
        do:_do
    }
}(this));

使用示例：

ajaxclient.do("get","http://...").done(function(data) {console.log(data);})

Answer 3

我可能会全力以赴并创建一个Ajax对象。

var ajax = new MySuperAjax(url, data);
ajax.onComplete = function(){}

或类似的。你似乎在一个函数之间有一个中间点，它有一些默认值，它扩展了你的apss和一个对象。

可重用的JS ajax模式（jquery）

3 个答案: