AJAX vs HTML DOM

[Ronin46]

Buenas,

Supongamos que hay que crear un formulario dinámicamente cuando el usuario hace click en un link.

¿Qué es mejor, AJAX o HTML DOM?

En el primer caso podrías hacer una llamada asíncrona a un fichero PHP que haga un echo del formulario y santas pascuas, en el segundo caso tendrías que ir creando los elementos uno a uno.

¿Alguna experiencia?

Saludos.

[caricatos]

Hola:

... ¿y para escribirlo usar innerHTML?... no te parece que pasar por el servidor es innecesario...

Incluso si necesitas datos del servidor, necesitarás del DOM para escribir ese formulario.

Saludos

[Ronin46]

Hola caricatos,

Sí, innerHTML es otra opción, aunque viene a ser lo mismo que HTMLDOM, sólo que no es estándar (esto ya llevaría a otro tipo de discusiones sobre la conveniencia de usar cosas estándares o no, que no vienen al caso).

Efectivamente, para crear el formulario es innecesario pasar por el servidor, pero sin embargo, me es más cómodo hacer una petición al servidor y hacer un echo (PHP) del formulario que andar a currarme el formulario mediante HTMLDOM (o innerHTML).

No sé, hay cosas, que dependen de cada uno, cada cual se encontrará más a gusto haciendolo de una forma u otra, pero en el fondo ambas opciones son idénticas, sin embargo, hay otras cosas en las que uno de los métodos es mejor (más óptimo) y que ya no es una cuestión de preferencias a la hora de programar.

En este caso concreto a mi entender, el hacerlo mediante AJAX me permite una mayor comodidad al hacer el formulario, sin embargo, he de reconocer que eso implica una petición al servidor y cuantas menos peticiones mejor.

Resumiendo, ¿cuestión de gustos o cuestión de optimización?

[caricatos]

Hola:

Pensaba que te referías a innerHTML y php juntos... es que php solo funciona en el servidor... y cuando planteas:

Código:

En el primer caso podrías hacer una llamada asíncrona a un fichero PHP que haga un echo del formulario y santas pascuas

... ese echo debe entregarlo a un objeto Ajax, y esas "santas pascuas" solo puede ser un innerHTML o el uso del DOM... pero en tal caso, ese echo debería ser "estructurado", ya sea en un documento xml o un objeto json, y luego procesarlo...

No creo que haya más alternativas...

Saludos

[Ronin46]

Para que no haya malentendidos pongo el código que así es más fácil entender la cuestión. El código en ambos casos es orientativo para hacer ver lo que planteo, no se trata de buscar fallos :P

AJAX

Código:

function CrearFormulario()
	{
		xmlhttp=GetXmlHttpObject();
		if (xmlhttp==null)
		  {
			  alert ("AJAX no está soportado");
			  return;
		  }
		var url="formulario.php";
		xmlhttp.onreadystatechange=stateChanged;
		xmlhttp.open("GET",url,true);
		xmlhttp.send(null);
	}
function stateChanged()
{
	if (xmlhttp.readyState==4)
	  {
  		document.getElementById("ContenedorFormulario").innerHTML=xmlhttp.responseText;
	  }
}

HTMLDOM

Código:

function CrearFormulario(Contenedor)
{
		form = document.createElement("form");
		form.setAttribute("id", "FormCuentas");
		form.setAttribute("action", "Cuentas.php");
		form.setAttribute("method", "post");
		form.setAttribute("enctype", "application/x-www-form-urlencoded");
		
		select = document.createElement("select");
		select.setAttribute("name", "Tipo");
			
		option = document.createElement("option");
		option.setAttribute("value","Ingreso");
		option.text = "Ingreso";
		select.appendChild(option);
				
		option = document.createElement("option");
		option.setAttribute("value","Gasto");
		option.text = "Gasto";
		select.appendChild(option);
				
		option = document.createElement("option");
		option.setAttribute("value","Movimiento");
		option.text = "Movimiento";
		select.appendChild(option);
			
		form.appendChild(select);
		
		input = document.createElement("input");
		input.setAttribute("id", "Nombre");
		input.setAttribute("name", "Nombre");
		input.setAttribute("type", "text");
		input.setAttribute("maxlength", "100");
		form.appendChild(input);

		input = document.createElement("textarea");
		input.setAttribute("id", "Observaciones");
		input.setAttribute("name", "Observaciones");
		form.appendChild(input);
		
		input = document.createElement("input");
		input.setAttribute("id", "CuentaPadre");
		input.setAttribute("name", "CuentaPadre");
		input.setAttribute("type", "hidden");
		input.setAttribute("value", "0");
		form.appendChild(input);

		input = document.createElement("input");
		input.setAttribute("name", "NuevaCuenta");
		input.setAttribute("type", "submit");
		input.setAttribute("value", "Introducir");
		form.appendChild(input);

		div = document.createElement("div");
		div.setAttribute("id", "FormularioAlta");
		div.appendChild(form);

		CapaContenedora = document.getElementById(Contenedor);
		CapaContenedora.appendChild(div);
}

[David]

Yo no entiendo en este caso para qué hacer una nueva petición al servidor (Ajax) si el formulario lo puedes cargar directamente en la página y mostrar/ocultar usando Javascript.

[caricatos]

Iniciado por David

Yo no entiendo en este caso para qué hacer una nueva petición al servidor (Ajax) si el formulario lo puedes cargar directamente en la página y mostrar/ocultar usando Javascript.

... exacto, la tecnología Ajax, debes usarla para para peticiones de datos concretos, pero ese formulario puedes tenerlo con display none, y cambiar ese estilo a block, y la respuesta será inmediata... además, fíjate que usas innerHTML

Saludos

[Ronin46]

Iniciado por David

Yo no entiendo en este caso para qué hacer una nueva petición al servidor (Ajax) si el formulario lo puedes cargar directamente en la página y mostrar/ocultar usando Javascript.

Sí, podría ser otra posibilidad, aunque no sería tan fácil como eso, porque va a haber varias formas de hacer aparecer ese formulario, y dependiendo de la forma en que seleccione el formulario se creará en un sitio o en otro. Por este motivo, aparte de hacer un display none o block, tendría que combinarlo con un removeChild y un appendChild para "quitarlo" de donde se encuentre actualmente y ponerlo en donde sea necesario en función de la opción escogida.

En cualquier caso, por vuestros comentarios, deduzco que es "tontería" usar AJAX y que es más recomendable tirar por otra vía, al menos para este caso concreto. Es decir, no se trata de un capricho hacerlo de una (AJAX) u otra forma (HTML DOM), sino de una cuestión de hacer cosas óptimas (no usar AJAX en este caso).