Estaba leyendo esta entrada en QuirksBlog (parte 1 y 2) que analiza un poco sobre cuál es el mejor formato (XML, HTML o JSON) a usar en una respuesta de AJAX.
Personalmente yo recomiendo HTML por dos razones:
- Para procesar XML en el lado del cliente hay que poner un pedacito de Javascript. Javascript puede ser alterado en el lado del cliente asi es que por cuestiones de seguridad mejor dejarle eso al servidor. Con esto no solo nos ahorramos código sino que también el cliente tiene menos que procesar. Esto es muy frecuente ya que si la computadora es lenta (y pasa en computadoras rápidas tambien) vamos a ver un cartelito que dice que Javascript está tomandose mucho tiempo… lo cual lleva a abortar el proceso y obligar al visitante a hacer un reload de la página. Por cierto el tema de lidiar con este problema está explicado (e incluye una solución) en Sitepoint.
- Es mejor enviarle a Javascript la solución lista para meter en el tag usando innerHTML o innerText. Mucha gente acá dice que el problema es que si quieren hacer varios reemplazos y así utilizar lo util del AJAX la cosa se complica y hay que volver a XML o JSON.
Mi solución es que (siguiendo el punto uno) esto se haga del lado del servidor y que nuestro Javascript se dedique a hacer esos reemplazos enviando respuestas en HTML que contengan separadores para que el Javascript pueda saber a donde va cada parte. SI!!! esto es hackeable también, pero ahorramos tiempo y dolores de cabeza y las ventajas, en mi opinión, superan a las desventajas. Dejo un ejemplo usando como respuesta algo simple para mostrar en tres divs diferentes las letrs A, B y C, respectivamente:
Respuesta de Javascript: div1|*|A|||div2|*|B|||div3|*|C
Separo cada parte de HTML usando ||| y dentro de cada parte separo con |*| lo que es el div y lo que es el snippet de HTML
El Javascript sería el siguiente:
var xmlhttp = null;
if (window.XMLHttpRequest) {
// If IE7, Mozilla, Safari, and so on: Use native object.
xmlhttp = new XMLHttpRequest();
}
else
{
if (window.ActiveXObject) {
xmlhttp = new ActiveXObject('MSXML2.XMLHTTP.3.0');
}
}
isBusy=false;
function getAjax (parameters) {
if (isBusy==true) {
xmlhttp.onreadystatechange = null;
xmlhttp.abort();
}
xmlhttp.open('GET','file.php?parameters='+parameters,true);
isBusy = true;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
isBusy=false;
var replace = xmlhttp.responseText;
var spl;
spl=replace.split('|||');
for (var i=0; i< spl.length; i++) {
var part;
if (spl[i]!="") {
part=spl[i].split('|*|');
document.getElementById(part[0]).innerHTML = part[1];
}
}
}else{
return;
}
}
xmlhttp.send(null);
}
