AJAX con JQUERY

Escrito por smartadmin el noviembre 8, 2009. Posteado en General, Javascript

Cuando recien descubria el verdadero poder de AJAX (Asynchronous JavaScript And XML), me puse en la tarea de crear mi propia libreria de trabajo para facilitar el desarrollo de las aplicaciones que realizaba. Luego descubri los diferenes frameworks de javacript como jquery, mootools, dojo, YUI, entre otras (pueden ver mi post donde hablo sobre estos frameworks), los cuales integran el manejo de ajax de una forma muy poderosa por asi decirlo. logo_jquery_215x53

Dado la cantidad de frameworks, me ha gustado bastante trabajar con jQuery, que es sumamente sencillo de implementar y esta muy bien documentado. En este ejemplo pretendo mostrar como invocar una pagina asincronicamente utilizando las funciones que me provee jQuery. Antes que nada debemos descargar jQuery, lo podemos hacer desde ete link. una vez agregado el framework a nuestro proyecto vamos a crear un link o boton el cual al hacer click sobre este actuliza una zona de la pagina (div) con un contenido. Le asignamos posteriormente un evento, y dentro de este invocamos nuestra funcion de ajax de jQuery. Paralelamente utilizamos la funcion ajaxStart(), para poner un letrero que diga cargando mientras trae la información.

  &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;Prueba Ajax&lt;/title&gt;

&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot; &gt;

function obtenerDato(){
 $(&quot;#loading&quot;).ajaxStart(function(){
 $(this).show();

 });

 $.ajax({
 type: &quot;POST&quot;,
 url: &quot;obtenerDatos.php&quot;,
 data: &quot;nombre=Cesar&amp;apellido=Suarez&quot;,
 success: function(msg){
 $(&quot;#datos&quot;).append(msg);
 $(&quot;#loading&quot;).hide();
 }
 });

}
$(document).ready(function(){
 $(&quot;#loading&quot;).hide();
 });
&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;label&gt;
&lt;input type=&quot;button&quot; name=&quot;button&quot; id=&quot;button&quot; value=&quot;Enviar&quot; onclick=&quot;javascript: obtenerDato();&quot;/&gt;
&lt;/label&gt;
&lt;div id=&quot;loading&quot;&gt;Cargando&lt;/div&gt;
&lt;div id=&quot;datos&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<head>

<title>Prueba Ajax</title>

function obtenerDato(){

$("#loading").ajaxStart(function(){

$(this).show();

});

$.ajax({

type: "POST",

url: "obtenerDatos.php",

data: "nombre=Cesar&apellido=Suarez",

success: function(msg){

$("#datos").append(msg);

$("#loading").hide();

}

});

}

$(document).ready(function(){

$("#loading").hide();

});

</script>

</head>

<body>

<label>

</label>

<div id="loading">Cargando</div>

</body>

</html>

Dentro del framework de jQuery podemos encontrar varios eventos como el utilizado (ajaxStart). Estos son: ajaxError, ajaxSend, ajaxStop, ajaxSucces. Si miramos igual la documentacion se podra encontrar el envio de datos por GET (aqui se mostro con POST), entre otras muchsa opciones. Descargar archivos aqui.

Etiquetas:AJAX, framework, javascript, jquery, Programacion

"Trackback" Enlace desde tu web.

L	M	X	J	V	S	D
« oct				dic »
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Usuario
Contraseña

	Recuerdar mis datos ¿Olvidó la contraseña?