Hacer una peticion Ajax con Jquery

Una vez mas les traemos un post acerca de las bondades de AJAX el cual hemos hablado en posts anteriores...
Hemos hablado de como hacer peticiones AJAX con JQUERY que es algo que nos facilita mucho la vida al momento de actualizar solo una parte de la web, ya que esto lo podemos realizar Asyncronamente.
 jQuery, como framework de JavaScript nos permite realizar esta tarea de forma sencilla, evitando codificar directamente la petición AJAX en JavaScript.

Hoy vamos a realizar una petición a una página para devolver el contenido, que incluiremos en una capa de nuestra página.

Lo primero será montar nuestra página HTML. Con un button y un div.

  
    <div id="mensaje"></div>
     
    <button id="cargar">Cargar</button>

Lo siguiente será inicializar jQuery y empezar a generar el código.
Cargamos la librería jQuery mediante la etiqueta SCRIPT.

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

 O llamamos a un CDN que pueden encontrar mas información Aqui.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Una vez configurado todo...  Lo siguiente será capturar el evento click del botón con Jquery. Para ello, sobre el ID cargar llamamos el evento Click de ese objeto.

  

<script type="text/javascript">
    $(document).ready(function(){
           $("#cargar").click(function(){
               // Petición AJAX
            });     
    });
  </script>

Para hacer la petición AJAX nos apoyaremos en la función .get(url,[data],[callback],[type]). Esta función es muy sencilla y sus parámetros son:

• url, es la URL que contendrá el fichero que nos devuelva los datos.
• data, son los datos a enviar a la URl de petición
• callback, es el método que se ejecutará cuando se realice la petición
• type, tipo de datos que se devolverán desde el servidor: text, xml, html, json,...

 La peticion AJAX seria:

$.get("http://csharpalextremo.tk//ejemplos/datos.aspx", function(data){
          $("#mensaje").html(data); 
});

En el metodo se puede apreciar varias cosas. La primera que datos.aspx es el fichero que devuelve los datos (no entraremos en detalle de como se compone, pero básicamente devuelve código HTML). La segunda es que la función de callback recibe como parámetro los datos devueltos por el servidor... dentro de esta función lo que estamos haciendo es añadir estos datos a la capa mediante el método .html().

Ahora solo nos queda el explotar las posibilidades del método .get() para dar potencia a nuestra web mediante peticiones AJAX con jQuery.

Pueden DESCARGAR el código de ejemplo desde Aqui. 

Espero que lo disfruten, compartan y comenten. ;)

Visita: http://rubitcorp.co/

"Si se puede imaginar... se puede programar."