jQuery y data-attributes para manejar todas las llamadas ajax?

Question

Estoy pensando en una forma de reducir la cantidad de código javascript habilitando ajax en los enlaces de los atributos. Ejemplo:

<a href="/Default/Link.html" data-endpoint="/Ajax/Link.html" rel="targetId" async="true">Click me!</a> 

async="true" desactivará comportamiento predeterminado del enlace (href), y hacer una llamada ajax utilizando el valor data-endpoint e insertarlo a la Identificación del elemento definido en rel.

No soy experto en JS, por lo que agradecería cualquier idea o inconveniente con este enfoque. Opciones como el caché: verdadero, etc. sería genial poder pasar también, pero no realmente necesario ya que me gustaría hacer esto para obtener vistas parciales que contengan más o menos datos en vivo (no se necesita caché).

(Esto es inspirada de una charla que vi en la forma en facebook minimiza su código, pero probablemente muy simplificado en comparación con la forma en que optimizan todo a cada bit 'n bytes)

Answer 1

Algo como esto

html

<a href="/Default/Link.html" 
    data-endpoint="/Ajax/Link.html" 
    data-target="targetId" 
    data-cache="false", 
    data-async="true">Click me!</a> 

jQuery

$('a[data-async="true"]').click(function(e){ 
    e.preventDefault(); 
    var self = $(this), 
     url = self.data('endpoint'), 
     target = self.data('target'), 
     cache = self.data('cache'); 

    $.ajax({ 
     url: url, 
     cache : cache, 
     success: function(data){ 
         if (target !== 'undefined'){ 
          $('#'+target).html(data); 
         } 
       } 
    }); 
});