Blog

Material de apoyo

Para este tema es necesario descargar el material de apoyo, descomprimirlo y copiar los archivos al servidor Web que hemos instalado previamente, dentro de la carpeta curso creamos un directorio que se llame “ajax”, dentro de este pegamos los archivos del material de apoyo (ajax.html, ajax.js, ajax.php).

Namespace

Lo primero que debemos hacer es “empaquetar” el código que escribiremos, asignarle un namespace donde será ejecutado, de esta manera evitamos coaliciones.

//el namespace para este tutorial
Ext.ns('com.quizzpot.tutorial');

com.quizzpot.tutorial.Ajax = {
	init: function(){
		//el código va aquí
	}
}

//cuando esté listo el DOM ejecutamos la función “init”
Ext.onReady(com.quizzpot.tutorial.Ajax.init,com.quizzpot.tutorial.Ajax);

Crear los eventos

El siguiente paso es crear un “listener” para el evento “click” de los botones que se encuentran en el documento HTML, y dentro de éste vamos a realizar las llamadas Ajax.

//cuando se de clic sobre el botón “json”…
Ext.fly('json').on('click',function(){
	//hacemos una petición por Ajax al servidor
},this);

//hacemos lo mismo para los otros dos botones…
Ext.fly('xml').on('click',function(){

},this);

//que tenemos en el documento HTML
Ext.fly('html').on('click',function(){

},this);

Ajax

Dentro de la función que se ejecutará cuando el usuario presione el botón “json” vamos a poner lo siguiente:

Ext.Ajax.request({ //dispara la petición
	url: 'ajax.php', //la URL donde se realiza la petición
	method:'GET', //El método HTTP usado para la petición
	params:{format:'json'},//los parámetros que se usaran para la solicitud
	success: this.log, //si se logró la comunicación, ejecuta la función “log”
	failure: this.fail, //si falla, ejecuta la función “fail”
	scope:this //especifica el contexto de las funciones anteriores
});

Como puedes ver en el código anterior, para realizar una petición por medio de Ajax, utilizamos el componente “Ext.Ajax”, no podemos crear instancias de este objeto ya que es un singleton, es por eso que lo podemos utilizar sin crear instancias, únicamente ejecutamos el método “request” y le pasamos un objeto con las configuraciones necesarias.

En la propiedad “url” se especifica donde será realizada la solicitud, en este caso “ajax.php” pero esto variará dependiendo de tus necesidades, algo muy importante por aclarar es que por ningún motivo deberías de ponerle parámetros a la url (ej: ajax.php?param=hola&id=2&module=/index), he visto muchas veces que algunos desarrolladores cometen esta “barbaridad”; esto no debe hacerse para pasar parámetros al servidor, ya que en el mismo objeto de configuración podemos definir los parámetros que necesitemos.

La propiedad “params” es responsable de enviar todos los parámetros que necesitemos, aquí es donde los definimos como un objeto ({name: ‘value’, param2:2}), usando un String (name=value&param2=2) o podemos asignarle una función la cual regresará los parámetros necesarios, esto es útil para cuando los parámetros son variantes y existen condiciones y reglas para enviar los parámetros correctos.

En la propiedad “method” se especifica el método http que utilizará la solicitud (POST, GET, PUT y DELETE), si no se especifica un tipo entonces toma GET si no se han enviado parámetros (usando la propiedad “params”), y POST si se han especificado parámetros.

Es importante mencionar que la propiedad “success” (del objeto de configuración) recibe una referencia a la función “log” la cuál aún no hemos escrito, esta función será ejecutada luego de que el servidor responda satisfactoriamente, esto quiere decir que puede demorar en ejecutarse dependiendo de la carga del servidor; igualmente la propiedad “failure” será ejecuta la función asignada cuando se produzca un error en el servidor o en la comunicación (404 not found, 403 forbidden, 500 server error, etc…).

Ahora vamos a realizar las peticiones para los otros botones que nos hacen falta:

//lo mismo para los otros dos botones…
Ext.fly('xml').on('click',function(){
	Ext.Ajax.request({
		url: 'ajax.php',
		params:{format:'xml'}, //en formato XML
		success: this.log,
		failure: this.fail,
		scope:this
	});
},this);

//que tenemos en el documento HTML
Ext.fly('html').on('click',function(){
	Ext.Ajax.request({
		url: 'ajax.php',
		success: this.log,
		failure: this.fail
	});
},this);

Si has notado, la configuración de estas peticiones no es exactamente igual, ha variado muy poco, esto con el propósito de mostrar la flexibilidad del componente.

La función success

Es necesario escribir la función que se ejecutará cuando todo suceda correctamente, en este caso la función “log”, la cual será un método del objeto “com.quizzpot.tutorial.Ajax”.

, //<---no olvidar esta coma para separar entre los métodos

/***************************************
 *	If the request is successful …
 ***************************************/
log: function(response,options){//recibe la respuesta y el objeto de configuración
	var el = Ext.get('response'); // tomar el LOG
	var text = response.responseText; //remover el...
	text = text.replace(/</g,'&lt;'); // < y...
	text = text.replace(/>/g,'&gt;'); // >
	el.select('p.newest').removeClass('newest'); // remover el ultimo update
	Ext.DomHelper.append(el,'<p class="newest">'+text+'</p>'); //update el log
	el.scrollTo('top',el.dom.scrollHeight); //posicionar el scroller al fondo
	el.select('p.newest').highlight('00ff66',{duration:0.5}); //highlight el ultimo mensaje
}

Lo más importante del código anterior es que la función recibe dos parámetros, el primero es la respuesta del servidor el objeto XMLHttpRequest, y el segundo parámetro es el objeto de configuración, el resto del código no tiene mucha importancia comentarlo ya que debe ser remplazado por la funcionalidad que cada uno quiera implementar, pero si es importante mencionar que aquí es donde se debe tratar con la información regresada.

La función failure

En caso de suceder un error debemos saber como manejarlo, el siguiente código es disparado cuando un error ha sucedido en la comunicación o bien en el servidor.

, //<--- coma separadora de los métodos

/***************************************
 *	If the request fails, log the error
 ***************************************/
fail: function(response,options){
	var el = Ext.get('response');
	el.select('p.newest').removeClass('newest');
	Ext.DomHelper.append(el,'<p class="newest"><strong>Error Status '+response.status+' '+response.statusText+'</strong>: Opsss, there is something wrong! please try again</p>');
	el.scrollTo('top',el.dom.scrollHeight);
	el.select('p.newest').highlight('ff1111',{duration:0.5});
}

Simplemente se le informa al usuario que ha sucedido un error, nada complicado, pero cada quien es responsable de implementar lo que sea necesario en su proyecto.

El servidor

Este curso es de Ext JS, por lo tanto no voy a explicar el código utilizado en el servidor a detalle puesto que es simplemente un ejemplo que no tiene utilidad alguna en el mundo real, pero si te diré que es lo que hace.

<?php 

	if(rand(1,4) == 1){
		if(rand(1,2)==1)
			header("HTTP/1.0 404 Not Found");
		else
			header("HTTP/1.0 403 Forbidden");
		exit;
	}

	$type = $_SERVER['REQUEST_METHOD'];
	$msg = new Message("This is a ".$type." request!",true);

	$format = $type=='GET'? $_GET['format']:$_POST['format']; 

	switch($format){
		case 'xml':
			header("Content-Type: text/xml");
			echo $msg->toXML();
			break;
		case 'json':
			header("Content-Type: text/plain");
			echo $msg->toJSON();
			break;
		default:
			header("Content-Type: text/html");
			echo $msg->toHTML();
	}

	class Message{
		protected  $msg,$success;

		public function __construct($msg,$success) {
			$this->msg = $msg;
			$this->success = $success;
		}

		public function toXML(){
			return "<response><success>".$this->success."</success><msg>".$this->msg."</msg></response>";
		}

		public function toJSON(){
			return "{success:".$this->success.",msg:'".$this->msg."'}";
		}

		public function toHTML(){
			return '<p>'.$this->msg.'</p>';
		}
	}
?>

Primero aleatoriamente manda errores, ya sea un 404 o un 403, he creado una clase “Message” la cual toma un mensaje y una bandera en el constructor, cuenta con tres métodos los cuales retornan el mensaje en diferentes formatos, los cuales mediante un switch son invocados e impresos en el explorador.

Conclusiones

El uso de Ajax es muy importante en nuestras aplicaciones, Ext JS ha revolucionado la manera en como desarrollamos nuestros sistemas o aplicaciones, este componente es fundamental en el Framework y es necesario conocerlo para usarlo apropiadamente, te recomiendo mires el API y juegues un poco con este componente.

Como siempre dudas o sugerencias son recibidas en los comentarios.