Como hacer una llamada AJAX en jQuery

La librería jQuery dispone de varias funciones para hacer llamadas AJAX. Recordemos que AJAX (Asynchronous JavaScript And XML) es una técnica de desarrollo web basada en JavaScript que se usa para crear sitios web interactivos, permitiendo hacer llamadas al servidor en tiempo de ejecución y procesando la respuesta del servidor de forma asíncrona.

Algunas de las funciones de jQuery que facilitan el uso de tecnologías AJAX son:

• .load(): Recupera datos del servidor.
• jQuery.get(): Realiza una petición HTTP GET al servidor.
• jQuery.post(): Realiza una petición HTTP POST al servidor.
• jQuery.getJSON(): Recupera del servidor datos en formato JSON.
• jQuery.getScript(): Recupera del servidor un archivo JavaScript y lo ejecuta.
• jQuery.ajax(): Se utiliza para llamadas AJAX avanzadas.

Voy a poner un ejemplo de uso de la función jQuery.getJSON() para demostrar lo sencillo que es ejecutar una petición AJAX en jQuery:

Supongamos que tenemos un formulario con los campos "city" y "country". Queremos que se rellene una lista de sugerencias de ciudades y países según se va escribiendo en los campos. La lista se mostrará en un divisor llamado "suggested_cities".

Nuestro servidor es capaz de devolver una lista de ciudades mediante la URL "/getcities". Los parámetros que acepta son "city" y "country". El formato devuelto es JSON:

{
  [
    {
      'id' : int,
      'city' : 'string',
      'country' : 'string'
    }
  ]
}

El código jQuery que permite cargar la lista de ciudades sugeridas de forma asíncrona es el siguiente:

$(document).ready(function() {

    $("#city").keyup(loadSuggestedCities(event));
    $("#country").keyup(loadSuggestedCities(event));

    function loadSuggestedCities(event) {

        var city = $('#city').val();
        var country = $('#country').val();

        $.getJSON(
            '/getcities/',
            { 'city' : city, 'country' : country },
            function(json) {

                if(json == null)
                    return;

                var index, html = '<ul>';
                for (index = 0; index < json.length; index++) {
                    html += '<li>':
                    html += '<a href="javascript: ';
                    html += 'selectCity(\'';
                    html += json[index].city;
                    html += '\', \'';
                    html += json[index].country;
                    html += '\');">';
                    html += json[index].name;
                    if(json[index].country_name != null) {
                        html += ' (' + json[index].country_name + ')';
                    }
                    html += '</a>';
                    html += '</li>':
                }
                html += '</ul>';

                $('#suggested_cities').html(html);
        });
    }
});

function selectLocation(city, country) {
    $("#city").val(city);
    $("#country").val(country);
}

Como puede verse es muy sencillo. Primero capturamos el evento keyup de los controles city y country. En dicha función hacemos la llamada a $.getJSON (sinónimo de jQuery.getJSON), pasándole los parámetros adecuados y procesando la respuesta que estará en formato JSON.