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

De WikiEducator
Saltar a: navegación, buscar
(Página creada con 'Carga de pequeños datos mediante JavaScript asíncrono, desde una fuente hasta la página actual. No es necesaria una recarga de la página, se actualizan sólo partes de la m…')
 
Línea 1: Línea 1:
−
Carga de pequeños datos mediante JavaScript asíncrono, desde una fuente hasta la página actual.
+
{{Usuario:juanda/jQuery/nav }}
 +
{{#widget:Slides}} {{MiTitulo| Curso de jQuery-Ajax}}
 +
<div class="slides layout-regular template-default">
 +
<div class="slide">
  
−
No es necesaria una recarga de la página, se actualizan sólo partes de la misma.
+
= Ajax =
 +
</div>
  
−
JQuery es un framework que permite una implementación muy sencilla de Ajax.
+
<div class="slide">
  
−
Método sencillo:
+
=== JSON ===
−
$(selector).load(url,data,callback)
+
* '''J'''ava'''S'''cript '''O'''bject '''N'''otation
 +
*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.
 +
<source lang="javascript">
  
−
Método de bajo nivel (ofrece más posibilidades pero con más complejidad)
+
//Objeto JSON:
−
$.ajax(options)
+
{ "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" }
 +
  ];
 +
</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 class="slide">
 +
*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).
 +
<source lang="javascript">
 +
$(selector).animate({
 +
      left:'250px',
 +
      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 class="slide">
 +
 
 +
=== Callback functions ===
 +
</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.
 +
*Ejemplo:
 +
<source lang="javascript">
 +
$("p").hide(1000);
 +
alert("The paragraph is now hidden");
 +
</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:
 +
<source lang="javascript">
 +
$("p").hide(1000,function(){
 +
  alert("The paragraph is now hidden");
 +
});
 +
</source>
 +
 
 +
 
 +
</div>

Revisión de 10:15 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" }
  ];
  • 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");
});


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