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

De WikiEducator
Saltar a: navegación, buscar
(JSON)
Línea 34: Línea 34:
 
   ];
 
   ];
 
</source>
 
</source>
 
*El primer parámetro nos indica la velocidad y puede tener los valores: slow, fast, normal o milisegundos.
 
*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.
 
*Los parámetros son opcionales
 
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
*Con la función animate, podemos hacer efectos más complejos:
+
===¿Qué es AJAX?===
*Con valores absolutos o relativos
+
*AJAX quiere decir Asynchronous JavaScript and XML.
*Si ponemos varios animates seguidos, los irá encolando (no empezará una instrucción hasta terminar la anterior).
+
*Sirve para cargar datos en background y mostrarlos en la web sin recargar la página.
<source lang="javascript">
+
*jQuery y AJAX:
$(selector).animate({
+
:La implementación de AJAX es distinta en función del navegador.
      left:'250px',
+
:Podremos recibir ficheros de tipo texto, XML, html o JSON mediante http GET o POST.
      opacity:'0.5',
+
      height:'150px',
+
      width:'150px'
+
    });
+
 
+
$("button").click(function(){
+
  $("div").animate({
+
    left:'250px',
+
    height:'+=150px',
+
    width:'+=150px'
+
  });
+
});
+
</source>
+
*Pararemos una animación mediante la función stop:
+
<source lang="javascript">
+
$(selector).stop(stopAll,goToEnd);
+
</source>
+
 
</div>
 
</div>
  

Revisión de 10:24 30 oct 2012


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 recargar la página.
  • 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.

Callback functions

  • 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.
  • Ejemplo:
$("p").hide(1000);
alert("The paragraph is now hidden");
  • 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:
$("p").hide(1000,function(){
  alert("The paragraph is now hidden");
});