Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de jQuery

Programar en javascript puede ser más fácil sabiendo utilizar jQuery


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 116

Visitas el mes pasado: 193

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual jQuery : desarrollo web
Desarrollo Web
jQuery Tutorial
w3schools.com
jQuery API - (página oficial)
jquery.com
Manual de jQuery
lawebera.es
Fundamentos de jQuery
librojquery.com
Introducción al jQuery
www.comocreartuweb.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




jQuery (X)

Utilizar Ajax

imagen jquery

La tecnología Ajax

Ajax es una tecnología que combina varios elementos. Con Ajax se pueden transferir datos desde otros archivos a la página, es decir podemos por ejemplo, insertar los datos de otro archivo en nuestra página, o mandar datos de nuestra página a otro archivo. Todo ello de forma asíncrona, es decir, en segundo plano, sin que la actividad de la página en la que estamos se pare.

Para saber más sobre Ajax, o si no sabes bien cómo funciona, recomendamos leerse primero el Manual de Ajax donde se explica qué es Ajax, y lo que debe de hacerse para que funcione utilizando javascript.

Suponemos por tanto que el lector conoce ya el funcionamiento de Ajax, de ese modo podra seguir fácilmente las explicaciones que siguen, de no ser así, es más que recomendable ir primero al manual de Ajax indicado.


Ajax con javascript o jQuery

Con javascript el uso de Ajax puede ser algo complicado. Tenemos que iniciar el objeto XMLHttpRequest, utilizar sus propiedades, métodos y eventos. Esto requiere muchas líneas de código, que en la mayoría de las veces se repiten de forma muy similar en la mayoría de las páginas.

Si has seguido nuestro manual de Ajax, verás que al final para usar Ajax creamos un objeto que una vez copiado, no tenemos mas que llamarlo con unos cuantos métodos. En jQuery ocurre algo muy similar, el uso de Ajax se reduce a saber utilizar unos cuantos métodos de jQuery. Veremos esos métodos a continuación.


Insertar código.

Una de las tareas típicas de Ajax es insertar un bloque de código en la página, el cual lo tenemos en un archivo aparte. utilizaremos el método load() .

$("#capa1").load("archivo.html");

El parámetro que le pasamos al método .load() es la ruta del archivo que queremos ver. El archivo se verá dentro del elemento marcado como selector (con id="capa1"). El contenido de éste elemento será sustituído por el del archivo.

Aquí hemos hecho una prueba sencilla: hemos creado un archivo con el siguiente texto:

<h4>Texto con ajax</h4>

<p>Si ves este texto es porque ajax funciona</p>

Hemos guardado este archivo con el nombre ajax1.html en el mismo directorio de esta página.

Después hemos creado un elemento con id="capa1", el cual hemos puesto aquí a nuestra derecha.

A continuación dentro del código javascript escribimos:

$(document).ready(function(){
$("#capa1").load("ajax1.html");
})

Y tal como puedes observar, el contenido del archivo nos aparece dentro del elemento señalado.

El archivo que podemos incluir puede ser de cualquier tipo, siempre que al abrirlo nos devuelva un contenido de texto (o código html) que pueda ser leído por el navegador.


Insertar código y enviar datos

Con ajax también podemos enviar datos a la página. El método .load() permite también enviar datos a la página. Para que la página pueda recoger los datos, ésta debe estar en PHP o algún otro lenguaje que pueda recogerlos, ya que se envian por el método POST. (para más información consultar el manual de ajax).

La forma de enviarlos es mediante el segundo parámetro del metodo .load

$("#capa1").load("archivo.html", {"nombre1":"valor1","nombre2":"valor2"})

Aquí hemos mandado elementos literales, pero también podemos mandar variables (estas irán sin comillas). Observamos cómo utilizamos las llaves -{ }- para indicar cual es el argumento donde van los datos. Dentro de él cada dato consta de un par nombre-valor, que se separa por el signo de dos puntos. los datos se separan entre sí por comas.

Los datos son enviados por el método POST, por lo que para recogerlos en la página, utilizaremos los mecanismos para recoger con POST, en PHP será algo así:

$dato1=$_POST["nombre1"];

$dato2=$_POST["nombre2"];

Con esto en el archivo que recoge los datos, la variable $dato1 será igual al "valor1", y la variable $dato2 será igual al "valor2".


Función callback

Al método .load(), podemos añadirle un tercer argumento, que consiste en una función (ya sea anónima o no). Esta función se ejecutará siempre después de haberse cargado el archivo indicado en el primer argumento, lo que puede sernos útil en caso de que queramos trabajar con los nuevos elementos que hemos incorporado.

Las funciones de tipo callback (llamada tras cargarse), pueden usarse en la gran mayoría de métodos de jQuery. Estas consisten en poner una función como último argumento del método, la cual se ejecutará cuando el código de los demás argumentos se haya leído y se haya ejecutado.


Guardar el código

Hemos visto hasta ahora como el contenido del archivo al que llamamos, es volcado en pantalla al utilizar el método .load(). Sin embargo otras veces, al llamar a un archivo, no queremos que su contenido se vea directamente en la pantalla, sino que queremos guardarlo, para transformarlo posteriormente, o utilizarlo de otra manera (por ejemplo si el archivo es de código javascript). Para ello podemos usar los métodos "get" o "post", los cuales además nos permiten enviar datos al archivo al que llamamos.


el método get

El método "get" lo escribiremos de la siguiente manera:

$.get("archivo.html",function(respuesta){
//Código de la función
});

La forma de escribirlo es algo distinta ponemos primero $.get seguido del paréntesis, en el cual ponemos en primer lugar la ruta o url del archivo que queremos traer con ajax. El segundo argumento, es la funcion. Esta función lleva a su vez un argumento (respuesta). el contenido del archivo traido con ajax está en este argumento (en este caso, la variable respuesta).

Después en el código de la función escribiremos el código en el que manipulamos el contenido del archivo traído. De esta manera el archivo no lo volcamos directamente en pantalla, sino que podemos hacerle transformaciones, guardarlo, etc.

Veamos un pequeño ejemplo. El recuadro de la derecha tiene un id="capa2". En él escribiremos el texto del archivo visto antes en el primer ejemplo (ajax1.html), pero antes pasaremos el texto del archivo a mayúsculas. Para ello hemos utilizado el siguiente código:

$.get("ajax1.html",function(respuesta){
respuesta=respuesta.toUpperCase();
$("#capa2").html(respuesta);
});

También podemos insertar código javascript con el método "get". Creamos, por ejemplo, el archivo ajax2.js con el siguiente contenido:

alert("Hola mundo, desde ajax");

Y ahora queremos que se incorpore a la página al hecer click en un elemento con id="respuesta1".El código se simplifica bastante, ya que no necesitamos poner nada dentro de la función. El código quedará así :

$("#respuesta1").click(function(){
$.get("ajax2.js",function(){ });
});

Para incorporar un archivo javascript en la página mediante ajax no necesitamos poner nada dentro de la función anónima. Ni siquiera tenemos que poner argumentos, simplemente con indicar la función, el archivo javascript se ejecutara. El resultado puedes verlo pulsando en el siguiente recuadro.


Pulsa para ver ventana de alarma

Enviar datos:

Con el método "get" también podemos enviar datos a la página. Ésto se hace de la misma manera que con javascript, es decir, los datos deben mandarse en la ruta o url. Los datos son mandados por el método GET. En el Manual de ajax: 9. Enviar datos con GET, se explica la forma de insertar los datos en la url para enviarlos. Con jQuery sería de la siguiente manera:

$.get("archivo.html&valor1=dato1&valor2=dato2",function(respuesta){ ... });


El método "post"

El método post se utiliza de forma similar al método get. La única diferencia es que permite enviar datos por el método POST, veamos cual es su sintaxis:

$.post("archivo.php",datos,function(respuesta){... });

Hemos pasado aquí la variable datos. Veamos qué es lo que contiene:

datos={"nombre1":"valor1","nombre2":"valor2"}

Cada dato consta de un nombre y su valor. Estos van separados por el signo de dos puntos, a su vez los datos van separados unos de otros por comas. Todo el envio va incluido dentro de los signos de llaves ({ }).

Veamos un ejemplo:

$.post("envio.php",
{"nombre":"Francisco","apellido":"Gonzalez","edad":"37"},
function(respuesta){
$("#info").html(respuesta);
});

En la primera línea llamamos a la función y ponemos el primer argumento, que consiste en el archivo al que mandamos los datos, y del que obtendremos luego una respuesta.

En la segunda línea colocamos el segundo argumento, los datos, en el formato ya visto antes.

En la tercera línea abrimos la función que nos dará la respuesta en la página. Esta respuesta viene como el primer argumento de esta función.

En la cuarta línea, y dentro de la función abierta en la tercera, definimos lo que haremos con la respuesta obtenida. En este caso la sacamos en pantalla en un "div='info'". Por último cerramos las llaves y paréntesis que tenemos abiertos(quinta línea).

En la página a la que hemos lllamado (envio.php) recogeremos los datos por el método POST de igual manera que se hace con un formulario. En php esto será así:

$nombre=$_POST["nombre"];
$apellido=$_POST["apellido"];
$edad=$_POST["edad"];






En la siguiente página entramos en métodos específicos de jQuery para realizar ciertas acciones habituales, es decir realizar efectos especiales

Efectos especiales



Manual de jQuery

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com