Alex Medina » llamadas http://alexmedina.net/blog Mi blog, mis cosas... Tue, 22 Jun 2010 08:23:03 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Llamadas sencillas AJAX con JQUERY http://alexmedina.net/blog/2009/06/17/llamadas-sencillas-ajax-con-jquery/ http://alexmedina.net/blog/2009/06/17/llamadas-sencillas-ajax-con-jquery/#comments Wed, 17 Jun 2009 07:09:45 +0000 admin http://alexmedina.net/blog/2009/06/17/llamadas-sencillas-ajax-con-jquery/ Antes de todo y si se quiere emepzar bien, no será de más echarle una ojeada a la documentacion de JQuery, que relativamente no es mucha: http://docs.jquery.com/Main_Page

1- ponemos un identificador (atributo id) para seleccionarlo desde jQuery.

 <a href="#" id="enlaceajax">Haz clic!</a>

2- recordemos cómo asignar una función para cuando se haga clic en el enlace:

$(document).ready(function(){

$("#enlaceajax").click(function(evento){

//elimino el comportamiento por defecto del enlace

evento.preventDefault();

//Aquí pondría el código de la llamada a Ajax

});

})

3- Y ahora la parte más interesante, donde podemos ver qué tan fáciles son las cosas con este framework Javascript. Una única línea de código será suficiente:

 $("#destino").load("contenido-ajax.html");

Ejemplo completo:

<html>

<head>

<title>Ajax Simple</title>

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script>

$(document).ready(function(){

$("#enlaceajax").click(function(evento){

evento.preventDefault();

$("#destino").load("contenido-ajax.html");

});

})

</script>

</head>

<body><a href="#" id="enlaceajax">Haz clic!</a>

<br>

<div id="destino"></div>

</body>

</html>

Tambien es muy interesante, aparte de ver la callback de load en el ejemplo anterior, ver la $.ajax(options)

De tal forma de hacer llamadas así de facil:

 $.ajax({   type: "POST",

url: "some.php",

data: "name=John&location=Boston",

success: function(msg){

alert( "Data Saved: " + msg );

}});

Más documentación en la API de AJAX de JQuey :  http://docs.jquery.com/Ajax

]]> http://alexmedina.net/blog/2009/06/17/llamadas-sencillas-ajax-con-jquery/feed/ 0