Diferencia entre revisiones de «Usuario:Juanda/jQuery/Ajax»

De WikiEducator
Saltar a: navegación, buscar
(→‎Cachear AJAX)
 
(34 revisiones intermedias por el mismo usuario no mostrado)
Línea 8: Línea 8:
  
 
<div class="slide">
 
<div class="slide">
−
 
 
=== JSON ===
 
=== JSON ===
 
* '''J'''ava'''S'''cript '''O'''bject '''N'''otation
 
* '''J'''ava'''S'''cript '''O'''bject '''N'''otation
Línea 18: Línea 17:
 
//Objeto JSON:
 
//Objeto JSON:
 
{ "nombre":"Pepe" , "apellido":"Pérez" }
 
{ "nombre":"Pepe" , "apellido":"Pérez" }
−
 
+
</source>
 +
</div>
 +
<div class="slide">
 +
<source lang="javascript">
 
//Array JSON
 
//Array JSON
 
{
 
{
Línea 34: Línea 36:
 
   ];
 
   ];
 
</source>
 
</source>
 +
</div>
 +
<div class="slide">
  
−
*El primer parámetro nos indica la velocidad y puede tener los valores: slow, fast, normal o milisegundos.
+
===¿Qué es AJAX?===
−
*El segundo parámetro es la función que hay que ejecutar en el momento en que se complete la acción de hide o show.
+
*AJAX quiere decir Asynchronous JavaScript and XML.
−
*Los parámetros son opcionales
+
*Sirve para cargar datos en background y mostrarlos en la web sin necesidad de recargar la página, por eso lo de asíncrono.
 +
*XHR significa XML HTTP REQUEST y es hablar de lo mismo.
 +
*Lo podemos ver en el inbox de gmail, en google maps cuando aplicamos el zoom, etc.
 +
*jQuery y AJAX:
 +
:La implementación de AJAX es distinta en función del navegador.
 +
:Podremos recibir ficheros de tipo texto, XML, html o JSON mediante http GET o POST.
 
</div>
 
</div>
 +
 
<div class="slide">
 
<div class="slide">
−
*Con la función animate, podemos hacer efectos más complejos:
+
===Cachear AJAX===
−
*Con valores absolutos o relativos
+
−
*Si ponemos varios animates seguidos, los irá encolando (no empezará una instrucción hasta terminar la anterior).
+
 
<source lang="javascript">
 
<source lang="javascript">
−
$(selector).animate({
+
$.ajaxSetup ({
−
      left:'250px',
+
    cache: false 
−
      opacity:'0.5',
+
}); 
−
      height:'150px',
+
</source>
−
      width:'150px'
+
*Será útil usar caché solamente con contenidos estáticos.
−
    });
+
*Es aconsejable indicarlo porque el comportamiento por defecto puede variar en función del navegador.
 +
*La caché solo funciona mediante GET.
 +
</div>
  
−
$("button").click(function(){
+
<div class="slide">
−
  $("div").animate({
+
 
−
    left:'250px',
+
===Método load===
−
    height:'+=150px',
+
* Es el método más sencillo. Lo usaremos para cargar cierto contenido por AJAX al DOM de la página actual.
−
    width:'+=150px'
+
<source lang="javascript">
−
  });
+
$(selector).load(URL,data,callback);
−
});  
+
 
</source>
 
</source>
−
*Pararemos una animación mediante la función stop:
+
*Se puede especificar un selector jQuery a la URL:
 
<source lang="javascript">
 
<source lang="javascript">
−
$(selector).stop(stopAll,goToEnd);
+
$("#div1").load("demo_test.txt #p1");
 
</source>
 
</source>
 
</div>
 
</div>
 +
<div class="slide">
 +
====Ejemplo de uso====
 +
*Petición de contenido vía ajax al pulsar un enlace:
 +
<source lang="html4strict">
 +
<html>
 +
<head>
 +
  <title>Ajax Simple</title>
 +
<script src="jquery-1.8.2.min.js" type="text/javascript"></script> 
 +
<script>
 +
$(document).ready(function(){
 +
  $("#enlaceajax").click(function(evento){
 +
      evento.preventDefault();
 +
      $("#destino").load("contenido-ajax.html");
 +
  });
 +
})
 +
</script>
 +
</head>
 +
<body>
  
 +
<a href="#" id="enlaceajax">Haz clic!</a>
 +
<br>
 +
<div id="destino"></div>
 +
 +
</body>
 +
</html>
 +
</source>
 +
</div>
 
<div class="slide">
 
<div class="slide">
 +
====Seleccionar datos en petición AJAX====
 +
*Podemos añadir un selector jQuery a nuestra URL de petición AJAX:
 +
<source lang="javascript">
 +
$("#div1").load("mipagina.html #p1");
 +
</source>
 +
* En este caso obtendremos del fichero mipagina.html el elemento identificado con id="p1".
 +
</div>
  
−
=== Callback functions ===
+
<div class="slide">
 +
====Paso de parámetros====
 +
*El método load puede llevar parámetros o una función de callback:
 +
<source lang="javascript">
 +
$(document).ready(function(){
 +
  $("#enlaceajax").click(function(evento){
 +
      evento.preventDefault();
 +
      $("#destino").load("recibe-parametros.php", {nombre: "Pepe", edad: 45}, function(){
 +
        alert("recibidos los datos por ajax");
 +
      });
 +
  });
 +
})
 +
</source>
 +
*Fichero en php:
 +
<source lang="html4strict">
 +
Recibido el siguiente dato:
 +
<br/>
 +
Nombre: <?php echo $_POST["nombre"];?>
 +
<br/>
 +
Edad: <?php echo $_POST["edad"];?>
 +
</source>
 
</div>
 
</div>
−
*En JavaScript se ejecutan las sentencias línea a línea. Puede ser que una sentencia no haya terminado su ejecución y ya haya comenzado la siguiente.
+
<div class="slide">
−
*Ejemplo:
+
====Con mensaje de "carga"====
 
<source lang="javascript">
 
<source lang="javascript">
−
$("p").hide(1000);
+
$(document).ready(function(){
−
alert("The paragraph is now hidden");
+
  $("#enlaceajax").click(function(evento){
 +
      evento.preventDefault();
 +
      var ajax_load = "<img src='img/load.gif' alt='loading...' />"; 
 +
      var loadUrl = "pagina_lenta.php"; 
 +
      $("#result").html(ajax_load).load(loadUrl);
 +
  });
 +
})
 +
</script>
 
</source>
 
</source>
−
*Para evitar esto, '''pasamos la función como parámetro''', y evitamos que se ejecute hasta que termina la animación. Esto se conoce como callback functions:
+
*Fichero en php:
 +
<source lang="html4strict">
 +
<?php
 +
sleep(3);
 +
echo ("He tardado 3 segundos en ejecutar esta p&aactute;gina...");
 +
?>
 +
</source>
 +
</div>
 +
<div class="slide">
 +
$(selector).load(URL,data,'''callback''');
 +
*El parámetro opcional de callback especifica la función de callback a ejecutar cuando el método load() se haya completado. Puede tener varios parámetros:
 +
:responseTxt - contiene el resultado de la llamada si ha sido un éxito
 +
:statusTXT - contiene el estado de la llamada
 +
:xhr - contiene el objeto XMLHttpRequest
 +
*Ejemplo de uso:
 
<source lang="javascript">
 
<source lang="javascript">
−
$("p").hide(1000,function(){
+
$("button").click(function(){
−
   alert("The paragraph is now hidden");
+
   $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
 +
    if(statusTxt=="success")
 +
      alert("External content loaded successfully!");
 +
    if(statusTxt=="error")
 +
      alert("Error: "+xhr.status+": "+xhr.statusText);
 +
  });
 
});
 
});
 
</source>
 
</source>
 +
</div>
 +
<div class="slide">
  
 +
===Otros métodos===
 +
*$.getJSON(): Obtiene un fichero JSON de un sitio remoto
 +
*$.getScript(): Obtiene un fichero javascript de un sitio remoto
 +
*$.get(): hace peticiones ajax vía GET
 +
*$.post(): hace peticiones ajax vía POST
 +
*$.ajax(): De más bajo nivel. Será útil para controlar errores en las peticiones AJAX o alguna función específica de AJAX (por ejemplo la cache).
 +
</div>
  
 +
<div class="slide">
 +
===Ajax y Firebug===
 +
*Podemos hacer un seguimiento de las peticiones Ajax desde la pestaña de Red de Firebug, opción XHR (XML HTTP REQUEST):
 +
[[Archivo:firebug_load_1.png]]
 +
</div>
 +
 +
<div class="slide">
 +
*Si pulsamos en el recuadro del + a la izquierda, podremos ver los parámetros que se envían en la petición AJAX. <br/>En esta petición no hay ningún parámetro. El único que hay es un número aleatorio generado para forzar que la petición no se sirva de la caché.
 +
[[Archivo:firebug_load_2.png]]
 +
</div>
 +
 +
<div class="slide">
 +
*En la pestaña de respuesta (response) encontramos lo que devuelve la petición AJAX:
 +
[[Archivo:firebug_load_3.png]]
 +
</div>
 +
 +
<div class="slide">
 +
*En este caso enviamos más de un parámetro vía GET. Para pasar más de un parámetro:
 +
<source lang="javascript">
 +
$("#load_get").click(function(){
 +
$("#result")
 +
.html(ajax_load)
 +
.load(loadUrl, "language=php&version=5");
 +
});
 +
</source>
 +
[[Archivo:firebug_load_4.png]]
 +
</div>
 +
 +
<div class="slide">
 +
*Si pasamos los parámetros como un objeto en vez de como una cadena, se enviarán vía POST:
 +
<source lang="javascript">
 +
$("#load_post").click(function(){
 +
$("#result")
 +
.html(ajax_load)
 +
.load(loadUrl, {language: "php", version: 5});
 +
});
 +
</source>
 +
[[Archivo:firebug_load_5.png]]
 +
</div>
 
</div>
 
</div>

Última revisión de 11:00 5 nov 2012


Ajax

JSON

  • JavaScript Object Notation
  • Se utiliza para almacenar e intercambiar información
  • Más pequeño que XML y más rápido y sencillo de analizar (parsear).
  • Se basa en la sintaxis del propio JavaScript para objetos. 
//Objeto JSON:
{ "nombre":"Pepe" , "apellido":"Pérez" }
//Array JSON
{
"estudiantes": [
    { "nombre":"Juan" , "lastName":"Alcocer" }, 
    { "nombre":"Ana" , "lastName":"Serrano" }, 
    { "nombre":"Mario" , "lastName":"Gil" }
  ]
}
//sintáxis en JavaScript:
var estudiantes = [
    { "nombre":"Juan" , "lastName":"Alcocer" }, 
    { "nombre":"Ana" , "lastName":"Serrano" }, 
    { "nombre":"Mario" , "lastName":"Gil" }
  ];

¿Qué es AJAX?

  • AJAX quiere decir Asynchronous JavaScript and XML.
  • Sirve para cargar datos en background y mostrarlos en la web sin necesidad de recargar la página, por eso lo de asíncrono.
  • XHR significa XML HTTP REQUEST y es hablar de lo mismo.
  • Lo podemos ver en el inbox de gmail, en google maps cuando aplicamos el zoom, etc.
  • jQuery y AJAX:
La implementación de AJAX es distinta en función del navegador.
Podremos recibir ficheros de tipo texto, XML, html o JSON mediante http GET o POST.

Cachear AJAX

$.ajaxSetup ({  
    cache: false  
});
  • Será útil usar caché solamente con contenidos estáticos.
  • Es aconsejable indicarlo porque el comportamiento por defecto puede variar en función del navegador.
  • La caché solo funciona mediante GET.

Método load

  • Es el método más sencillo. Lo usaremos para cargar cierto contenido por AJAX al DOM de la página actual. 
$(selector).load(URL,data,callback);
  • Se puede especificar un selector jQuery a la URL: 
$("#div1").load("demo_test.txt #p1");

Ejemplo de uso

  • Petición de contenido vía ajax al pulsar un enlace: 
 <html>
<head>
   <title>Ajax Simple</title>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>   
<script>
$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      $("#destino").load("contenido-ajax.html");
   });
})
</script>
</head>
<body>
 
<a href="#" id="enlaceajax">Haz clic!</a>
<br>
<div id="destino"></div>
 
</body>
</html>

Seleccionar datos en petición AJAX

  • Podemos añadir un selector jQuery a nuestra URL de petición AJAX: 
$("#div1").load("mipagina.html #p1");
  • En este caso obtendremos del fichero mipagina.html el elemento identificado con id="p1".

Paso de parámetros

  • El método load puede llevar parámetros o una función de callback: 
$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      $("#destino").load("recibe-parametros.php", {nombre: "Pepe", edad: 45}, function(){
         alert("recibidos los datos por ajax");
      });
   });
})
  • Fichero en php: 
Recibido el siguiente dato:
<br/>
Nombre: <?php echo $_POST["nombre"];?>
<br/>
Edad: <?php echo $_POST["edad"];?>

Con mensaje de "carga"

$(document).ready(function(){
   $("#enlaceajax").click(function(evento){
      evento.preventDefault();
      var ajax_load = "<img src='img/load.gif' alt='loading...' />";  
      var loadUrl = "pagina_lenta.php";  
      $("#result").html(ajax_load).load(loadUrl);  
   });
})
</script>
  • Fichero en php: 
<?php
sleep(3);
echo ("He tardado 3 segundos en ejecutar esta p&aactute;gina...");
?>

$(selector).load(URL,data,callback);

  • El parámetro opcional de callback especifica la función de callback a ejecutar cuando el método load() se haya completado. Puede tener varios parámetros:
responseTxt - contiene el resultado de la llamada si ha sido un éxito
statusTXT - contiene el estado de la llamada
xhr - contiene el objeto XMLHttpRequest
  • Ejemplo de uso: 
$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("External content loaded successfully!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

Otros métodos

  • $.getJSON(): Obtiene un fichero JSON de un sitio remoto
  • $.getScript(): Obtiene un fichero javascript de un sitio remoto
  • $.get(): hace peticiones ajax vía GET
  • $.post(): hace peticiones ajax vía POST
  • $.ajax(): De más bajo nivel. Será útil para controlar errores en las peticiones AJAX o alguna función específica de AJAX (por ejemplo la cache).

Ajax y Firebug

  • Podemos hacer un seguimiento de las peticiones Ajax desde la pestaña de Red de Firebug, opción XHR (XML HTTP REQUEST):

Firebug load 1.png

  • Si pulsamos en el recuadro del + a la izquierda, podremos ver los parámetros que se envían en la petición AJAX.
    En esta petición no hay ningún parámetro. El único que hay es un número aleatorio generado para forzar que la petición no se sirva de la caché.

Firebug load 2.png

  • En la pestaña de respuesta (response) encontramos lo que devuelve la petición AJAX:

Firebug load 3.png

  • En este caso enviamos más de un parámetro vía GET. Para pasar más de un parámetro: 
	$("#load_get").click(function(){
		$("#result")
			.html(ajax_load)
			.load(loadUrl, "language=php&version=5");
	});

Firebug load 4.png

  • Si pasamos los parámetros como un objeto en vez de como una cadena, se enviarán vía POST: 
	$("#load_post").click(function(){
		$("#result")
			.html(ajax_load)
			.load(loadUrl, {language: "php", version: 5});
	});

Firebug load 5.png

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/jQuery/Ajax&oldid=10264»