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

De WikiEducator
Saltar a: navegación, buscar
(→‎¿Qué es AJAX?)
Línea 47: Línea 47:
  
 
<div class="slide">
 
<div class="slide">
 +
===Cachear AJAX===
 +
<source lang="javascript">
 +
$.ajaxSetup ({ 
 +
    cache: false 
 +
}); 
 +
</source>
 +
*Será útil usar caché solamente con contenidos estáticos.
 +
*Es aconsejable indicarlo porque el comportamiento por defecto puede variar en función del navegador.
 +
</div>
  
−
=== Sintaxis ===
+
<div class="slide">
−
$(selector).load(URL,data,callback);
+
===Cachear AJAX===
−
 
+
<source lang="javascript">
−
Ejemplo:
+
$.ajaxSetup ({ 
 +
    cache: false 
 +
});
 +
</source>
 +
*Será útil usar caché solamente con contenidos estáticos.
 +
*Es aconsejable indicarlo porque el comportamiento por defecto puede variar en función del navegador.
 +
</div>
 +
<div class="slide">
 +
===Método load===
 +
* Es el método más sencillo.
 
<source lang="html4strict">
 
<source lang="html4strict">
−
<!DOCTYPE html>
+
<html>
−
<html>
+
 
<head>
 
<head>
−
<script src="jquery.js"></script>
+
  <title>Ajax Simple</title>
 +
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>  
 
<script>
 
<script>
 
$(document).ready(function(){
 
$(document).ready(function(){
−
  $("button").click(function(){
+
  $("#enlaceajax").click(function(evento){
−
    $("#div1").load("demo_test.txt");
+
      evento.preventDefault();
−
  });
+
      $("#destino").load("contenido-ajax.html");
−
});
+
  });
 +
})
 
</script>
 
</script>
 
</head>
 
</head>
 
<body>
 
<body>
  
−
<div id="div1"><h2>jQuery AJAX cambiará este texto</h2></div>
+
<a href="#" id="enlaceajax">Haz clic!</a>
−
<button>Ejecutar AJAX</button>
+
<br>
 +
<div id="destino"></div>
  
 
</body>
 
</body>
Línea 74: Línea 94:
 
</source>
 
</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:
+
*El método load puede llevar parámetros o una función de callback:
 
<source lang="javascript">
 
<source lang="javascript">
−
$("p").hide(1000);
+
$(document).ready(function(){
−
alert("The paragraph is now hidden");
+
  $("#enlaceajax").click(function(evento){
 +
      evento.preventDefault();
 +
      $("#destino").load("recibe-parametros.php", {nombre: "Pepe", edad: 45}, function(){
 +
        alert("recibidos los datos por ajax");
 +
      });
 +
  });
 +
})
 
</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="javascript">
+
<source lang="html4strict">
−
$("p").hide(1000,function(){
+
Recibido el siguiente dato:
−
  alert("The paragraph is now hidden");
+
<br/>
−
});
+
Nombre: <?php echo $_POST["nombre"];?>
 +
<br/>
 +
Edad: <?php echo $_POST["edad"];?>
 
</source>
 
</source>
−
 
+
</div>
−
 
+
 
</div>
 
</div>

Revisión de 12:04 30 oct 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.

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.

Método load

  • Es el método más sencillo. 
 <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>
  • 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"];?>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/jQuery/Ajax&oldid=10090»