El objeto Ajax, peticiones GET y POST Más videos
Comentarios: 24
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
Descripción del tema
La comunicación con el servidor es parte vital en las aplicaciones Web. Enviar y recibir información sin que la página se actualice por completo es sencillo utilizando Ajax, en este tema veremos como realizar peticiones GET y POST utilizando el Framework de Ext JS.
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¶m2=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,'<'); // < y...
text = text.replace(/>/g,'>'); // >
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.Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.
Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
24Comentarios
Sorry por no hacer video, pero estoy enfermo de la garganta y no puedo hablar bien :(
Y ya estas bien?
Crysfel Excelente impresionante el curso que estas realizando y la facilidad de la explicacion sin ondar con conceptos complejos. Esta pagina esta en mis favoritos y siempre esperando una nueva entrega del curso. impresionante. te felicito
Cryfel me gusta mucho los cursos que impartes son bastante interezante y muy útil para mi trabajo de tesis que desarrollo ahora. Te agradecería cualquier ayuda que me brindaras en estos cursos que impartes!! escribeme a mi mail...gracias!!
excelente ... quizas mencionar que tambien el framework soportan los metodos PUT DELETE (REST FUL) que hoy esta tan de moda, ademas objetos JSON como transporte (DTO o VO depende del caso) :-) algo asi : <pre name="code" class="javascript"> Ext.Ajax.request({ waitMsg: 'Wait...', url: 'url...', method: 'PUT', headers: { 'Content-Type':'text/json' }, jsonData: objectVO, failure: function(response, options) { ... ... </pre>
Otro método que he usado con éxito es el HEAD. Lo usaba para saber de la existencia de un fichero sin pedirle el contenido al webserver. Especialmente interesante si se trata de ficheros que en el caso de existir ocupan varios MB
Excelente material de etxJS ... Señor Crysfel . no seria mala idea que publique un Libro sobre este Framework... Saludos desde el Perú
Excelente tutorial, solo una pregunta, se podra usar ajax para por ejemplo bajar un archivo del server, en lugar del común window.open(url)
no precisamente Ajax, pero lo que puedes hacer es un "controlador" o un script en PHP que te gestione las descargas modificando las cabeceras del response para que automáticamente se comience a bajar un archivo y luego mediante un window.location puedes iniciar la descarga
Como se invoca un metod POST con servicios RESTful si el servicio espera un Entity, no parametros y tampoco una forma ? El servicio espera un Entity en la forma JSON o XML Muchas gracias por anticipado
como se hace para obtener una respuesta json, como la manejas
hola, quisiera que me ayudaran con un problema, cuando le agrego parametros al ajax params:{autor:'fsdf',title:'sfsdf'} no se ejecuta el codigo de la url pero si no pongo parametros si lo hace. Por favor ayuda
Crysfel, Muy Bien, casi excelente, pero cabe mensionar que no estas Utilizando AJAX sino AJAJ (JSON en lugar de XML). Saludos, sigue adelante, muy buen trabajo!!. Ronald Mayta Software Developer PHP - Java
como hacer para hacer dos peticiones AJAX, es decir, que no me ejecute una sino ha terminado la otra? Gracias....
Ojala nos responda. Por que tengo una problematica como la que plateas Hector.
lasjlfjklasdf
Excelente pero porque usaste la imagen del jabon quita grasa XD
Saludos, excelente curso. Tengo una aplicación para la matriculación y control de notas de una institución educativa, ya lo tengo bastante avanzado pero me estanque en un formulario. Si pudieras ayudarme estaría muy agradecido, por mail para entrar en detalles.
Yo solo tengo un problema en este codigo. el.select('p.newest').removeClass('newest'); // remover el ultimo update que me reporta como: "Uncaught TypeError: Object [object Object] has no method 'removeClass' ", lo demas esta OK
En la nueva versión de Ext el método se llama "removeCls" ;)
saludos, Muy bien la explicacion me sirvio de mucho :)
Hola quisiera pedir alluda. Tengo que trasformar un listado de urls en un listado de documentos usando $.ajax, pero no tengo idea de como puedo lograr esto, e empesado un codigo pero no estoy seguro de ir por buen camino, agradezco cualqwuiewr alluda. Saludos!! Este es el codigo var urls = ['http://acamica.com/doc1', 'http://acamica.com/doc2', 'http://acamica.com/doc3']; async.map(urls, $.ajax, function(success, err){ // urls transformadas en documentos });
????????,??No.1????????????????????????????????????????????????? ?????????????????????2???????,????? ??????? ??,????????? ???n??????? }}}}}} https://www.kopijp.com/product/detail.aspx-id=2557.htm
??????????????????????????????????????????????????????? ??????????? ???????????? ??????????????????????????? ???????????????????????????????? ????????????? ???????? }}}}}} https://www.bagssjp.com/product/detail-11622.html https://www.bagssjp.com/product/detail-11888.html https://www.bagssjp.com/product/detail-4348.html https://www.bagssjp.com/product/detail-8633.html https://www.bagssjp.com/product/detail-3826.html