Snippets de jQuery y Ajax para usar todos los días

El término AJAX fue acuñado hace doce años para describir un método para recuperar datos del servidor sin necesidad de actualizar la página. Entre muchas otras características alucinantes, jQuery es conocida por hacer que el proceso de las llamadas AJAX sea mucho más simple. En este artículo, he compilado unos cuantos snippets para utilizar en nuestro día a día como programados: envío de datos con el método GET y POST, recuperación de texto o JSON desde páginas remotas y mucho más.

Nota: este artículo no utiliza el método abreviado $ para el objeto jQuery.

Enviar datos utilizando el método GET

jQuery.get() es una función abreviada de AJAX, que carga datos del servidor utilizando una petición HTTP GET. El siguiente código muestra cómo enviar dos valores a una página denominada mypage.php.

jQuery( document ).ready(function() {
	jQuery.get( "mypage.php", { name: "John", time: "2pm" } )
		.done(function( data ) {
		alert( "Data Loaded: " + data );
	});
});

Enviar datos utilizando el método POST

Similar a jQuery.get(), jQuery-post() carga información del servidor utilizando una petición HTTP POST. El siguiente código ejemplifica cómo enviar una petición POST a page.php cuando se pulsa el botón button.

jQuery("button").click(function(){
    jQuery.post("page.php", function(data, status){
        alert("Data: " + data + "nStatus: " + status);
    });
});

Obtener texto de un sitio web

El método jQuery.load() hace que sea extremadamente fácil recuperar texto de una página web concreta. El método nos permite extraer una parte específica del documento, por lo que no tendrás que recuperar toda la página, para parsearla posteriormente.

<ol id="new-projects"></ol>
 
<script>
jQuery( document ).ready(function() {
	jQuery( "#new-projects" ).load( "/resources/load.html #projects li" );
});
</script>

Obtener todos los valores de un formulario y enviarlos a una página

Este snippet es la mar de útil y lo suelo utilizar muy a menudo. Es muy simple: una vez que el usuario hace clic en #submit, se envían los datos de #form a una página remota utilizando el método POST.

jQuery( document ).ready(function() {
	jQuery( "#submit" ).click(function() {
		 jQuery.post( "https://yoursite.com/yourpage.php", jQuery('#form').serialize())
			.done(function( data ) {
			alert(data);
		}); 
		return false;
	});
});

Obtener datos JSON

En los albores de AJAX, los datos enviados por el servidor solían estar en formato XML. Hoy en día, la mayoría de las aplicaciones modernas utilizan JSON como formato principal para los datos enviados por el servidor.

El método getJSON() carga datos codificados en JSON desde el servidor utilizando una solicitud GET HTTP. El siguiente ejemplo muestra cómo usar jQuery para recuperar datos formateados en JSON.

jQuery.getJSON( "http://yoursite.com/test.json", function( data ) {
        alert(data);
});

Una vez que obtengas tu JSON del servidor, utiliza el método JSON.parse() para convertir los datos en un objeto JavaScript:

jQuery.getJSON( "http://yoursite.com/test.json", function( data ) {
        var obj = JSON.parse(data);
        jQuery( "#container" ).html(obj.name + ", " + obj.age);
});