AJAX JQUERY

La librera jQuery
jQuery es la librera JavaScript que ha irrumpido con ms fuerza como alternativa a Prototype.
Su autor original es John Resig, aunque como sucede con todas las libreras exitosas,
actualmente recibe contribuciones de decenas de programadores. jQuery tambin ha sido
programada de forma muy eficiente y su versin comprimida apenas ocupa 20 KB.
jQuery comparte con Prototype muchas ideas e incluso dispone de funciones con el mismo
nombre. Sin embargo, su diseo interno tiene algunas diferencias drsticas respecto a
Prototype, sobre todo el"encadenamiento" de llamadas a mtodos.
La documentacin de jQuery es muy completa en ingls e incluye muchos ejemplos. Adems,
tambin existen algunos recursos tiles en espaol para aprender su funcionamiento bsico:
http://docs.jquery.com/
FUNCIONES Y MTODOS BSICOS
La funcin bsica de jQuery y una de las ms tiles tiene el mismo nombre que en Prototype,
ya que se trata de la "funcin dolar": $(). A diferencia de la funcin de Prototype, la de jQuery es
mucho ms que un simple atajo mejorado de la funcin document.getElementById().
La cadena de texto que se pasa como parmetro puede hacer uso de Xpath o de CSS para
seleccionar los elementos. Adems, separando expresiones con un carcter "," se puede
seleccionar un nmero ilimitado de elementos.
// Selecciona todos los enlaces de la pgina
$('a')

// Selecciona el elemento cuyo id sea "primero"

$('#primero')

// Selecciona todos los h1 con class "titular"

$('h1.titular')

// Selecciona todo lo anterior

$('a, #primero, h1.titular')
Las posibilidades de la funcin $() van mucho ms all de estos ejemplos sencillos, ya que
soporta casi todos los selectores definidos por CSS 3 (algo que dispondrn los navegadores
dentro de varios aos) y tambin permite utilizar XPath:
// Selecciona todos los prrafos de la pgina que tengan al menos un enlace

$('p[a]')

// Selecciona todos los radiobutton de los formularios de la pgina

$('input:radio')

// Selecciona todos los enlaces que contengan la palabra "Imprimir"

$('a:contains("Imprimir")');

// Selecciona los div que no estn ocultos

$('div:visible')

// Selecciona todos los elementos pares de una lista

$("ul#menuPrincipal li:even")

// Selecciona todos los elementos impares de una lista

$("ul#menuPrincipal li:odd")

// Selecciona los 5 primeros prrafos de la pgina

$("p:lt(5)")
Como se puede comprobar, las posibilidades de la funcin $() son prcticamente ilimitadas, por
lo quela documentacin de jQuery sobre los selectores disponibles es la mejor forma de
descubrir todas sus posibilidades.
FUNCIONES PARA EVENTOS
Una de las utilidades ms interesantes de jQuery est relacionada con el evento onload de la
pgina. Las aplicaciones web ms complejas suelen utilizar un cdigo similar al siguiente para
iniciar la aplicacin:
window.onload = function() {
...
};
Hasta que no se carga la pgina, el navegador no construye el rbol DOM, lo que significa que
no se pueden utilizar funciones que seleccionen elementos de la pgina, ni se pueden aadir o

eliminar elementos. El problema de window.onload es que el navegador espera a que la pgina

se cargue completamente, incluyendo todas las imgenes y archivos externos que se hayan
enlazado.
jQuery propone el siguiente cdigo para ejecutar las instrucciones una vez que se ha cargado
la pgina:
$(document).ready(function() {
...
});
La gran ventaja del mtodo propuesto por jQuery es que la aplicacin no espera a que se
carguen todos los elementos de la pgina, sino que slo espera a que se haya descargado el
contenido HTML de la pgina, con lo que el rbol DOM ya est disponible para ser manipulado.
De esta forma, las aplicaciones JavaScript desarrolladas con jQuery pueden iniciarse ms
rpidamente que las aplicaciones JavaScript tradicionales.
En realidad, ready() no es ms que una de las muchas funciones que componen el mdulo de
los eventos. Todos los eventos comunes de JavaScript (click, mousemove, keypress, etc.)
disponen de una funcin con el mismo nombre que el evento. Si se utiliza la funcin sin
argumentos, se ejecuta el evento:
// Ejecuta el evento 'onclick' en todos los prrafos de la pgina
$('p').click();

// Ejecuta el evento 'mouseover' sobre un 'div' con id 'menu'

$('div#menu').mouseover();
No obstante, el uso ms habitual de las funciones de cada evento es el de establecer la funcin
manejadora que se va a ejecutar cuando se produzca el evento:
// Establece la funcin manejadora del evento 'onclick'
// a todos los prrafos de la pgina
$('p').click(function() {
alert($(this).text());
});

// Establece la funcin manejadora del evento 'onblur'

// a los elementos de un formulario
$('#elFormulario :input').blur(function() {

valida($(this));
});
Entre las utilidades definidas por jQuery para los eventos se encuentra la funcin toggle(), que
permite ejecutar dos funciones de forma alterna cada vez que se pincha sobre un elemento:
$("p").toggle(function(){
alert("Me acabas de activar");
},function(){
alert("Me acabas de desactivar");
});
En el ejemplo anterior, la primera vez que se pincha sobre el elemento (y todas las veces
impares), se ejecuta la primera funcin y la segunda vez que se pincha el elemento (y todas las
veces pares) se ejecuta la segunda funcin.
FUNCIONES PARA EFECTOS VISUALES
Las aplicaciones web ms avanzadas incluyen efectos visuales complejos para construir
interacciones similares a las de las aplicaciones de escritorio. jQuery incluye en la propia
librera varios de los efectos ms comunes:
// Oculta todos los enlaces de la pgina
$('a').hide();

// Muestra todos los 'div' que estaban ocultos

$('div:hidden').show();
// Muestra los 'div' que estaba ocultos y oculta
// los 'div' que eran visibles
$('div').toggle();
Todas las funciones relacionadas con los efectos visuales permiten indicar dos parmetros
opcionales: el primero es la duracin del efecto y el segundo parmetro es la funcin que se
ejecuta al finalizar el efecto visual.
Otros efectos visuales incluidos son los relacionados con el fundido o "fading" (fadeIn() muestra
los elementos con un fundido suave, fadeOut() oculta los elementos con un fundido suave
y fadeTo()establece la opacidad del elemento en el nivel indicado) y el despliegue de elementos
(slideDown()hace aparecer un elemento desplegndolo en sentido descendente, slideUp() hace
desaparecer un elemento desplegndolo en sentido ascendente, slideToggle() hace
desaparecer el elemento si era visible y lo hace aparecer si no era visible).

FUNCIONES PARA AJAX

Como sucede con Prototype, las funciones y utilidades relacionadas con AJAX son parte
fundamental de jQuery. El mtodo principal para realizar peticiones AJAX
es $.ajax() (importante no olvidar el punto entre $ y ajax). A partir de esta funcin bsica, se
han definido otras funciones relacionadas, de ms alto nivel y especializadas en tareas
concretas: $.get(), $.post(), $.load(), etc.
La sintaxis de $.ajax() es muy sencilla:
$.ajax(opciones);
Al contrario de lo que sucede con Prototype, la URL que se solicita tambin se incluye dentro
del array asociativo de opciones. A continuacin se muestra el mismo ejemplo bsico que se
utiliz en Prototype realizado con $.ajax():
$.ajax({
url: '/ruta/hasta/pagina.php',
type: 'POST',
async: true,
data: 'parametro1=valor1&parametro2=valor2',
success: procesaRespuesta,
error: muestraError
});
La siguiente tabla muestra todas las opciones que se pueden definir para el mtodo $.ajax():

Opcin

Descripcin

async

Indica si la peticin es asncrona. Su valor por defecto es true, el habitual para

las peticiones AJAX

beforeSend

Permite indicar una funcin que modifique el objeto XMLHttpRequest antes de

realizar la peticin. El propio objeto XMLHttpRequest se pasa como nico
argumento de la funcin

complete

Permite establecer la funcin que se ejecuta cuando una peticin se ha

completado (y despus de ejecutar, si se han establecido, las funciones
de success o error). La funcin recibe el objeto XMLHttpRequest como primer

Opcin

Descripcin

parmetro y el resultado de la peticin como segundo argumento

contentType

Indica el valor de la cabecera Content-Type utilizada para realizar la peticin.

Su valor por defecto es application/x-www-form-urlencoded

data

Informacin que se incluye en la peticin. Se utiliza para enviar parmetros al

servidor. Si es una cadena de texto, se enva tal cual, por lo que su formato
debera serparametro1=valor1&parametro2=valor2. Tambin se puede indicar
un array asociativo de pares clave/valor que se convierten automticamente
en una cadena tipo query string

dataType

El tipo de dato que se espera como respuesta. Si no se indica ningn valor,

jQuery lo deduce a partir de las cabeceras de la respuesta. Los posibles
valores son: xml (se devuelve un documento XML correspondiente al
valor responseXML), html (devuelve directamente la respuesta del servidor
mediante el valor responseText), script (se evala la respuesta como si fuera
JavaScript y se devuelve el resultado) y json (se evala la respuesta como si
fuera JSON y se devuelve el objeto JavaScript generado)

error

Indica la funcin que se ejecuta cuando se produce un error durante la

peticin. Esta funcin recibe el objeto XMLHttpRequest como primer
parmetro, una cadena de texto indicando el error como segundo parmetro y
un objeto con la excepcin producida como tercer parmetro

ifModified

Permite considerar como correcta la peticin solamente si la respuesta

recibida es diferente de la anterior respuesta. Por defecto su valor es false

processData

Indica si se transforman los datos de la opcin data para convertirlos en una

cadena de texto. Si se indica un valor de false, no se realiza esta
transformacin automtica

success

Permite establecer la funcin que se ejecuta cuando una peticin se ha

completado de forma correcta. La funcin recibe como primer parmetro los
datos recibidos del servidor, previamente formateados segn se especifique
en la opcin dataType

Opcin

Descripcin

timeout

Indica el tiempo mximo, en milisegundos, que la peticin espera la respuesta

del servidor antes de anular la peticin

type

El tipo de peticin que se realiza. Su valor por defecto es GET, aunque

tambin se puede utilizar el mtodo POST

url

La URL del servidor a la que se realiza la peticin

Adems de la funcin $.ajax() genrica, existen varias funciones relacionadas que son
versiones simplificadas y especializadas de esa funcin. As, las funciones $.get() y $.post() se
utilizan para realizar de forma sencilla peticiones GET y POST:
// Peticin GET simple
$.get('/ruta/hasta/pagina.php');

// Peticin GET con envo de parmetros y funcin que

// procesa la respuesta
$.get('/ruta/hasta/pagina.php',
{ articulo: '34' },
function(datos) {
alert('Respuesta = '+datos);
});
Las peticiones POST se realizan exactamente de la misma forma, por lo que slo hay que
cambiar$.get() por $.post(). La sintaxis de estas funciones son:
$.get(url, datos, funcionManejadora);
El primer parmerto (url) es el nico obligatorio e indica la URL solicitada por la peticin. Los
otros dos parmetros son opcionales, siendo el segundo (datos) los parmetros que se envan
junto con la peticin y el tercero (funcionManejadora) el nombre o el cdigo JavaScript de la
funcin que se encarga de procesar la respuesta del servidor.
La funcin $.get() dispone a su vez de una versin especializada denominada $.getIfModified(),
que tambin obtiene una respuesta del servidor mediante una peticin GET, pero la respuesta
slo est disponible si es diferente de la ltima respuesta recibida.

jQuery tambin dispone de la funcin $.load(), que es idntica a la funcin Ajax.Updater() de

Prototype. La funcin $.load() inserta el contenido de la respuesta del servidor en el elemento
de la pgina que se indica. La forma de indicar ese elemento es lo que diferencia a jQuery de
Prototype:
<div id="info"></div>

// Con Prototype
new Ajax.Updater('info', '/ruta/hasta/pagina.php');

// Con jQuery
$('#info').load('/ruta/hasta/pagina.php');
Al igual que suceda con la funcin $.get(), la funcin $.load() tambin dispone de una versin
especfica denominada $.loadIfModified() que carga la respuesta del servidor en el elemento
slo si esa respuesta es diferente a la ltima recibida.
Por ltimo, jQuery tambin dispone de las funciones $.getJSON() y $.getScript() que cargan y
evalan/ejecutan respectivamente una respuesta de tipo JSON y una respuesta con cdigo
JavaScript.

FUNCIONES PARA CSS

jQuery dispone de varias funciones para la manipulacin de las propiedades CSS de los
elementos. Todas las funciones se emplean junto con una seleccin de elementos realizada
con la funcin $().
Si la funcin obtiene el valor de las propiedades CSS, slo se obtiene el valor de la propiedad
CSS del primer elemento de la seleccin realizada. Sin embargo, si la funcin establece el
valor de las propiedades CSS, se establecen para todos los elementos seleccionados.
// Obtiene el valor de una propiedad CSS
// En este caso, solo para el primer 'div' de la pgina
$('div').css('background');

// Establece el valor de una propiedad CSS

// En este caso, para todos los 'div' de la pgina
$('div').css('color', '#000000');

// Establece varias propiedades CSS

// En este caso, para todos los 'div' de la pgina
$('div').css({ padding: '3px', color: '#CC0000' });
Adems de las funciones anteriores, CSS dispone de funciones especficas para
obtener/establecer la altura y anchura de los elementos de la pgina:
// Obtiene la altura en pxel del primer 'div' de la pgina
$('div').height();

// Establece la altura en pxel de todos los 'div' de la pgina

$('div').height('150px');

// Obtiene la anchura en pxel del primer 'div' de la pgina

$('div').width();

// Establece la anchura en pxel de todos los 'div' de la pgina

$('div').width('300px');

FUNCIONES PARA NODOS DOM

La funcin $() permite seleccionar elementos (nodos DOM) de la pgina de forma muy sencilla.
jQuery permite, adems, seleccionar nodos relacionados con la seleccin realizada. Para
seleccionar nodos relacionados, se utilizan funciones de filtrado y funciones de bsqueda.
Los filtros son funciones que modifican una seleccin realizada con la funcin $() y permiten
limitar el nmero de nodos devueltos.
La funcin contains() limita los elementos seleccionados a aquellos que contengan en su
interior el texto indicado como parmetro:
// Slo obtiene los prrafos que contengan la palabra 'importante'
$('p').contains('importante');
La funcin not() elimina de la seleccin de elementos aquellos que cumplan con el selector
indicado:
// Selecciona todos los enlaces de la pgina, salvo el que

// tiene una 'class' igual a 'especial'

$('a').not('.especial');
// La siguiente instruccin es equivalente a la anterior
$('a').not($('.especial'));
La funcin filter() es la inversa de not(), ya que elimina de la seleccin de elementos aquellos
que no cumplan con la expresin indicada. Adems de una expresin, tambin se puede
indicar una funcin para filtrar la seleccin:
// Selecciona todas las listas de elementos de la pgina y quedate
// slo con las que tengan una 'class' igual a 'menu'
$('ul').filter('.menu');
Una funcin especial relacionada con los filtros y buscadores es end(), que permite volver a la
seleccin original de elementos despus de realizar un filtrado de elementos. La
documentacin de jQuery incluye el siguiente ejemplo:
$('a')
.filter('.pinchame')
.click(function(){
alert('Ests abandonando este sitio web');
})
.end()
.filter('ocultame')
.click(function(){
$(this).hide();
return false;
})
.end();
El cdigo anterior obtiene todos los enlaces de la pgina $('a') y aplica diferentes funciones
manejadoras del evento click en funcin del tipo de enlace. Aunque se podran incluir dos
instrucciones diferentes para realizar cada filtrado, la funcin end() permite encadenar varias
selecciones.
El primer filtrado ($('a').filter('.pinchame'))) selecciona todos los elementos de la pgina cuyo
atributo class sea igual a pinchame. Despus, se asigna la funcin manejadora para el evento
de pinchar con el ratn mediante la funcin click().

A continuacin, el cdigo anterior realiza otro filtrado a partir de la seleccin original de enlaces.
Para volver a la seleccin original, se utiliza la funcin end() antes de realizar un nuevo filtrado.
De esta forma, la instruccin .end().filter('ocultame') es equivalente a realizar el filtrado
directamente sobre la seleccin original $('a').filter('.ocultame')).
El segundo grupo de funciones para la manipulacin de nodos DOM est formado por los
buscadores, funciones que buscan/seleccionan nodos relacionados con la seleccin realizada.
De esta forma, jQuery define la funcin children() para obtener todos los nodos hijo o
descendientes del nodo actual,parent() para obtener el nodo padre o nodo ascendente del
nodo actual (parents() obtiene todos los ascendentes del nodo hasta la raz del rbol)
y siblings() que obtiene todos los nodos hermano del nodo actual, es decir, todos los nodos que
tienen el mismo nodo padre que el nodo actual.
La navegacin entre nodos hermano se puede realizar con las funciones next() y pev() que
avanzan o retroceden a travs de la lista de nodos hermano del nodo actual.
Por ltimo, jQuery tambin dispone de funciones para manipular fcilmente el contenido de los
nodos DOM. Las funciones append() y prepend() aaden el contenido indicado como
parmetro al principio o al final respectivamente del contenido original del nodo.
Las funciones after() y before() aaden el contenido indicado como parmetro antes de cada
uno de los elementos seleccionados. La funcin wrap() permite "envolver" un elemento con el
contenido indicado (se aade parte del contenido por delante y el resto por detrs).
La funcin empty() vaca de contenido a un elemento, remove() elimina los elementos
seleccionados del rbol DOM y clone() copia de forma exacta los nodos seleccionados.

OTRAS FUNCIONES TILES

jQuery detecta automticamente el tipo de navegador en el que se est ejecutando y permite
acceder a esta informacin a travs del objeto $.browser:
$.browser.msie;

// 'true' para navegadores de la familia Internet Explorer

$.browser.mozilla; // 'true' para navegadores de la familia Firefox

$.browser.opera; // 'true' para navegadores de la familia Opera
$.browser.safari; // 'true' para navegadores de la familia Safari
Recorrer arrays y objetos tambin es muy sencillo con jQuery, gracias a la funcin $.each(). El
primer parmetro de la funcin es el objeto que se quiere recorrer y el segundo parmetro es el
cdigo de la funcin que lo recorre (a su vez, a esta funcin se le pasa como primer parmetro
el ndice del elemento y como segundo parmetro el valor del elemento):
// Recorrer arrays
var vocales = ['a', 'e', 'i', 'o', 'u'];

$.each( vocales, function(i, n){

alert('Vocal nmero ' + i + " = " + n);

});

// Recorrer objetos
var producto = { id: '12DW2', precio: 12.34, cantidad: 5 };

$.each( producto, function(i, n){

alert(i + ' : ' + n);
});

REHACIENDO EJEMPLOS CON JQUERY

Como suceda con Prototype, cuando se rehace una aplicacin JavaScript con jQuery, el
resultado es un cdigo muy conciso pero que mantiene su facilidad de lectura y comprensin.
Por ejemplo, el ejercicio que mostraba y ocultaba diferentes secciones de contenidos se realiz
con JavaScript de la siguiente manera:
function muestraOculta() {
// Obtener el ID del elemento
var id = this.id;
id = id.split('_');
id = id[1];

var elemento = document.getElementById('contenidos_'+id);

var enlace = document.getElementById('enlace_'+id);

if(elemento.style.display == "" || elemento.style.display == "block") {

elemento.style.display = "none";
enlace.innerHTML = 'Mostrar contenidos';
}
else {
elemento.style.display = "block";

enlace.innerHTML = 'Ocultar contenidos';

}
}

window.onload = function() {
document.getElementById('enlace_1').onclick = muestraOculta;
document.getElementById('enlace_2').onclick = muestraOculta;
document.getElementById('enlace_3').onclick = muestraOculta;
}
Con Prototype, su cdigo se redujo a las siguientes instrucciones:
function muestraOculta() {
var id = (this.id).split('_')[1];

$('contenidos_'+id).toggle();
$('enlace_'+id).innerHTML = (!$('contenidos_'+id).visible()) ? 'Ocultar contenidos' : 'Mostrar
contenidos';
}

window.onload = function() {
$R(1, 3).each(function(n) {
Event.observe('enlace_'+n, 'click', muestraOculta);
});
}
Con jQuery, el mismo cdigo se puede escribir de la siguiente forma:
$(document).ready(function(){
$.each([1, 2, 3], function(i, n){
$('#enlace_'+n).toggle(
function() { $('#contenidos_'+n).toggle(); $(this).html('Mostrar contenidos'); },
function() { $('#contenidos_'+n).toggle(); $(this).html('Ocultar contenidos'); }

);
})
});
El cdigo anterior utiliza la funcin toggle() como evento que permite alternar la ejecucin de
dos funciones y como funcin que oculta un elemento visible y muestra un elemento oculto.
Otro de los ejercicios anteriores realizaba peticiones AJAX al servidor para comprobar si un
determinado nombre de usuario estaba libre. El cdigo original de JavaScript era:
var READY_STATE_COMPLETE=4;
var peticion_http = null;

function inicializa_xhr() {
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}

function comprobar() {
var login = document.getElementById("login").value;
peticion_http = inicializa_xhr();
if(peticion_http) {
peticion_http.onreadystatechange = procesaRespuesta;
peticion_http.open("POST", "http://localhost/compruebaDisponibilidad.php", true);

peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
peticion_http.send("login="+login+"&nocache="+Math.random());
}
}

function procesaRespuesta() {
if(peticion_http.readyState == READY_STATE_COMPLETE) {
if(peticion_http.status == 200) {
var login = document.getElementById("login").value;
if(peticion_http.responseText == "si") {
document.getElementById("disponibilidad").innerHTML = "El nombre elegido ["+login+"]
est disponible";
}
else {
document.getElementById("disponibilidad").innerHTML = "NO est disponible el nombre
elegido ["+login+"]";
}
}
}
}

window.onload = function() {
document.getElementById("comprobar").onclick = comprobar;
}
Con Prototype se puede conseguir el mismo comportamiento con tres veces menos de lneas
de cdigo:
function comprobar() {
var login = $F('login');
var url = 'http://localhost/compruebaDisponibilidad.php?nocache=' + Math.random();
var peticion = new Ajax.Request(url, {
method:'post',
postBody:'login='+login,
onSuccess: function(respuesta) {
$('disponibilidad').innerHTML = (respuesta.responseText == 'si') ?

'El nombre elegido ['+login+'] est disponible' : 'NO est disponible el nombre elegido
['+login+']';
},
onFailure: function() { alert('Se ha producido un error'); }
});
}

window.onload = function() {
Event.observe('comprobar', 'click', comprobar);
}
jQuery tambin permite simplificar notablemente el cdigo de la aplicacin original:
function comprobar() {
var login = $('#login').value;
var peticion = $.ajax({
url: 'http://localhost/compruebaDisponibilidad.php?nocache=' + Math.random(),
type: 'POST',
data: { login: login },
success: function(respuesta) {
$('#disponibilidad').html((respuesta.responseText == 'si') ?
'El nombre elegido ['+login+'] est disponible' :
'NO est disponible el nombre elegido ['+login+']');
},
error: function() { alert('Se ha producido un error'); }
});
}

$(document).ready(function(){
$('#comprobar').click(comprobar);
});

AJAX
INTRODUCCIN
El mtodo XMLHttpRequest (XHR) permite a los navegadores comunicarse con el servidor sin
la necesidad de recargar la pgina. Este mtodo, tambin conocido como Ajax (Asynchronous
JavaScript and XML), permite la creacin de aplicaciones ricas en interactividad.
Las peticiones Ajax son ejecutadas por el cdigo JavaScript, el cual enva una peticin a una
URL y cuando recibe una respuesta, una funcin de devolucin puede ser ejecutada la cual
recibe como argumento la respuesta del servidor y realiza algo con ella. Debido a que la
respuesta es asncrona, el resto del cdigo de la aplicacin continua ejecutndose, por lo cual,
es imperativo que una funcin de devolucin sea ejecutada para manejar la respuesta.
A travs de varios mtodos, jQuery provee soporte para Ajax, permitiendo abstraer las
diferencias que pueden existir entre navegadores. Los mtodos en cuestin
son $.get(), $.getScript(), $.getJSON(),$.post() y $().load().
A pesar que la definicin de Ajax posee la palabra XML, la mayora de las aplicaciones no
utilizan dicho formato para el transporte de datos, sino que en su lugar se utiliza HTML plano o
informacin en formato JSON (JavaScript Object Notation).
En general, Ajax no trabaja a travs de dominios diferentes. Sin embargo, existen excepciones,
como los servicios que proveen informacin en formato JSONP (JSON with Padding), los
cuales permiten una funcionalidad limitada a travs de diferentes dominios.

CONCEPTOS CLAVE
La utilizacin correcta de los mtodos Ajax requiere primero la comprensin de algunos
conceptos clave.

GET vs. POST

Los dos mtodos HTTP ms comunes para enviar una peticin a un servidor son GET y POST.
Es importante entender la utilizacin de cada uno.
El mtodo GET debe ser utilizado para operaciones no-destructivas es decir, operaciones en
donde se esta obteniendo datos del servidor, pero no modificando. Por ejemplo, una consulta a
un servicio de bsqueda podra ser una peticin GET. Por otro lado, las solicitudes GET pueden
ser almacenadas en la cache del navegador, pudiendo conducir a un comportamiento
impredecible si no se lo espera. Generalmente, la informacin enviada al servidor, es enviada
en una cadena de datos (en ingls query string).
El mtodo POST debe ser utilizado para operaciones destructivas es decir, operaciones en
donde se est incorporando informacin al servidor. Por ejemplo, cuando un usuario guarda un
artculo en un blog, esta accin debera utilizar POST. Por otro lado, este tipo de mtodo no se
guarda en la cache del navegador. Adems, una cadena de consulta puede ser parte de la
URL, pero la informacin tiende a ser enviada de forma separada.

Tipos de datos
Generalmente, jQuery necesita algunas instrucciones sobre el tipo de informacin que se
espera recibir cuando se realiza una peticin Ajax. En algunos casos, el tipo de dato es
especificado por el nombre del mtodo, pero en otros casos se lo debe detallar como parte de
la configuracin del mtodo:

text Para el transporte de cadenas de caracteres simples.

html Para el transporte de bloques de cdigo HTML que sern ubicados en la pgina.

script Para aadir un nuevo script con cdigo JavaScript a la pgina.

json Para transportar informacin en formato JSON, el cual puede incluir cadenas de
caracteres, arrays y objetos.

NOTAA partir de la versin 1.4 de la biblioteca, si la informacin JSON no est correctamente

formateada, la peticin podra fallar. Visite json.org para obtener detalles sobre un correcto
formateo de datos en JSON.
Es recomendable utilizar los mecanismos que posea el lenguaje del lado de servidor para la
generacin de informacin en JSON.

jsonp Para transportar informacin JSON de un dominio a otro.

xml Para transportar informacin en formato XML.

A pesar de los diferentes tipos de datos de que se puede utilizar, es recomendable utilizar el
formato JSON, ya que ste es muy flexible, permitiendo por ejemplo, enviar al mismo tiempo
informacin plana y HTML.

ASINCRONISMO
Debido a que, de forma predeterminada, las llamadas Ajax son asncronas, la respuesta del
servidor no esta disponible de forma inmediata. Por ejemplo, el siguiente cdigo no debera
funcionar:
var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // indefinido (undefined)
En su lugar, es necesario especificar una funcin de devolucin de llamada; dicha funcin se
ejecutar cuando la peticin se haya realizado de forma correcta ya que es en ese momento
cuando la respuesta del servidor esta lista.
$.get('foo.php', function(response) { console.log(response); });

POLTICAS DE MISMO ORIGEN Y JSONP

En general, las peticiones Ajax estn limitadas a utilizar el mismo protocolo (http o https), el
mismo puerto y el mismo dominio de origen. Esta limitacin no se aplica a los scripts cargados
a travs del mtodo Ajax de jQuery.
La otra excepcin es cuando se hace una peticin que recibir una respuesta en formato
JSONP. En este caso, el proveedor de la respuesta debe responder la peticin con un script
que puede ser cargado utilizando la etiqueta <script>, evitando as la limitacin de realizar
peticiones desde el mismo dominio. Dicha respuesta contendr la informacin solicitada,
contenida en una funcin.

AJAX Y FIREBUG
Firebug (o el inspector WebKit que viene incluido en Chrome o Safari) son herramientas
imprescindibles para trabajar con peticiones Ajax, ya que es posible observarlas desde la
pestaa Consola de Firebug (o yendo a Recursos > Panel XHR desde el inspector de Webkit) y
revisar los detalles de dichas peticiones. Si algo esta fallando cuando trabaja con Ajax, este es
el primer lugar en donde debe dirigirse para saber cual es el problema.

MTODOS AJAX DE JQUERY

Como se indic anteriormente, jQuery posee varios mtodos para trabajar con Ajax. Sin
embargo, todos estn basados en el mtodo $.ajax, por lo tanto, su comprensin es obligatoria.
A continuacin se abarcar dicho mtodo y luego se indicar un breve resumen sobre los
dems mtodos.
Generalmente, es preferible utilizar el mtodo $.ajax en lugar de los otros, ya que ofrece ms
caractersticas y su configuracin es muy comprensible.

$.AJAX
El mtodo $.ajax es configurado a travs de un objeto, el cual contiene todas las instrucciones
que necesita jQuery para completar la peticin. Dicho mtodo es particularmente til debido a
que ofrece la posibilidad de especificar acciones en caso que la peticin haya fallado o no.
Adems, al estar configurado a travs de un objeto, es posible definir sus propiedades de
forma separada, haciendo que sea ms fcil la reutilizacin del cdigo. Puede
visitar api.jquery.com/jQuery.ajax para consultar la documentacin sobre las opciones
disponibles en el mtodo.
Utilizar el mtodo $.ajax
$.ajax({
// la URL para la peticin
url : 'post.php',

// la informacin a enviar
// (tambin es posible utilizar una cadena de datos)
data : { id : 123 },

// especifica si ser una peticin POST o GET

type : 'GET',

// el tipo de informacin que se espera de respuesta

dataType : 'json',

// cdigo a ejecutar si la peticin es satisfactoria;

// la respuesta es pasada como argumento a la funcin
success : function(json) {
$('<h1/>').text(json.title).appendTo('body');
$('<div class="content"/>')
.html(json.html).appendTo('body');
},

// cdigo a ejecutar si la peticin falla;

// son pasados como argumentos a la funcin
// el objeto de la peticin en crudo y cdigo de estatus de la peticin
error : function(xhr, status) {
alert('Disculpe, existi un problema');
},

// cdigo a ejecutar sin importar si la peticin fall o no

complete : function(xhr, status) {
alert('Peticin realizada');

}
});
NOTAUna aclaracin sobre el parmetro dataType: Si el servidor devuelve informacin que es
diferente al formato especificado, el cdigo fallar, y la razn de porque lo hace no siempre
quedar clara debido a que la respuesta HTTP no mostrar ningn tipo de error. Cuando est
trabajando con peticiones Ajax, debe estar seguro que el servidor esta enviando el tipo de
informacin que esta solicitando y verifique que la cabecera Content-type es exacta al tipo de
dato. Por ejemplo, para informacin en formato JSON, la cabecera Content-type debera
ser application/json.

OPCIONES DEL MTODO $.AJAX

El mtodo $.ajax posee muchas opciones de configuracin, y es justamente esta caracterstica
la que hace que sea un mtodo muy til. Para una lista completa de las opciones disponibles,
puede consultarapi.jquery.com/jQuery.ajax; a continuacin se muestran las ms comunes:
async Establece si la peticin ser asncrona o no. De forma predeterminada el valor es true.
Debe tener en cuenta que si la opcin se establece en false, la peticin bloquear la ejecucin
de otros cdigos hasta que dicha peticin haya finalizado.
cache Establece si la peticin ser guardada en la cache del navegador. De forma
predeterminada es true para todos los dataType excepto para script y jsonp. Cuando posee el
valor false, se agrega una cadena de caracteres anti-cache al final de la URL de la peticin.
complete Establece una funcin de devolucin de llamada que se ejecuta cuando la peticin
esta completa, aunque haya fallado o no. La funcin recibe como argumentos el objeto de la
peticin en crudo y el cdigo de estatus de la misma peticin.
context Establece el alcance en que la/las funciones de devolucin de llamada se ejecutaran
(por ejemplo, define el significado de this dentro de las funciones). De manera
predeterminada this hace referencia al objeto originalmente pasado al mtodo $.ajax.
data Establece la informacin que se enviar al servidor. Esta puede ser tanto un objeto como
una cadena de datos (por ejemplo foo=bar&baz=bim)
dataType Establece el tipo de informacin que se espera recibir como respuesta del servidor. Si
no se especifica ningn valor, de forma predeterminada, jQuery revisa el tipo de MIME que
posee la respuesta.
error Establece una funcin de devolucin de llamada a ejecutar si resulta algn error en la
peticin. Dicha funcin recibe como argumentos el objeto de la peticin en crudo y el cdigo de
estatus de la misma peticin.
jsonp Establece el nombre de la funcin de devolucin de llamada a enviar cuando se realiza
una peticin JSONP. De forma predeterminada el nombre es callback

success Establece una funcin a ejecutar si la peticin a sido satisfactoria. Dicha funcin recibe
como argumentos la informacin de la peticin (convertida a objeto JavaScript en el caso
que dataType sea JSON), el estatus de la misma y el objeto de la peticin en crudo.
timeout Establece un tiempo en milisegundos para considerar a una peticin como fallada.
traditional Si su valor es true, se utiliza el estilo de serializacin de datos utilizado antes de
jQuery 1.4. Para ms detalles puede visitar api.jquery.com/jQuery.param.
type De forma predeterminada su valor es GET. Otros tipos de peticiones tambin pueden ser
utilizadas (como PUT y DELETE), sin embargo pueden no estar soportados por todos los
navegadores.
url Establece la URL en donde se realiza la peticin. La opcin url es obligatoria para el
mtodo$.ajax;

MTODOS CONVENIENTES
En caso que no quiera utilizar el mtodo $.ajax, y no necesite los controladores de errores,
existen otros mtodos ms convenientes para realizar peticiones Ajax (aunque, como se indic
antes, estos estn basados el mtodo $.ajax con valores pre-establecidos de configuracin).
Los mtodos que provee la biblioteca son:

$.get Realiza una peticin GET a una URL provista.

$.post Realiza una peticin POST a una URL provista.

$.getScript Aade un script a la pgina.

$.getJSON Realiza una peticin GET a una URL provista y espera que un dato JSON
sea devuelto.

Los mtodos deben tener los siguientes argumentos, en orden:

url La URL en donde se realizar la peticin. Su valor es obligatorio.

data La informacin que se enviar al servidor. Su valor es opcional y puede ser tanto un
objeto como una cadena de datos (como foo=bar&baz=bim).Nota: esta opcin no es valida
para el mtodo$.getScript.

success callback Una funcin opcional que se ejecuta en caso que peticin haya sido
satisfactoria. Dicha funcin recibe como argumentos la informacin de la peticin y el
objeto en bruto de dicha peticin.

data type El tipo de dato que se espera recibir desde el servidor. Su valor es opcional.
Nota: esta opcin es solo aplicable para mtodos en que no est especificado el tipo de
dato en el nombre del mismo mtodo.

UTILIZAR MTODOS CONVENIENTES PARA PETICIONES AJAX

// obtiene texto plano o html
$.get('/users.php', { userId : 1234 }, function(resp) {
console.log(resp);
});

// aade un script a la pgina y luego ejecuta la funcin especificada

$.getScript('/static/js/myScript.js', function() {
functionFromMyScript();
});

// obtiene informacin en formato JSON desde el servidor

$.getJSON('/details.php', function(resp) {
$.each(resp, function(k, v) {
console.log(k + ' : ' + v);
}); });

$.FN.LOAD
El mtodo $.fn.load es el nico que se puede llamar desde una seleccin. Dicho mtodo
obtiene el cdigo HTML de una URL y rellena a los elementos seleccionados con la informacin
obtenida. En conjunto con la URL, es posible especificar opcionalmente un selector, el cual
obtendr el cdigo especificado en dicha seleccin.
Utilizar el mtodo $.fn.load para rellenar un elemento
$('#newContent').load('/foo.html');
Utilizar el mtodo $.fn.load para rellenar un elemento basado en un selector
$('#newContent').load('/foo.html #myDiv h1:first', function(html) {

alert('Contenido actualizado');
});

AJAX Y FORMULARIOS
Las capacidades de jQuery con Ajax pueden ser especialmente tiles para el trabajo con
formularios. Por ejemplo, la extensin jQuery Form Plugin es una extensin para aadir
capacidades Ajax a formularios. Existen dos mtodos que debe conocer para cuando este
realizando este tipo de trabajos:$.fn.serialize y $.fn.serializeArray.
Transformar informacin de un formulario a una cadena de datos
$('#myForm').serialize();
Crear un array de objetos conteniendo informacin de un formulario
$('#myForm').serializeArray();

// crea una estructura como esta:

[
{ name : 'field1', value : 123 },
{ name : 'field2', value : 'hello world' }
]

TRABAJAR CON JSONP

En los ltimos tiempos, la introduccin de JSONP, ha permitido la creacin de aplicaciones
hbridas de contenidos. Muchos sitios importantes ofrecen JSONP como servicio de
informacin, el cual se accede a travs de una API (en ingls Application programming
interface) predefinida. Un servicio particular que permite obtener informacin en formato
JSONP es Yahoo! Query Language, el cual se utiliza a continuacin para obtener, por ejemplo,
noticias sobre gatos:

UTILIZAR YQL Y JSONP

$.ajax({
url : 'http://query.yahooapis.com/v1/public/yql',

// se agrega como parmetro el nombre de la funcin de devolucin,

// segn se especifica en el servicio de YQL

jsonp : 'callback',

// se le indica a jQuery que se espera informacin en formato JSONP

dataType : 'jsonp',

// se le indica al servicio de YQL cual es la informacin

// que se desea y que se la quiere en formato JSON
data : {
q : 'select title,abstract,url from search.news where query="cat"',
format : 'json'
},

// se ejecuta una funcin al ser satisfactoria la peticin

success : function(response) {
console.log(response);
}
});
jQuery se encarga de solucionar todos los aspectos complejos de la peticin JSONP. Lo nico
que debe hacer es especificar el nombre de la funcin de devolucin (en este caso callback,
segn lo especifica YQL) y el resultado final ser como una peticin Ajax normal.

EVENTOS AJAX
A menudo, querr ejecutar una funcin cuando una peticin haya comenzado o terminado,
como por ejemplo, mostrar o ocultar un indicador. En lugar de definir estas funciones dentro de
cada peticin, jQuery provee la posibilidad de vincular eventos Ajax a elementos seleccionados.
Para una lista completa de eventos Ajax, puede consultar docs.jquery.com/Ajax_Events.

MOSTRAR/OCULTAR UN INDICADOR UTILIZANDO EVENTOS AJAX

$('#loading_indicator')
.ajaxStart(function() { $(this).show(); })

.ajaxStop(function() { $(this).hide(); });

AJAX EVENTS

Ajax requests produce a number of different events that you can subscribe to. Here's a full list of
the events and in what order they are triggered.
There are two types of events:
Local Events
These are callbacks that you can subscribe to within the Ajax request object, like so:

1
2
3
4
5
6
7

$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ......
});

8
9

GLOBAL EVENTS
These events are triggered on the document, calling any handlers which may be listening. You
can listen for these events like so:
$(document).bind("ajaxSend", function(){
$("#loading").show();
}).bind("ajaxComplete", function(){
$("#loading").hide();
});

Global events can be disabled for a particular Ajax request by passing in the global option, like
so:

1
2
3
4

$.ajax({
url: "test.html",
global: false,
// ...
});

5
Events
This is the full list of Ajax events, and in the order in which they are triggered. The indented
events are triggered for each and every Ajax request (unless a global option has been set). The
ajaxStart and ajaxStop events are events that relate to all Ajax requests together.

ajaxStart (Global Event)

This event is triggered if an Ajax request is started and no other Ajax requests are currently
running.
o

beforeSend (Local Event)

This event, which is triggered before an Ajax request is started, allows you to modify the
XMLHttpRequest object (setting additional headers, if need be.)

ajaxSend (Global Event)

This global event is also triggered before the request is run.

success (Local Event)

This event is only called if the request was successful (no errors from the server, no errors
with the data).

ajaxSuccess (Global Event)

This event is also only called if the request was successful.

error (Local Event)

This event is only called if an error occurred with the request (you can never have both an
error and a success callback with a request).

ajaxError (Global Event)

This global event behaves the same as the local error event.

complete (Local Event)

This event is called regardless of if the request was successful, or not. You will always
receive a complete callback, even for synchronous requests.

ajaxComplete (Global Event)

This event behaves the same as the complete event and will be triggered every time an
Ajax request finishes.

ajaxStop (Global Event)

This global event is triggered if there are no more Ajax requests being processed.

AJAX JQUERY

AJAX significa Asynchronous JavaScript and XML. Esta tecnologa nos permite comunicarnos
con un servicio web sin tener que recargar la pgina. A pesar de que su nombre lo dice, XML
no es requerido para usar AJAX, de hecho, se utiliza JSON ms seguido.
Con jQuery, hacer uso de AJAX es muy sencillo. Para demostrarlo, estar utilizando la web API
de Open Weather Map (http://openweathermap.org/), a la cual har algunas solicitudes
utilizando AJAX y jQuery.
Comencemos.

OBTENIENDO DATOS
jQuery provee varias funciones para trabajar con AJAX. La ms comnmente usada $.ajax().
Pero ya hablare de algunas otras.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<meta charset="utf-8">
<title>jQuery Ajax</title>
<script>
function testAjax() {
$.ajax({
url: 'http://api.openweathermap.org/data/2.1/weather/city/caracas',
type: 'GET',
dataType:"jsonp",
success: function(data) {

$('body').append('<pre>' + JSON.stringify(data, null, 2) + '</pre>');

},
error: function(jqXHR, textStatus, error) {

alert( "error: " + jqXHR.responseText);

}
});
}

function test2() {
var jqxhr = $.getJSON( "http://api.openweathermap.org/data/2.1/weather/city/caracas?
callback=?", function() {
alert( "success" );
})
.done(function() {
alert( "second success" );
})
.fail(function() {
alert( "error" );
});
}

</script>
</head>
<body>
<button onclick="testAjax();">click para probar</button>
<button onclick="test2();">click para probar 2</button>
</body>
</html>

El presente ejemplo hace uso de jQuery AJAX para obtener un objeto json de la direccin
"http://api.openweathermap.org/data/2.1/weather/city/caracas?type=json" con los datos del
clima de la ciudad de Caracas. Revisemos los parmetros pasados a la funcin AJAX:

url: La direccin a donde enviar la solicitud.

type: Tipo de request (solicitud). Ejemplo: GET, POST, PUT, DELETE, etc. En caso de
utilizar POST o PUT, por ejemplo, se puede enviar un objeto en otro parmetro a la
misma funcin llamado data. Ej: data: {'clave': 'valor'},.

datatype: El tipo de respuesta que se espera, en este caso es json.

En este ejemplo pas a la funcin AJAX 2 funciones: success y error; Estas son llamadas
cuando el request fue exitoso o fall respectivamente.

ATAJOS
Adicionalmente a la funcin AJAX, jQuery provee otras funciones para usos ms especficos y
ahorrarnos escribir unas cuantas lineas de cdigo.
$.get()
$.get() realiza una llamada GET a una direccin especifica:
$.get( "http://myURL.com/", function() {
alert( "Funcion" );
})
.done(function() {
alert( "Tambin sirve para saber que funcion" );
})
.fail(function() {
alert( "Ha ocurrido un error" );
});
La funcin $.get() solo provee una funcin una funcin para saber que la operacin fue exitosa.
Esto es mas o menos equivalente a:
$.ajax({
url: "http://myURL.com/",

type: 'GET',
success: function() {
alert( "Funcion" );
},
error: function() {
alert( "Ha ocurrido un error" );
}
});
$.getJSON()
Esta es muy similar a la anterior, solo que es especifica para cuando se espera una respuesta
tipo json.
En caso de esperar jsonp, se debe agregar 'callback=?' a la url:
$.getJSON( "http://api.openweathermap.org/data/2.1/weather/city/caracas?callback=?",
function() {
alert( "Exito" );
});
$.ajax({
url: "http://api.openweathermap.org/data/2.1/weather/city/caracas",
type: 'GET',
dataType: 'jsonp',
success: function() {
alert( "Exito" );
}
});
$.getScript()
Carga un un archivo Javascript de una direccin especifica.
$.getScript( "http://myURL.com/ajax/myScript.js", function( data, textStatus, jqxhr ) {
alert( "Exito" );
});
Es equivalente a:

$.ajax({
url: "http://myURL.com/ajax/myScript.js",
dataType: "script",
success: function( data, textStatus, jqxhr ) {
alert( "Exito" );
}
});
$.post()
Realiza una llamada POST a una direccin URL:
$.post( "http://myURL.com/usuario", {'nombre': 'Oscar'}, function( data, textStatus, jqxhr ) {
alert( "Exito" );
});
Esta funcin puede recibir como parmetro un objeto con los valores a enviar.

Es equivalente a:
$.ajax({
url: "http://myURL.com/usuario",
type: "POST",
success: function( data, textStatus, jqxhr ) {
alert( "Exito" );
}
});
$.load()
Carga una direccin url y coloca los datos retornados en los elementos seleccionados (Con un
ejemplo se entender mejor...).
$('body').load( "http://myURL.com/public/prueba.txt" );
El contenido del archivo "prueba.txt" sera agregado al body de la pgina web.

Eventos Globales
Por ltimo, jQuery ofrece una serie de funciones que responden a eventos de AJAX. Estas
funciones no deben ser invocadas manualmente, se invocan automticamente cuando se
dispara su evento correspondiente.
$.ajaxComplete()
Es llamada cuando una funcin AJAX es completada
$( document ).ajaxComplete(function() {
alert('Ajax completado');
});
Si se necesita saber de que url viene:
$( document ).ajaxComplete(function( event, xhr, settings ) {
alert('Ajax completado desde ' + settings.url);
});
$.ajaxError()
Es llamada cuando una funcin AJAX es completada pero con errores
$( document ).ajaxError(function() {
alert('Ajax Error');
});
$.ajaxSend()
Se invoca cuando un AJAX es enviado
$( document ).ajaxSend(function() {
alert('Ajax enviado');
});
$.ajaxStart()
jQuery lleva un control de todas las llamadas AJAX que ejecutas. Si ninguna esta en curso esta
funcin es invocada.
$( document ).ajaxStart(function() {
alert('Ajax Iniciando');
});

$.ajaxStop()
Esta se invoca cada vez que una funcin AJAX es completada y an quedan otras en curso.
Incluso es invocada cuando la ltima funcin AJAX es cancelada.
$( document ).ajaxStop(function() {
alert('Ajax Stop');
});
$.ajaxSuccess()
Este es invocado cuando una funcin AJAX termina exitosamente.
$( document ).ajaxSuccess(function() {
alert('Ajax Exitoso');
});

Conclusin
Con esto completamos esta serie sobre jQuery.
Gracias por leer y seguir atendiendo sus dudas por la seccin de comentarios de ms abajo.
Si esta informacin ha sido util, comprtela en las redes sociales y ayudamos a llegar a otras
personas que podran necesitarnos.
Hasta pronto.

DETENER LAS PETICIONES HTTP ERRNEAS

La creacin de aplicaciones AJAX implica la aparicin de nuevos tipos de errores y
excepciones. Probablemente, el problema ms importante sea el de realizar una peticin al
servidor y que este no responda en un periodo de tiempo razonable.
Aunque las peticiones se realizan de forma asncrona y el usuario puede continuar utilizando la
aplicacin mientras se realiza la peticin al servidor en un segundo plano, normalmente es
necesario disponer de una respuesta rpida del servidor.
La funcin setTimeout() se puede emplear para establecer una cuenta atrs al iniciar una
nueva peticin. Si el servidor responde antes de que expire la cuenta atrs, se elimina esa
cuenta atrs y se contina con la ejecucin normal de la aplicacin. Si el servidor no responde
y la cuenta atrs finaliza, se ejecuta una funcin encargada de detener la peticin, reintentarla,
mostrar un mensaje al usuario, etc.

// Variable global que almacena el identificador de la cuenta atrs

var cuentaAtras = null;
var tiempoMaximo = 5000; // 5000 = 5 segundos

function cargaContenido(url, metodo, funcion) {

peticion_http = inicializa_xhr();
if(peticion_http) {
// Establecer la cuenta atrs al realizar la peticin HTTP
cuentraAtras = setTimeout(expirada, tiempoMaximo);
peticion_http.onreadystatechange = funcion;
peticion_http.open(metodo, url, true);
peticion_http.send(null);
}
}

function muestraMensaje() {
...
if(peticion_http.readyState == READY_STATE_COMPLETE) {
if(peticion_http.status == 200) {
// Si se ha recibido la respuesta del servidor, eliminar la cuenta atrs
clearTimeout(cuentaAtras);
...
}
}
}

function expirada() {
// La cuentra atrs se ha cumplido, detener la peticin HTTP pendiente
peticion_http.abort();

alert("Se ha producido un error en la comunicacin con el servidor. Intntalo un poco ms

adelante.");
}
Adems de la falta de respuesta del servidor, las aplicaciones AJAX deben estar preparadas
para otros tipos de respuestas que pueden generar los servidores. El tipo de respuesta se
comprueba mediante el valor del atributo status del objeto XMLHTTPRequest.
A continuacin se muestran las tablas de los cdigos de estado ms comunes que pueden
devolver los servidores:

CDIGOS DE INFORMACIN

statu
s

statusText

Explicacin

100

Continue

Una parte de la peticin (normalmente la primera) se ha recibido sin

problemas y se puede enviar el resto de la peticin

101

Switching
protocols

El servidor va a cambiar el protocolo con el que se enva la

informacin de la respuesta. En la cabecera Upgrade indica el nuevo
protocolo

CDIGOS DE PETICIN Y RESPUESTA CORRECTAS

statu
s

statusText

Explicacin

200

OK

La peticin se ha recibido correctamente y se est enviando la

respuesta. Este cdigo es con mucha diferencia el que mas
devuelven los servidores

statu
s

statusText

Explicacin

201

Created

Se ha creado un nuevo recurso (por ejemplo una pgina web o

un archivo) como parte de la respuesta

202

Accepted

La peticin se ha recibido correctamente y se va a responder,

pero no de forma inmediata

203

Non-Authoritative
Information

La respuesta que se enva la ha generado un servidor externo.

A efectos prcticos, es muy parecido al cdigo 200

204

No Content

La peticin se ha recibido de forma correcta pero no es

necesaria una respuesta

205

Reset Content

El servidor solicita al navegador que inicialice el documento

desde el que se realiz la peticin, como por ejemplo un
formulario

206

Partial Content

La respuesta contiene slo la parte concreta del documento

que se ha solicitado en la peticin

CDIGOS DE REDIRECCIN

statu
s

statusText

Explicacin

300

Multiple
Choices

El contenido original ha cambiado de sitio y se devuelve una lista

con varias direcciones alternativas en las que se puede encontrar el
contenido

301

Moved
Permanently

El contenido original ha cambiado de sitio y el servidor devuelve la

nueva URL del contenido. La prxima vez que solicite el contenido,
el navegador utiliza la nueva URL

statu
s

statusText

Explicacin

Found

El contenido original ha cambiado de sitio de forma temporal. El

servidor devuelve la nueva URL, pero el navegador debe seguir
utilizando la URL original en las prximas peticiones

See Other

El contenido solicitado se puede obtener en la URL alternativa

devuelta por el servidor. Este cdigo no implica que el contenido
original ha cambiado de sitio

304

Not Modified

Normalmente, el navegador guarda en su cach los contenidos

accedidos frecuentemente. Cuando el navegador solicita esos
contenidos, incluye la condicin de que no hayan cambiado desde
la ltima vez que los recibi. Si el contenido no ha cambiado, el
servidor devuelve este cdigo para indicar que la respuesta sera la
misma que la ltima vez

305

Use Proxy

El recurso solicitado slo se puede obtener a travs de un proxy,

cuyos datos se incluyen en la respuesta

307

Temporary
Redirect

Se trata de un cdigo muy similar al 302, ya que indica que el

recurso solicitado se encuentra de forma temporal en otra URL

302

303

CDIGOS DE ERROR DEL NAVEGADOR

statu
s

statusText

Explicacin

400

Bad Request

El servidor no entiende la peticin porque no ha sido creada de

forma correcta

401

Unauthorized

El recurso solicitado requiere autorizacin previa

402

Payment

Cdigo reservado para su uso futuro

statu
s

statusText

Explicacin

Required

Forbidden

No se puede acceder al recurso solicitado por falta de permisos

o porque el usuario y contrasea indicados no son correctos

404

Not Found

El recurso solicitado no se encuentra en la URL indicada. Se

trata de uno de los cdigos ms utilizados y responsable de los
tpicos errores de Pgina no encontrada

405

Method Not
Allowed

El servidor no permite el uso del mtodo utilizado por la

peticin, por ejemplo por utilizar el mtodo GET cuando el
servidor slo permite el mtodo POST

406

Not Acceptable

El tipo de contenido solicitado por el navegador no se

encuentra entre la lista de tipos de contenidos que admite, por
lo que no se enva en la respuesta

407

Proxy
Authentication
Required

Similar al cdigo 401, indica que el navegador debe obtener

autorizacin del proxy antes de que se le pueda enviar el
contenido solicitado

408

Request Timeout

El navegador ha tardado demasiado tiempo en realizar la

peticin, por lo que el servidor la descarta

409

Conflict

El navegador no puede procesar la peticin, ya que implica

realizar una operacin no permitida (como por ejemplo crear,
modificar o borrar un archivo)

Gone

Similar al cdigo 404. Indica que el recurso solicitado ha

cambiado para siempre su localizacin, pero no se proporciona
su nueva URL

403

410

statu
s

statusText

Explicacin

411

Length Required

El servidor no procesa la peticin porque no se ha indicado de

forma explcita el tamao del contenido de la peticin

412

Precondition
Failed

No se cumple una de las condiciones bajo las que se realiz la

peticin

413

Request Entity
Too Large

La peticin incluye ms datos de los que el servidor es capaz

de procesar. Normalmente este error se produce cuando se
adjunta en la peticin un archivo con un tamao demasiado
grande

414

Request-URI Too
Long

La URL de la peticin es demasiado grande, como cuando se

incluyen ms de 512 bytes en una peticin realizada con el
mtodo GET

415

Unsupported
Media Type

Al menos una parte de la peticin incluye un formato que el

servidor no es capaz procesar

416

Requested Range
Not Suitable

El trozo de documento solicitado no est disponible, como por

ejemplo cuando se solicitan bytes que estn por encima del
tamao total del contenido

Expectation Failed

El servidor no puede procesar la peticin porque al menos uno

de los valores incluidos en la cabecera Expect no se pueden
cumplir

417

Cdigos de error del servidor

statu
s

statusText

Explicacin

500

Internal Server

Se ha producido algn error en el servidor que impide procesar

statu
s

statusText

Explicacin

Error

la peticin

501

Not Implemented

Procesar la respuesta requiere ciertas caractersticas no

soportadas por el servidor

502

Bad Gateway

El servidor est actuando de proxy entre el navegador y un

servidor externo del que ha obtenido una respuesta no vlida

503

Service
Unavailable

El servidor est sobrecargado de peticiones y no puede

procesar la peticin realizada

504

Gateway Timeout

El servidor est actuando de proxy entre el navegador y un

servidor externo que ha tardado demasiado tiempo en
responder

505

HTTP Version Not

Supported

El servidor no es capaz de procesar la versin HTTP utilizada

en la peticin. La respuesta indica las versiones de HTTP que
soporta el servidor

Tabla de Contenidos
1. Ajax y Jquery.
2. Otras funciones Ajax
3. getScript
4. getJSON
5. Ejemplo load
Sesin 5 - Ajax.
Ajax.
Ajax, acrnimo de Asynchronous JavaScript And XML ( JavaScript asncrono y XML), es una
tcnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet
Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los

usuarios mientras se mantiene la comunicacin asncrona con el servidor en segundo plano.

De esta forma es posible realizar cambios sobre las pginas sin necesidad de recargarlas, lo
que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.
En concepto parte del hecho que desde javascript podemos realizar solicitudes( httpRequests )
y que por medio que javascript no espera el resultado de dicha solicitud para continuar su flujo.
Tabla de Contendidos | Indice principal
Ajax y Jquery.
Personalmente siento que el concepto es algo confuso con jQuery, ya que propiamente no se
deberia llamar ajax si no HttpRequest simplemente Request (como funciona en mootools).
En adelante cuando se mencione ajax en la jerga de jQuery nos referimos a una funcion de
jQuery que realiza un http request, espero que quede mas claro con algunos ejemplos:
Ejemplo bsico
1. $.ajax({
2.

url: 'ajax/test.html',

3.

success: function(data) {

4.

$('.result').html(data);

5.

alert('Load was performed.');

6.

7. });
Quitando la opcin asincrona.
Observe el siguiente cdigo.
1. var datos = null;
2. $.ajax({
3.

url: 'ajax/test.html',

4.

success: function(data) {

5.
6.

datos = data;
}

7. });
8. console.log(datos);

Datos sera null, ya que la respuesta es asincrona es decir console.log() no espera la

finalizacin de $.ajax para ejecutarse, hacerasync igual a false resulta una opcin util para
esta logica.
1. var datos = null;
2. $.ajax({
3.

url: 'ajax/test.html',

4.

//detiene la ejecucin.

5.

async : false,

6.

success: function(data) {

7.
8.

datos = data;
}

9. });
10. console.log(datos);
Otra opcin para esperar que ajax se haya ejecutado para realizar determinada accin seria
encaminar la funcion done como se muestra acontinuacin.
1. var datos = null;
2. $.ajax({
3.

url: 'ajax/test.html',

4.

success: function(data) {

5.
6.

datos = data;
}

7. }).done(function( msg ) {
8.

console.log(datos);}

9. );
10.
Ejemplo Manejando el error.
Si somos detallistas nos daremos cuenta que console.log(datos); no garantiza que los datos no
sean nulos, pues la respuesta puede llegar a fallar y en este caso tal vez deseamos rellenar a
datos con valores por defecto.
1. var datos = null;

2. $.ajax({
3.

url: 'ajax/test.html',

4.

success: function(data) {

5.

datos = data;

6.

7.

error: function() {

8.
9.

datos = {v1:'valor defecto 1', v2:'valor defecto 2'};

}

10. }).done(function( msg ) {

11.

console.log(datos);}

12. );
13.
Tabla de Contendidos | Indice principal
Otras funciones Ajax
Existen otras funciones definidas para manejar respuestas asincronas para una detallado mas
extenso se recomienda consultar la categoriaAjax de la api de jQuery:
Tabla de Contendidos | Indice principal
getScript
Es una funcin ajax de jQuery equivalente a:
1. $.ajax({
2.

url: url,

3.

dataType: "script",

4.

success: success

5. });
A partir de jQuery 1.5 puedes ocupar la funcin .fail() para detectar y manejar errores.
1. $.getScript("ajax/test.js")
2. .done(function(script, textStatus) {
3.

$( "div.log" ).text( textStatus );

4. })
5. .fail(function(jqxhr, settings, exception) {
6.

$( "div.log" ).text( "Triggered ajaxError handler." );

7. });
8.
Ejemplo - getScript
Tabla de Contendidos | Indice principal
getJSON
Esta funcin es en particular muy util ya que varios servicios por Internet nos brindan una API y
por lo regular los datos son enviados en formato json.
http://api.jquery.com/jQuery.getJSON/
Ejemplo - getJson y la API de youtube
Ejemplo - getJson y la API de Flickr
Ejemplo - getJson y la API de twitter
Tabla de Contendidos | Indice principal
Ejemplo load
Entre las funciones que ofrece jQuery para el control asincrono esta la funcin load dicha
funcin se encarga de cargar algun contenido obtenido desde alguna url, para entender mejor
esta funcin observe el siguiente esquema:

El esquema enterior muestra un documento Html el cual contiene un div identificado

como elementoDinamico el cual va a cargar el contenido de http://url/file.html en el momento

que hagan click sobre el botn identificado como algunBoton, bien ahora veamos como
quedaria este ejemplo:
textpop-up
1. //relacionamos el evento click del boton #algunBoton
2. $('#algunBoton').click(function(event) {
3.

//En el div #elementoDinamico vamos a cargar el contenido de file.html

4.

// Notar que el parametro que recibe puede ser una url absoluta o un ruta
refenenciada.

5.

$('#elementoDinamico').load('file.html');

6.

// Detenmos los demas eventos(si no hacemos esto subiria el scroll)

7.

event.preventDefault();

8. });
9.
Contenido dinamico
Este contenido existe dentro del documento con nombre file.html
Probar ejemplo: algunBoton

JQUERY AJAX METHODS

AJAX is the art of exchanging data with a server, and update parts of a web page - without
reloading the whole page.
The following table lists all the jQuery AJAX methods:
Method

Description

$.ajax()

Performs an async AJAX request

$.ajaxPrefilter()

Handle custom Ajax options or modify existing options

before each request is sent and before they are
processed by $.ajax()

$.ajaxSetup()

Sets the default values for future AJAX requests

$.ajaxTransport()

Creates an object that handles the actual transmission

of Ajax data

$.get()

Loads data from a server using an AJAX HTTP GET

request

$.getJSON()

Loads JSON-encoded data from a server using a

HTTP GET request

$.getScript()

Loads (and executes) a JavaScript from a server using

an AJAX HTTP GET request

$.param()

Creates a serialized representation of an array or

object (can be used as URL query string for AJAX
requests)

$.post()

Loads data from a server using an AJAX HTTP POST

request

ajaxComplete()

Specifies a function to run when the AJAX request

completes

ajaxError()

Specifies a function to run when the AJAX request

completes with an error

ajaxSend()

Specifies a function to run before the AJAX request is

sent

ajaxStart()

Specifies a function to run when the first AJAX request

begins

ajaxStop()

Specifies a function to run when all AJAX requests

have completed

ajaxSuccess()

Specifies a function to run when an AJAX request

completes successfully

load()

Loads data from a server and puts the returned data

into the selected element

serialize()

Encodes a set of form elements as a string for

submission

serializeArray()

Encodes a set of form elements as an array of names

and values

jQuery getJSON() Method

Example
Get JSON data using an AJAX request, and output the result:

$("button").click(function(){
$.getJSON("demo_ajax_json.js", function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
Try it Yourself

DEFINITION AND USAGE

The getJSON() method is used to get JSON data using an AJAX HTTP GET request.

Syntax
$(selector).getJSON(url,data,success(data,status,xhr))
Parameter

Description

url

Required. Specifies the url to send the request to

data

Optional. Specifies data to be sent to the server

success

Optional. Specifies the function to run if the request

succeeds
Additional parameters:

(data,status,xhr)

data - contains the data returned from the

server.

status - contains a string containing request

status ("success", "notmodified", "error",
"timeout", or "parsererror").

xhr - contains the XMLHttpRequest object

SIMPLE FILE UPLO AD S USING JQUERY & AJ AX

A METHOD FOR HANDLING FILE UPLOADS ON A FORM WITH AJAX USING JQUERY.

Posted 3 years ago

Update (20, Nov, 2013): I made a plugin to handle this.
As you probably know file uploads over AJAX are a nightmare. I recently had a client ask for file
uploads on an AJAX form at the last minute. Scrambling to get it working before deadline I
stumbled onto the following method of handling them:
1. Grab file data from the file field
The first thing to do is bind a function to the change event on your file field and a function for
grabbing the file data:
// Variable to store your files
var files;
// Add events
$('input[type=file]').on('change', prepareUpload);
// Grab the files and set them to our variable
function prepareUpload(event)
{
files = event.target.files;
}
This saves the file data to a file variable for later use.
2. Handle the file upload on submit
When the form is submitted you need to handle the file upload in its own AJAX request. Add the
following binding and function:

$('form').on('submit', uploadFiles);
// Catch the form submit and upload the files
function uploadFiles(event)
{
event.stopPropagation(); // Stop stuff happening
event.preventDefault(); // Totally stop stuff happening
// START A LOADING SPINNER HERE

// Create a formdata object and add the files

var data = new FormData();
$.each(files, function(key, value)
{
data.append(key, value);
});
$.ajax({
url: 'submit.php?files',
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false, // Don't process the files
contentType: false, // Set content type to false as jQuery will tell the server its a query
string request
success: function(data, textStatus, jqXHR)
{
if(typeof data.error === 'undefined')
{
// Success so call function to process the form
submitForm(event, data);
}
else
{
// Handle errors here
console.log('ERRORS: ' + data.error);
}
},
error: function(jqXHR, textStatus, errorThrown)
{
// Handle errors here
console.log('ERRORS: ' + textStatus);
// STOP LOADING SPINNER
}
});
}

What this function does is create a new formData object and appends each file to it. It then
passes that data as a request to the server. 2 attributes need to be set to false:

processData - Because jQuery will convert the files arrays into strings and the server
can't pick it up.
contentType - Set this to false because jQuery defaults toapplication/x-www-formurlencoded and doesn't send the files. Also setting it to multipart/form-data doesn't seem
to work either.
3. Upload the files
Quick and dirty php script to upload the files and pass back some info:

// You need to add server side validation and better error handling here
$data = array();
if(isset($_GET['files']))
{
$error = false;
$files = array();
$uploaddir = './uploads/';
foreach($_FILES as $file)
{
if(move_uploaded_file($file['tmp_name'], $uploaddir .basename($file['name'])))
{
$files[] = $uploaddir .$file['name'];
}
else
{
$error = true;
}
}
$data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' =>
$files);
}
else
{
$data = array('success' => 'Form was submitted', 'formData' => $_POST);
}
echo json_encode($data);

Don't use this, write your own.

4. Handle the form submit
The success method of the upload function passes the data sent back from the server to the
submit function. You can then pass that to the server as part of your post:
function submitForm(event, data)
{
// Create a jQuery object from the form
$form = $(event.target);
// Serialize the form data
var formData = $form.serialize();
// You should sterilise the file names
$.each(data.files, function(key, value)
{
formData = formData + '&filenames[]=' + value;
});
$.ajax({
url: 'submit.php',
type: 'POST',
data: formData,
cache: false,
dataType: 'json',
success: function(data, textStatus, jqXHR)
{
if(typeof data.error === 'undefined')
{
// Success so call function to process the form
console.log('SUCCESS: ' + data.success);
}
else
{
// Handle errors here
console.log('ERRORS: ' + data.error);
}
},
error: function(jqXHR, textStatus, errorThrown)
{
// Handle errors here
console.log('ERRORS: ' + textStatus);
},
complete: function()
{
// STOP LOADING SPINNER
}

});
}
<!Fin del Codig -- >

FINAL NOTE
This script is an example only, you'll need to handle both server and client side validation and
some way to notify users that the file upload is happening. I made a project for it on Github if
you want to see it working.
If you have comments you can tweet me on @abbandunne