2010-06-25 39 views
6

Me gustaría saber si hay un mejor enfoque para crear objetos ajax reutilizables para jquery.Patrón JS ajax reutilizable (jquery)

Este es mi código no probado.

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

es posible pensar en volver en sí la promesa en su sender.ajax ('volver $ .ajax ({...}) ') para que pueda adjuntar otras devoluciones de llamada del cliente. Por supuesto, si prefieres ocultar por completo el ajax de jquery del otro código, no deberías hacer eso. – Stefan

Respuesta

4

Puede establecer las opciones básicas que siempre tiene el mismo por separado.

por ejemplo si siempre utiliza la misma cosa aquí:

type: type, 
    dataType: dataType, 

para esos tipos, se puede establecer por separado.

Aquí es cómo se hace ese tipo de cosas:

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

ahora esos se establecen y se puede simplificar sus llamadas ajax individuales.

EDIT:

NOTA: Ajuste de parámetros a $ .ajax anulan estos valores predeterminados. Por lo tanto, preestablecer "datos" en una cadena JSON vacía es seguro y deseado. De esta forma, cualquier llamada $ .ajax que especifique un parámetro de datos funcionará como se espera, ya que no se usará el valor predeterminado. Esto ayuda a evitar problemas que pueden ser difíciles de encontrar en un sitio desplegado.

+0

Ese es un buen consejo. Sin embargo, estoy más interesado en un patrón de diseño que es mejor de lo que tengo. – Eeyore

1

Probablemente me vaya todo el cerdo y creara un objeto Ajax.

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

o similar. Parece que tiene un punto medio entre una función que tiene algunos valores predeterminados que se extiende con aquellos en los que apss y un objeto para ella.

3

Esto es lo que hice: el uso

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

Ejemplo:

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