Mejores prácticas para devolver y visualizar datos de llamadas AJAX

Question

Tengo una interacción jquery/php configurada en una página. Envía algunos datos al servidor y recupera los registros de los datos que luego se alinearán en la página para su comparación y posible acción más allá de eso.

Mi pregunta es ¿cuál es la mejor práctica para devolver la información y luego mostrarla?

• Volver objeto JSON y luego crear html sobre la marcha con JS y visualización los datos?
• ¿Devolver el objeto JSON y luego poner esos datos en contenedores ya creados para los datos en la página?
• Devuelve html puro desde el servidor y simplemente ponlo en la página?

Estaba rodando estos por mi cabeza anoche y realmente no podía entender si una de las formas sería mejor por algún motivo en particular.

No soy un js gurú, por lo que no estaba muy seguro de los pros/contras y advertencias sobre estos diferentes métodos.

Answer 1

Creo que termina dependiendo de su aplicación.

El HTML puro es el más fácil, simplemente lo coloca en su lugar y la viola. JQuery hace que sea muy fácil agregar los eventos adecuados y lo que no.

Sin embargo, siempre que he usado AJAX siempre ha evolucionado para devolver JSON y crear elementos sobre la marcha. Si está poblando un árbol, por ejemplo, puede convertirse en un desastre para obtener el anidado adecuado. Esto obliga a tener que hacer el código del lado del cliente de todos modos en ese punto, simplemente utilizando JSON desde el principio es más limpio.

Además, si planea usar las llamadas de datos desde otras páginas, entonces usar JSON es el camino a seguir porque se corregirá el código HTML.

Answer 2

Devolver HTML puro es la mejor solución. En su mayor parte, gzip debería neutralizar cualquier diferencia en el ancho de banda, y el renderizado a través de javascript en el cliente puede ser lento si el cliente es una máquina defectuosa. Finalmente, escribir en javascript para renderizar HTML es difícil de usar en comparación con usar algo agradable como una vista si usa MVC.

Answer 3

Esto surgió recientemente y es posible que sea una estafa: The AJAX response: Data (JSON, XML) or HTML snippet?.

Si va a crear HTML, entonces también puede devolver HTML directamente e inyectarlo en el DOM. Sin embargo, hay veces que necesita trabajar con objetos, que es donde JSON es útil.

Si devuelve un objeto Persona, por ejemplo, puede saludar Person.Name y mostrar Person.Preferences, que es realmente útil. Depende de su diseño, pero las consideraciones generales deberían ser mantener HTML fuera de JavaScript a menos que esté creando RIA.

Answer 4

Esto depende completamente de la manera en que tenga las cosas configuradas en su aplicación. Yo, por ejemplo, prefiero devolver JSON (segundo enfoque en su lista), porque tengo un parámetro de 'código de error' que marque la función de éxito antes de actualizar el contenido de la página, y si no es cero, notificaré al usuario del error, incluido el mensaje de error que regresó del servidor (validación del lado del servidor, tiempo de espera de la base de datos, etc.).

Answer 5

He utilizado los tres y he llegado a la conclusión de que devolver HTML es mejor cuando se introducen nuevos elementos en una página.

Mi experiencia es que cuando construyo HTML con javascript normalmente estoy replicando el trabajo que ya se habrá realizado para el viaje del usuario que no sea JavaScript.

Todavía prefiero analizar json para actualizar elementos existentes o crear solo la funcionalidad de javascript. Me digo esto por el ancho de banda, pero creo que es solo porque me encanta el javascript.

Como cuarta opción, leí una excelente publicación acerca de cómo Flickr maneja grandes cantidades de datos con la concatenación de cadenas. Básicamente, simplemente analice una cadena grande y péguelo en el cliente. Esto reduce significativamente en el servidor, con solo un aumento marginal en el cliente.

Answer 6

La parte de "posible acción más allá de eso" hace una gran diferencia. Si necesita hacer otras cosas con los datos además de mostrarlos, regresar como JSON es una opción claramente mejor porque puede trabajar con los datos como un objeto JavaScript nativo en lugar de tener que atravesar el HTML DOM. Si todo lo que pretendes hacer es mostrarlo, no veo ninguna razón para tomarse la molestia de construir esa pantalla en JavaScript; solo construye el HTML en tu capa de presentación en el servidor.

Answer 7

Creo que se está perdiendo una opción perfectamente válida, una que uso a menudo. Esta es mi típico esquema y todavía tiene que fallarme ... :-)

Aquí está la plantilla básica de jQuery que utilizo:

$(function() { 
    $.getJSON('/some/page',{foo:bar,bar:foo},function(json) { 
     if(json.outcome == 'success') { 
      $('body').prepend(json.html); 
     } else { 
      // Somehow let the user know why it didn't work 
      alert(json.error); 
     } 
    }); 
}); 

Aquí está el backend básica (PHP en mi caso) estructura utilizo :

<?php // Page: '/some/page' 

/* Blah Blah Blah... do whatever needs to be done... */ 

// If everything turns out okay (assuming '$output' is the HTML 
// you want to display... 
echo json_encode(array('outcome'=>'success','html'=>$output)); 

// If something goes wrong... just do: 
echo json_encode(array('outcome'=>'error','error'=>'Uh oh... something is broken')); 

Naturalmente, tendrá que ser más específico con su error poniéndolos en alguna variable o algo así. Pero, debes tener la idea. Además, por supuesto, puede agregar más información a la salida json. Puedes tener algo de HTML prefabricado y también otra información como un 'aviso de éxito' o un nuevo nombre de clase para algún elemento, no sé ... lo que sea ... las posibilidades son infinitas.

De todos modos, el motivo por el que elijo esta ruta es porque generalmente es más rápido (basado en mi experiencia) agregar HTML prefabricado al DOM en lugar de pasar sobre JSON e insertarlo a menos que sea solo un poco texto para reemplazar en un elemento. Pero, el método que he mostrado es, IMO, lo mejor de ambos mundos. Puede adjuntar HTML como una cadena a una de las propiedades JSON.

Happy jQuerying :-)