Llamadas asíncronas (AJAX) con Ext
Ext (disponible en la Web Extjs) es una librería Javascript bastante completa con la que podemos hacer desde bonitos efectos para la interfaz gráfica, hasta llamadas asíncronas al servidor (AJAX) de una manera muy sencilla como veremos a continuación. Definitivamente la parte que más me gusta de Ext es la manera en la que se hace una petición de datos al servidor y cómo maneja estos datos una vez que llegan al cliente. Pero basta de palabras, vayamos al grano.
Supongamos que tenemos un formulario como el que se muestra en la imagen y queremos llenarlo con datos proveniente de una base de datos pero de manera dinámica (con AJAX, sin hacer refresh). Pueden utilizar sólo Javascript y manejar todas las incompatibilidades de los navegadores por su cuenta, y pueden usar una librería como Prototype que también es muy buena (y de hecho Ext tiene la opción para usarla) o, podemos usar Ext y facilitar tanto el código del lado del cliente como del lado del servidor. En Ext se usa el concepto de Data Stores que son objetos que nos facilitan el acceso a datos con un formato específico, y que después podemos usarlos para llenar por ejemplo una tabla, o un combo, o cualquier cosa. Para crear un Data Store:
var marker_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'marcadores.php?accion=obtMarc'}),
reader: new Ext.data.JsonReader({},[ 'id', 'nombre', 'direccion', 'latitud', 'longitud', 'descRed', 'descAmp', 'numCuartos', 'numBanos', 'tamano', 'colonia', 'precio', 'enlace']),
remoteSort: false
});
Dentro del Data Store estamos creando otros dos objetos: HttpProxy y JsonReader. El primero nos sirve para indicarle la URL que nos regresará los datos que necesitamos, y el segundo es un objeto que, como su nombre nos indica, nos sirve para consumir datos en formato JSON. Esto es muy conveniente ya que, al estar usando JSON, podremos evaluar la respuesta del servidor, convertirla a un objeto Javascript y accesar sus propiedades como lo hacemos con cualquier otro objeto (aunque Ext hace este trabajo por nosotros automágicamente).
Ya que tenemos el Data Store, ahora hay que indicar que pasa una vez que los datos llegan al cliente:
marker_data.on('load',function(){
fillForm(marker_data);
});
Aquí solamente estamos tomando el objeto marker_data que creamos anteriormente (el Data Store) y le asignamos un manejador de evento. El evento es “load”, es decir, cuando se cargan los datos, y le estamos asignando una función anónima que a su vez llama a otra función (fillForm) que no voy a mostrar aquí por motivos de espacio pero que simplemente toma los valores regresados por el servidor y llena el formulario. Por último hay que decirle al Data Store que haga la llamada y pida los datos:
marker_data.load();
Eso es todo. Al recibir todos los datos del servidor se ejecutará la función creada anteriormente. Donde esto brilla es en la parte del servidor, especialmente si antes utilizabas XML para regresar datos. Siguiendo el mismo ejemplo, el código del servidor en PHP quedaría de la siguiente manera:
$query = mysql_query("SELECT * FROM marcadores");
if(!$query){
die('No se pudo conectar a la base de datos:
'.mysql_error());
mysql_close();
}else{
$arr = array();
while($obj = mysql_fetch_object($query))
$arr[] = $obj;
Echo ''.json_encode($arr).'';
}
Bastante sencillo ¿no? aprovechando la función json_encode de PHP enviamos la respuesta con el formato que Ext la espera. Una vez en el cliente podemos utilizar estos datos así:
marker_data.getAt(0).data.colonia
Este objeto una vez que se invoca el método load contiene los datos regresados por el servidor. Utilizando el método getAt y la propiedad totalLength podemos iterar los resultados sin mucho esfuerzo. Y no hay más que decir del tema, Ext simplifica bastante el desarrollo de aplicaciones Web con Javascript y nos permite abstraer cosas como evaluar cadenas JSON o parsear respuestas en formato XML, así como también despreocuparnos por las incompatibilidades entre los diferentes navegadores. Por el lado malo, la documentación es bastante completa pero a mi ver le hacen falta más ejemplos para poder aprender a utilizar la librería de manera más rápida.
