Ajax Más videos
Descripción del tema
En esta sesión vamos a ver como hacer peticiones Ajax al servidor, como recibir información en diferentes formatos como: json, xml o texto plano.
Creando la conexión Ajax
Para el ejemplo que vamos a hacer en esta sesión pueda funcionar necesitamos que nuestros archivos del curso estén alojados dentro de un servidor Web, ya que vamos a estar haciendo peticiones Ajax.
Lo primero que tenemos que hacer es crear una nueva carpeta llamada 04-ajax y dentro de esta carpeta vamos a crear un archivo HTML llamado 01-ajax.html. La clase responsable para hacer peticiones Ajax al servidor se llama Ext.data.Connection, así que vamos a crear una instancia de esta clase usando el método Ext.create y vamos a hacer la petición al servidor.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ajax</title>
<link rel="stylesheet" href="../ext-4.2.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext-4.2.1/ext-all-dev.js"></script>
<script type="text/javascript">
var conn = Ext.create('Ext.data.Connection'); //paso 1
conn.request({ //paso 2
url : 'serverside/getData.json', //paso 3
});
</script>
</head>
<body>
</body>.
</html>- En el paso 1 creamos la instancia de la clase Connection, también es posible definir configuraciones como el timeout, default headers entre otras, al momento de crear la instancia.
- En el paso 2 estamos haciendo la petición Ajax, el método request recibe un objeto con la definición de la petición que se quiere hacer al servidor. Algo muy importante que no debemos olvidar es que las peticiones se hacen de manera asíncrona, es decir que se seguirán ejecutando las demás líneas de código a pesar de que el servidor no ha respondido.
- En el paso 3 estamos definiendo la url a donde se va a hacer la petición.
{
"success" : true,
"data" : [{
"id" : 1,
"nombre" : "Juan"
},{
"id" : 2,
"nombre" : "Susana"
}]
}Esta será la respuesta que nos va a regresar el servidor. Ahora lo que necesitamos hacer es definir el callback o la función que se va a ejecutar cuando el servidor responda.conn.request({
url : 'serverside/getData.json',
success : function(response,options){ //paso 1
var info = Ext.decode(response.responseText); //paso 2
console.log(info.data); //paso 3
},
failure : function(response,options){ //paso 4
console.log('Error!!');
}
});
- En el paso 1 estamos definiendo el callback success el cual va a ser ejecutado cuando el servidor responda con éxito. En este caso estamos usando una función anónima la cual tiene dos parámetros: el primero es la respuesta del servidor y el segundo es un objeto options que es la definición de la petición.
- En el paso 2 estamos decodificando la respuesta del servidor con el método Ext.decode ya que viene de forma de texto y la necesitamos convertir a objetos JavaScript.
- En el paso 3 solo estamos imprimiendo en consola la información que nos regresó el servidor.
- En el paso 4 estamos definiendo el callback failure el cual va a ser ejecutado cuando exista algún problema en el servidor, en la conexión o suceda algún error. El callback failure tiene los mismos parámetros que el callback success. Aquí también vamos a imprimir un mensaje de error en la consola.
Al probar nuestro ejemplo deberíamos ver en la consola los objetos que imprimimos con la variable info.data, que prácticamente vienen siendo los que definimos en el getData.json.
No es necesario crear la instancia de la clase Connection ya que Ext crea una objeto de esa clase, ese objeto se llama Ext.Ajax. Así que podemos comentar la línea de código donde estamos creando la instancia y usar el objeto que nos proporciona Ext.
//var conn = Ext.create('Ext.data.Connection');
Ext.Ajax.request({
url : 'serverside/getData.json',
success : function(response,options){
var info = Ext.decode(response.responseText);
console.log(info.data);
},
failure : function(response,options){
console.log('Error!!');
}
});
Ext.Ajax.request({
url : 'serverside/saveUser.json',
method : 'POST',
params : {
nombre : 'Pedro',
edad : 21,
genero : 'm'
},
success : function(response,options){
var info = Ext.decode(response.responseText);
console.log(info.data);
},
failure : function(response,options){
console.log('Error!!');
}
});
Como podemos ver en el código anterior, es posible crear varias instancias de la clase Connection. En la segunda petición Ajax definimos una url que no existe para que se ejecute el callback failure.
Por defecto las peticiones Ajax se hacen por el método GET, pero es posible usar otro método solo necesitamos definirlo usando la propiedad method. La segunda petición esta usando el método POST.
Es posible mandar parámetros al servidor usando la propiedad params, la cual es un objeto donde irán todos los parámetros que se necesiten enviar. En este ejemplo estamos enviando la información de un usuario: nombre, edad y género. No olvides leer la documentación de Ext para ver las demás propiedades que se pueden usar de la clase Connection.
Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Fundamentos de Ext 4, 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 Fundamentos de Ext 4, 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.
3Comentarios
Muy buena la informacion y explicativo, era justo lo que necesitaba aprender... muchas gracias..
Me está lanzando este error! Uncaught TypeError: Cannot read property 'request' of undefined(anonymous function) @ 01-ajax.html:15 He estado Googleando y copiando el código que tienes pero no jala.
Pareciera que no estás importando la librería xD Eso me dice el error que pones, asegurate de que la URL a Ext JS esté correcta y que el browser la esté cargando ;)