|
|
| Línea 64: |
Línea 64: |
| | <body> | | <body> |
| | | | |
| − | <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div> | + | <div id="div1"><h2>jQuery AJAX cambiará este texto</h2></div> |
| − | <button>Get External Content</button> | + | <button>Ejecutar AJAX</button> |
| | | | |
| | </body> | | </body> |
Revisión de 10:29 30 oct 2012
jQuery
Tutorial para desarrollar en Web mediante jQuery.
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.
Sintaxis
$(selector).load(URL,data,callback);
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>jQuery AJAX cambiará este texto</h2></div>
<button>Ejecutar AJAX</button>
</body>
</html>
- 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");
});
