Ajax con jquery

AJAX está pensado para poder pedir datos a un servidor web y poder modificar nuestro HTML sin necesidad de recargarlo. Vamos a ver las distintas posibilidades que nos ofrece jQuery para trabajar con AJAX, desde las funciones más sencillas e inmediatas, hasta algunas un poco más complejas.

load()

La función más sencilla es load(). La llamamos en algún elemento HTML y le pasamos una URL. Lo que contenga esa URL reemplazará al contenido del elemento HTML en el documento.

Por ejemplo, si nuestra URL es un fichero hola.html con el siguiente contenido

<p>hola</p>

y tenemos un documento html cargado en el navegador con esto

<div id="ajax"></div>

la llamada a load() meterá el párrafo con "hola" dentro del div, reemplazando cualquier cosa que este tenga dentro.

$('#ajax').load('hola.html');

/* Da como resultado
<div id=​"ajax">​
<p>​hola​</p>​
</div>​
*/

Si el fichero hola.html tuviera más contenido html y sólo nos interesara uno de los elementos que esté identificado con un id, por ejemplo, un hola.html como este

<p>hola</p>
<p id="este">otro hola</p>

podemos pasar como parámetro de load() una cadena que contenga la URL, un espacio en blanco y el id en cuestión precedido por #. Es decir, la llamada sería

$('#ajax').load('hola.html #este')

/* Da como resultado 
<div id=​"ajax">​
<p id=​"este">​otro hola​</p>​
</div>​
*/

Podemos pasar como segundo parámetro a load() una serie de datos que queramos enviar con la URL. Este parámetro puede ser un String o bien un objeto javascript con propiedades. Si pasamos el String, tiene que tener la forma "clave1=valor1&clave2=valor2&..." y se usará el método GET del protocolo http para cargar la URL. Si pasamos un objeto javascript con claves y valores, se usará POST.

Por ejemplo, si en vez de hola.html usamos un hola.php con esto

<?php 
if (isset($_GET['clave'])){
        /* Si hay parametro clave en GET, devolvemos clave get=valor */
	echo '<p>clave get = '.$_GET['clave'].'</p>';
} else 
if (isset($_POST['clave'])) {
        /* si hay parametro clave en POST, devolvemos clave post=valor */
	echo '<p>clave post = '.$_POST['clave'].'</p>';
} else {
        /* si no hay ninguna, decimos que no hay */
	echo '<p>No ha clave</p>';
}
?>

Las llamadas a load() con los datos en formato string o en formato objeto javascript darían los siguientes resultados

$('#ajax').load('hola.php','clave=hola')

/* Da como resultado
<div id=​"ajax">​
<p>​clave get = hola​</p>​
</div>​
*/

$('#ajax').load('hola.php',{clave:'hola clave'})

/* Da como resultado
<div id=​"ajax">​
<p>​clave post = hola clave​</p>​
</div>​
*

Finalmente, podemos añadir un tercer parámetro (o el segundo si omitimos la parte de datos) que es una función de callback a la que nos llamarán cuando la llamada AJAX se complete. A esta función le pasarán tres parámetros:

• El texto que nos ha devuelto el servidor al completo. Si hemos usado un "url #id", el texto vendrá también completo, no solo la parte del id coincidente
• El resultado de la petición que es un string que, entre otros, puede valer "success" o "error"
• Un Objeto XMLHttpRequest al que podremos interrogar sobre detalles de la petición si nos interesa.

La siguiente llamada sacará un par de alert cuando la petición AJAX termine, uno con el texto recibido y otro con el string 'success' si ha habido éxito en la llamada

$('#ajax').load(
   'hola.html #este',
   function(texto,error){
      alert(texto);
      alert(error)
   }
)

getJSON()

Esta llamada es muy similar a load(), admite los mismos parámetros, pero hay un par de diferencias:

• Espera que el servidor nos devuelva un texto en formato JSON. jQuery parsea el resultado para convertirlo en un objeto javascript y es lo que nos pasará al tercer parámetro callback que pasemos a la función. Es decir, entregará los datos recibidos y parseados a la función.
• No se invoca sobre un elemento HTML ni se reemplazará automáticamente el contenido de ningún HTML con el resultado.

Por ejemplo, si el fichero hola.html que estamos usando de ejemplo contuviera

{
    "hola": "tu",
    "adios": "ta luego"
}

entonces la llamada siguiente sacaría un alert con ambos valores "tu" y "ta luego" separados por un guión.

$.getJSON(
   'hola.html',
   function(objeto){
      alert(objeto.hola + " - " + objeto.adios)
   }
)

get() y post()

Estos son similares a getJSON(). Como su propio nombre indica, hacen peticiones AJAX con GET o con POST. Los parámetros son iguales a los getJSON(), más un cuarto parámetro que podemos añadir. La diferencia es que mientras getJSON() espera que se devuelva un texto JSON y lo parsea a un objeto javascript para pasárnoslo a nuestra función, las llamadas get() y post() se fijan en el Content-Type que devuelve el servidor. Si es alguno de los tipos que entiende ('xml', 'json', 'script', o 'html'), construirá el objeto adecuado parseando el texto y nos lo pasará a nuestra función. Si no es ninguno de estos tipos, nos pasará el texto enviado por el servidor tal cual. El cuarto parámetro que podemos pasar sirve para indicar qué tipo de dato esperamos del servidor, de forma que jQuery usará este tipo indicado y no el que devuelva el servidor en el Content-Type. Veamos algunos ejemplos

Si tenemos un hola.xml así

<uno>
<dos></dos>
</uno>

esta llamada nos pasará en objeto el documento xml parseado

$.get('hola.xml',
   function(objeto){
      a = objeto
   }
)

Si el tipo devuelto por el servidor es script, se espera código javascript que se ejecutará antes de que nos lo pasen. Por ejemplo, si nuestro fichero es un hola.js con este código

alert('soy el servidor');

Esta llamada mostrará el alert enviado desde el servidor y nos pasarán en objeto el texto con el código javascript

$.get('hola.js',function(objeto){a = objeto})

ajax()

Esta es la llamada más general, la que permite o se debe configurar completamente. Las funciones anteriores son versiones "prefabricadas" de esta llamada para ahorrarnos toda la configuración.

A esta función se le pasa un string con la URL y un objeto javascript con todas los valores necesarios que en las funciones anteriores habíamos pasado como parámetros, y muchas más opciones. por ejemplo, si hola.html contiene código json, la siguiente llamada

$.ajax({
   dataType: "json",
   url: "hola.html",
   data: "clave=valor",
   success: function (datos) {alert(datos)};
});

sería equivalente a una llamada a getJSON(). Estamos indicando que el tipo de texto que esperamos del servidor es "json", la url es "hola.html", hemos puesto unos datos para pasar como GET, y pasamos la función a la que nos deben llamar cuando los datos estén disponibles. En datos recibiremos el objeto JSON ya parseado.

Por defecto la llamada será GET, independientemente de si data es un string como el del ejemplo o un objeto javascript. Podemos cambiar el tipo esperado poniendo type

$.ajax({
   type:'POST',
   dataType: "json",
   url: "hola.html",
   data: "clave=valor",
   success: function (datos) {alert(datos)};
});

En la API de ajax() de jQuery tienes una lista de todos los valores que se pueden poner en este objeto que pasamos como parámetro.