Curso de jQuery-Ajax
De WikiEducator
Saltar a: navegación, buscar
jQuery
Tutorial para desarrollar en Web mediante jQuery.
Contenido
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.
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"); });
