可重复使用的JS ajax模式（jQuery）

我想知道是否有更好的方法来为jQuery创建可重用的ajax对象。可重复使用的JS ajax模式（jQuery）

这是我未经测试的代码。

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>

来源

2010-06-25 Eeyore

你可能会考虑返回的承诺本身在sender.ajax（'返回$阿贾克斯（{...} ）'），以便您可以附加来自客户端的其他回调。当然，如果你宁愿从其他代码中完全隐藏jQuery的ajax，你也不应该那样做。 – Stefan 2012-08-25 23:45:02

你可以设置基本选项，你总是分开。

例如，如果你总是用在这里同样的事情：

type: type, 
    dataType: dataType,

这些类型，你可以单独设置。

这里是如何做到这类型的东西：

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

现在，这些设置，您可以简化您的个性化的Ajax调用。

编辑：

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

来源

2010-06-25 22:38:07

这是一个很好的提示。但是，我对设计模式更感兴趣，它比我所拥有的设计模式更好。 – Eeyore 2010-06-27 00:01:30

我可能会去整个猪，并有一个Ajax对象创建。

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

或类似的。你似乎有一个功能，它有一些默认扩展的功能与你apss和它的对象。

来源

2012-08-25 22:11:35 Patabugen

这里是我做过什么：

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);})

来源

2012-08-26 00:07:04 Stefan

可重复使用的JS ajax模式（jQuery）

回答

相关问题