2010-06-25 4 views
6

Je voudrais savoir s'il existe une meilleure approche pour créer un objet ajax réutilisable pour jquery.Motif ajax JS réutilisable (jquery)

Ceci est mon code non testé.

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> 
+1

vous pourriez envisager de retourner la promesse elle-même dans votre sender.ajax ('retour .ajax $ ({...}) ') afin que vous puissiez attacher d'autres rappels du client. Bien sûr, si vous préférez cacher complètement ajax jquery de l'autre code, vous ne devriez pas faire cela. – Stefan

Répondre

4

Vous pouvez définir les options de base que vous avez toujours les mêmes séparément.

par exemple si vous utilisez toujours la même chose ici:

type: type, 
    dataType: dataType, 

pour ces types, vous pouvez les régler séparément.

Voici comment vous faites ce genre de chose:

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

maintenant ces sont définies et vous pouvez simplifier vos appels individuels ajax.

EDIT:

REMARQUE: Réglage des paramètres à $ .ajax priorité sur ces valeurs par défaut. Ainsi, le préréglage de "données" vers une chaîne JSON vide est sûr et souhaité. De cette façon, tout appel $ .ajax qui spécifie un paramètre de données fonctionnera comme prévu, puisque la valeur par défaut ne sera pas utilisée. Cela permet d'éviter les problèmes qui peuvent être difficiles à trouver sur un site déployé.

+0

C'est un bon conseil. Cependant, je suis plus intéressé par un modèle de conception qui est meilleur que ce que j'ai. – Eeyore

1

Je ferais probablement tout le chemin pour créer un objet Ajax.

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

ou similaire. Vous semblez avoir à mi-chemin entre une fonction qui a quelques défauts qu'elle étend avec ceux dans lesquels vous êtes absents et un objet pour cela.

3

Voici ce que je faisais:

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

Exemple d'utilisation:

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