Curso de jQuery-Ajax

jQuery

Tutorial para desarrollar en Web mediante jQuery.

Introducción | Efectos | html | Eventos | Ajax | Plugins  | jQueryUI

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" }
  ];

• 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

• Con la función animate, podemos hacer efectos más complejos:
• Con valores absolutos o relativos
• Si ponemos varios animates seguidos, los irá encolando (no empezará una instrucción hasta terminar la anterior).

$(selector).animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
 
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

• Pararemos una animación mediante la función stop:

$(selector).stop(stopAll,goToEnd);

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");
});