2010-06-25 24 views
6

Chciałbym wiedzieć, czy istnieje lepsze podejście do tworzenia wielokrotnego użytku obiektu ajax dla jquery.Wzór JS ajax wielokrotnego użytku (jquery)

To jest mój nieprzetestowany kod.

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

można rozważyć powrót samą obietnicę w sender.ajax ('return $ .ajax ({...}) '), aby można było dołączyć inne wywołania zwrotne od klienta. Oczywiście, jeśli wolisz całkowicie ukryć ajax jquery'ego z drugiego kodu, nie powinieneś tego robić. – Stefan

Odpowiedz

4

Można ustawić podstawowe opcje, które zawsze mają to samo oddzielnie.

na przykład, jeśli zawsze używać samo tutaj:

type: type, 
    dataType: dataType, 

dla tych typów, można ustawić je oddzielnie.

Oto jak zrobić tego typu rzeczy:

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

Teraz te są ustawione i można uprościć do indywidualnych rozmów AJAX.

EDIT:

UWAGA: Ustawianie parametrów do $ .ajax zastąpić te domyślne. W ten sposób ustawienie "danych" w pustym ciągu JSON jest bezpieczne i pożądane. W ten sposób każde wywołanie $ .ajax, które określa parametr danych, będzie działać zgodnie z oczekiwaniami, ponieważ wartość domyślna nie będzie używana. Pomaga to uniknąć problemów, które mogą być trudne do znalezienia w wdrożonej witrynie.

+0

To dobra wskazówka. Jednak bardziej interesuje mnie wzór, który jest lepszy niż to, co mam. – Eeyore

1

Najprawdopodobniej pójdę na całość i utworzę obiekt Ajax.

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

lub podobnie. Wygląda na to, że znajdujesz się w połowie drogi między funkcją, która ma pewne wartości domyślne, a którą rozszerza, a tymi, do których się aplikujesz, i obiektem dla niej.

3

Oto co zrobiłem:

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

Przykład użycia:

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