5 formas de usar Ajax con jQuery

La gente de Nettuts publica un interesante artículo de como usar Ajax con jQuery. Concretamente las 5 formas con las que jQuery nos permite enviar peticiones asíncronas.

1. $.load()
2. $.get()
3. $.post()
4. $.getJSON()
5. $.getScript()

$.load()

Se trata de la función que más me gusta de jQuery ya que hace que una de las tareas más comunes de desarrollar con Ajax sea tan sencillo y claro como veremos en el ejemplo:

$("#links").load("/Main_Page #jq-p-Getting-Started li");

Este ejemplo, traído de la página de documentación de jQuery, se encarga de lanzar una petición a la URL /Main_Page (usa URL Rewrite) y del HTML de respuesta cogemos los elementos #jq-p-Getting-Started li y lo insertamos dentro de #links.

Simplemente genial, cómodo y rápido.

$.get()

Se trata del función sencilla con la que podemos lanzar peticiones GET al servidor mediante Ajax.

$.get("test.cgi", { name: "John", time: "2pm" },
 function(data){
   alert("Data Loaded: " + data);
 });

Mediante el paso de 3 opciones, de las cuales 2 son opciones ( condicionales mejor dicho) puedes lanzar la petición al fichero (1º) con los parámetros (2º) y tratar la respuesta mediante un callback (3º).

$.post()

Al igual que la anterior, esta función permite enviar peticiones POST mediante ajax.

$.post("test.php", { name: "John", time: "2pm" },
 function(data){
   alert("Data Loaded: " + data);
 });

Igual de fácil que en el caso anterior.

$.getJSON()

Aunque los anteriores tienen la posibilidad de especificar el tipo de retorno, la opción más cómoda es la de usar este método que permite obtener la respuesta JSON evaludada en la función callback.

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
 alert("JSON Data: " + json.users[3].name);
});

Teniendo en cuenta el navegador, se usará el objeto JSON nativo o se usará el sistema basado en eval().

$.getScript()

Aunque técnicamente no es una petición Ajax, se trata de una petición al servidor y por eso tiene cavida en el post.

$.getScript("test.js", function(){
 alert("Script loaded and executed.");
});

Con este método podemos cargar asíncronamente un fichero Javascript y mediante el parámetro (2) callback podemos ejecutar código Javascript usando el que está en el fichero js que queremos cargar (1).