El objeto Ajax, peticiones GET y POST

Apr 17, 2009 | Espaol | By Crysfel | 15 Comments | Read in English

La comunicacin con el servidor es parte vital en las aplicaciones Web. Enviar y recibir informacin sin que la pgina se actualice por completo es sencillo utilizando Ajax, en este tema veremos como realizar peticiones GET y POST utilizando el Framework de Ext JS.

Author: Crysfel I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter

Material de apoyo
Para este tema es necesario descargar el material de apoyo, descomprimirlo y copiar los archivos alservidor 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 cdigo que escribiremos, asignarle un namespace donde ser ejecutado, de esta manera evitamos coaliciones.
view plaincopy to clipboardprint?

1. //el namespace para este tutorial 2. Ext.ns('com.quizzpot.tutorial'); 3. 4. com.quizzpot.tutorial.Ajax = { 5. init: function(){ 6. //el cdigo va aqu 7. } 8. } 9. 10. //cuando est listo el DOM ejecutamos la funcin init 11. 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.
view plaincopy to clipboardprint?

1. //cuando se de clic sobre el botn json 2. Ext.fly('json').on('click',function(){ 3. //hacemos una peticin por Ajax al servidor 4. },this); 5. 6. //hacemos lo mismo para los otros dos botones 7. Ext.fly('xml').on('click',function(){ 8. 9. },this); 10. 11. //que tenemos en el documento HTML 12. Ext.fly('html').on('click',function(){ 13. 14. },this);

Ajax
Dentro de la funcin que se ejecutar cuando el usuario presione el botn json vamos a poner lo siguiente:
view plaincopy to clipboardprint?

1. Ext.Ajax.request({ //dispara la peticin 2. url: 'ajax.php', //la URL donde se realiza la peticin 3. method:'GET', //El mtodo HTTP usado para la peticin 4. params:{format:'json'},//los parmetros que se usaran para la solicit ud 5. success: this.log, //si se logr la comunicacin, ejecuta la funcin log 6. failure: this.fail, //si falla, ejecuta la funcin fail 7. scope:this //especifica el contexto de las funciones anteriores 8. }); Como puedes ver en el cdigo anterior, para realizar una peticin 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 mtodo 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 ningn motivo deberas de ponerle parmetros 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 parmetros al servidor, ya que en el mismo objeto de configuracin podemos definir los parmetros que necesitemos. La propiedad params es responsable de enviar todos los parmetros 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 funcin la cual regresar los parmetros necesarios, esto es til para cuando los parmetros son variantes y existen condiciones y reglas para enviar los parmetros correctos. En la propiedad method se especifica el mtodo http que utilizar la solicitud (POST, GET, PUT y DELETE), si no se especifica un tipo entonces toma GET si no se han enviado parmetros (usando la propiedad params), y POST si se han especificado parmetros. Es importante mencionar que la propiedad success (del objeto de configuracin) recibe una referencia a la funcin log la cul an no hemos escrito, esta funcin 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 funcin asignada cuando se produzca un error en el servidor o en la comunicacin (404 not found, 403 forbidden, 500 server error, etc). Ahora vamos a realizar las peticiones para los otros botones que nos hacen falta:
view plaincopy to clipboardprint?

1. //lo mismo para los otros dos botones 2. Ext.fly('xml').on('click',function(){ 3. Ext.Ajax.request({ 4. url: 'ajax.php', 5. params:{format:'xml'}, //en formato XML 6. success: this.log, 7. failure: this.fail, 8. scope:this 9. }); 10. },this); 11. 12. //que tenemos en el documento HTML 13. Ext.fly('html').on('click',function(){ 14. Ext.Ajax.request({ 15. url: 'ajax.php', 16. success: this.log, 17. failure: this.fail 18. }); 19. },this); Si has notado, la configuracin de estas peticiones no es exactamente igual, ha variado muy poco, esto con el propsito de mostrar la flexibilidad del componente.

La funcin success
Es necesario escribir la funcin que se ejecutar cuando todo suceda correctamente, en este caso la funcin log, la cual ser un mtodo del objeto com.quizzpot.tutorial.Ajax.
view plaincopy to clipboardprint?

1. , //<---no olvidar esta coma para separar entre los mtodos 2. 3. /*************************************** 4. * If the request is successful 5. ***************************************/ 6. log: function(response,options){//recibe la respuesta y el objeto de conf iguracin 7. var el = Ext.get('response'); // tomar el LOG 8. var text = response.responseText; //remover el... 9. text = text.replace(/</g,'&lt;'); // < y... 10. text = text.replace(/>/g,'&gt;'); // > 11. el.select('p.newest').removeClass('newest'); // remover el ultimo upd ate 12. Ext.DomHelper.append(el,'<p class="newest">'+text+'</p>'); //update e l log 13. el.scrollTo('top',el.dom.scrollHeight); //posicionar el scroller al f ondo 14. el.select('p.newest').highlight('00ff66',{duration:0.5}); //highlight el ultimo mensaje 15. } Lo ms importante del cdigo anterior es que la funcin recibe dos parmetros, el primero es la respuesta del servidor el objeto XMLHttpRequest, y el segundo parmetro es el objeto de configuracin, el resto del cdigo 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 informacin regresada.

La funcin failure

En caso de suceder un error debemos saber como manejarlo, el siguiente cdigo es disparado cuando un error ha sucedido en la comunicacin o bien en el servidor.
view plaincopy to clipboardprint?

1. , //<--- coma separadora de los mtodos 2. 3. /*************************************** 4. * If the request fails, log the error 5. ***************************************/ 6. fail: function(response,options){ 7. var el = Ext.get('response'); 8. el.select('p.newest').removeClass('newest'); 9. Ext.DomHelper.append(el,'<p class="newest"><strong>Error Status '+res ponse.status+' '+response.statusText+'</strong>: Opsss, there is somethin g wrong! please try again</p>');

10. 11. 12. }

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 cdigo 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.
view plaincopy to clipboardprint?

1. <?php 2. 3. if(rand(1,4) == 1){ 4. if(rand(1,2)==1) 5. header("HTTP/1.0 404 Not Found"); 6. else 7. header("HTTP/1.0 403 Forbidden"); 8. exit; 9. } 10. 11. $type = $_SERVER['REQUEST_METHOD']; 12. $msg = new Message("This is a ".$type." request!",true); 13. 14. $format = $type=='GET'? $_GET['format']:$_POST['format']; 15. 16. switch($format){ 17. case 'xml': 18. header("Content-Type: text/xml"); 19. echo $msg->toXML(); 20. break; 21. case 'json': 22. header("Content-Type: text/plain"); 23. echo $msg->toJSON(); 24. break; 25. default: 26. header("Content-Type: text/html"); 27. echo $msg->toHTML(); 28. } 29. 30. class Message{ 31. protected $msg,$success; 32. 33. public function __construct($msg,$success) { 34. $this->msg = $msg; 35. $this->success = $success; 36. } 37. 38. public function toXML(){

39.

return "<response><success>".$this>success."</success><msg>".$this->msg."</msg></response>"; 40. } 41. 42. public function toJSON(){ 43. return "{success:".$this->success.",msg:'".$this->msg."'}"; 44. } 45. 46. public function toHTML(){ 47. return '<p>'.$this->msg.'</p>'; 48. } 49. } 50. ?> 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 mtodos 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.