Contenidos
AJAX
Ajax (asynchronous Javascript and XML) permite cargar contenido desde una página web y mostrarlo sin tener que recargarla
Casi cualquier página web actual utiliza esta tecnología: Gmail, Google Maps, YouToube, Facebook, etc
Para realizar esta tarea, Ajax construye una capa de proceso adicional entre la página web y nuestro servidor
De esta manera, las peticiones al servidor serán asíncronas, sin entorpecer el proceso de carga ni las acciones del usuario
Mientras que en el lado del navegador, el usuario podrá realizar acciones en cualquier momento sin quedar paralizado esperando una respuesta del servidor
La actualización de los elementos se realiza a traves de la capa Ajax, de forma dinámica y continua mientras el usuario sigue usando la página
Elementos que componen Ajax
Ahora vamos a examinar cada uno de los distintos elementos que componen una aplicación Ajax
XMLHTTPRequest
El objeto XMLHTTPRequest se encuentra soportado por todos los navegadores modernos, a partir de Internet Explorer 5+, además de Mozilla, Firefox, Konqueror, Opera y Safari
Es soportado por una amplia variedad de plataformas, como Microsoft Windows, UNIX / Linux y Mac OS X
El propósito de este objeto es permitir a Javascript la formulación y el envío de peticiones HTTP al servidor
Antes de utilizar el objeto, debemos llamarlo con su constructor y adaptarlo según las peculiaridades de cada navegador
Microsoft fue el primero en introducir el objeto, con una implementación del mismo como un ActiveX
El resto de navegadores han incluido una versión nativa del mismo aunque implementandolo como un objeto Javascript
Dado que el objeto depende de qué navegador y qué sistema operativo es capaz de utilizarlo, hay que adaptar el código para instancie correctamente
En el ejemplo anterior se muestra cómo sería la llamada del constructor dependiendo del navegador si usaramos código Javascript puro
Si utilizamos el objeto navigator que almacena información sobre el navegador, podríamos hacer una comparación condicional según el tipo de navegador simplemente usandolo como una variable:
Propiedades del objeto
- onreadystatechange
determina qué manejador de eventos se llamará cuando cambie la propiedad readyState del objeto
- readyState
es un valor entero que informa del estado de la petición:
- 0 = sin inicializar
- 1 = cárgandose
- 2 = cargada
- 3 = interactiva
- 4 = completada
- responseText
cadena de texto devuelta por el servidor que representa los datos de la petición
- responseXML
documento XML devuelto por el servidor que representa los datos de la petición
- status
código HTTP de estado devuelto por el servidor
- statusText
cadena de texto devuelta por el servidor con una descripción del estado
Métodos del objeto
- abort()
detiene la petición actual
- getAllResponseHeaders()
devuelve una cadena de texto que contiene todos los encabezados
- getResponseHeader(x)
devuelve una cadena de texto con el valor del encabezado x
- open(‘método’, ‘URL’, ‘a’)
especifica si el método de la petición es GET o POST, la URL de destino y si la petición debe manejarse de forma asíncrona (si a es true) o síncrona (si es false)
- send(contenido)
envía la petición con datos POST de forma opcional
- setRequestHeader(‘x’, ‘y’)
define los parámetros con una pareja variable (x) / valor (y) y se asigna al encabezado que se envía con la petición
Ajax con jQuery
Gracias a jQuery, podemos utilizar un código más simplificado y sencillo que nos permite incluso olvidarnos del tipo de navegador o el sistema gracias a los métodos get(), post(), load() y ajax()
get()
Este método solicita datos al servidor con una solicitud HTTP GET
GET se usa básicamente para obtener (recuperar) algunos datos del servidor
El método GET puede devolver datos en caché
Tiene la siguiente sintaxis:
- URL
es la dirección de destino
- callback
es un parámetro opcional que representa el nombre de la función que se ejecutará en el caso de que la solicitud sea realizada correctamente
En el ejemplo podemos ver cómo cuando pulsemos el elemento button se lanzará una petición GET al servidor, que en este caso trabaja con el lenguaje PHP, a la URL test.php y que contiene el código que debe ejecutarse
Si la solicitud se ejecutase correctamente, se ejecutaría la función anónima que muestra al usuario una advertencia con el contenido de los parámetros data y status
post()
Este método solicita datos al servidor con una solicitud HTTP POST
POST envía datos para su procesamiento a un recurso especificado
El método POST nunca almacena en caché los datos, y a menudo se usa para enviar datos junto con la solicitud
Tiene la siguiente sintaxis:
- URL
es la dirección de destino
- data
es un parámetro opcional que especifica los datos que serán enviados junto con la solicitud
- callback
es un parámetro opcional que representa el nombre de la función que se ejecutará en el caso de que la solicitud sea realizada correctamente
En el ejemplo podemos ver cómo cuando pulsemos el elemento button se lanzará una petición POST al servidor, que en este caso trabaja con el lenguaje PHP, a la URL user.php y que contiene el código acerca del usuario que debe ejecutarse
Si la solicitud se ejecutase correctamente, se ejecutaría la función anónima que muestra al usuario una advertencia con el contenido de los parámetros data y status
load()
Este método obtiene contenidos del servidor y los añade a un elemento de nuestra página
Tiene la siguiente sintaxis:
- URL
es la dirección de destino
- data
es un parámetro opcional que especifica los datos que serán enviados junto con la solicitud
- callback
es un parámetro opcional que representa el nombre de la función que se ejecutará en el caso de que la solicitud sea realizada correctamente
Esta función ha de tener obligatoriamente los siguientes parámetros:
- responseTxt
el contenido de respuesta en caso de éxito
- statusTxt
es una cadena de texto con el estado de la petición, puede ser uno de los siguientes valores:
- abort
- error
- notmodified
- parsererror
- success
- timeout
- xhr
contiene el objeto XHTMLRequest, el cuál nos proporciona información adicional acerca de la petición Ajax
- responseTxt
En el ejemplo podemos ver cómo cuando termine de cargarse el árbol DOM se cargará el contenido de datos.html en el elemento con el id div01, en concreto los elementos dentro de ese fichero que tengan el id p1
Al utilizar un selector para elementos HTML que queremos cargar, jQuery los filtrará sin problemas, como hemos visto en este ejemplo
También podemos cargar otros tipos de fichero, como por ejemplo .txt, pero hemos de tener en cuenta que ha de realizarse por el protocolo HTTP y no directamente desde disco (con file://)
En el caso de que la petición fallase, veríamos El contenido se cargará aquí, en vez del contenido cargado
ajax()
Este método realiza una petición asincrona HTTP
Tiene la siguiente sintaxis:
- URL
es un parámetro opcional que recoge la dirección de destino, si no se especifica habrá que añadirlo dentro del parámetro settings como otro valor más
- settings
especifica los datos que serán enviados junto con la solicitud
Pueden ser especificados valores por defecto para todas las peticiones Ajax utilizando el método ajaxSetup()
En el ejemplo podemos ver que se lanzará una petición POST al servidor, que en este caso trabaja con el lenguaje PHP, a la URL teams.php y que contiene el código que debe ejecutarse
En dataType se ha especificado que se va recibir un objeto de tipo JSON y que se van a utilizar los datos proporcionados por el método llamado get_groups con los parámetros league que recoge su valor del elemento con id team-league y season que recoge su valor del elemento con id team-season
Se han incluido los callback hooks beforeSend, error, dataFilter, success y complete para ilustar el orden en el que son llamados
Sólo se ha dotado de código a error, en caso de que falle la petición y a success, en caso de que sea correcta
Si se ejecuta el callback hook success, se recorreran todos los datos recibidos en formato JSON y serán añadidos al elemento con id team-group que corresponde a un elemento option de un campo de selección, este nuevo elemento será añadido al final de los ya existentes
Parámetros de settings
- accepts
asigna un determinado dataType de tipo MIME, que se enviará en la cabecera de la solicitud
Este encabezado le informa al servidor qué tipo de respuesta será aceptada
En el ejemplo se ha asignado un tipo MIME para trabajar con datos en el formato XML y el servidor devolverá el ‘mycustomtype‘ tal y como se lo hemos especificado
Para poder trabajar correctamente con el nuevo tipo, es preciso utilizar converters para convertirlo correctamente al formato que nosotros queremos devolver
- async
por defecto, todas las solicitudes se envían de forma asíncrona (se establece a true de forma predeterminada)
Para configurarlas de forma síncrona debe asignarsele como false
Las solicitudes cross-domain y las dataType: ‘jsonp’ no admiten operaciones sincrónicas
Hay que tener en cuenta que las solicitudes síncronas pueden bloquear temporalmente el navegador, deshabilitando cualquier acción mientras la solicitud siga activa
A partir de jQuery 1.8 , el uso de async: false con jqXHR ($.Deferred) está deprecated; deben usarse los callback success, error o complete en lugar de los métodos correspondientes del objeto jqXHR tales como jqXHR.done()
- beforeSend
es un método de evento Ajax que se ejecuta antes de la llamada de petición que se puede utilizar para modificar el objeto jqXHR (en jQuery 1.4.x, XMLHTTPRequest) antes que sea enviado
Puese usarse para añadir cabeceras personalizadas, etc
Los objetos jqXHR y settings son pasados como argumentos
Si devuelve false, se cancelará la solicitud
A partir de jQuery 1.5, las opciones son llamadas independientemente del tipo de solicitud
- cache
si se establece en false, forzará que el navegador no almacene en caché las páginas solicitadas
Establecida en false solo funcionará correctamente con las solicitudes HEAD y GET si se ha agregado ‘_ = {timestamp}‘ a los parámetros GET
El parámetro no es necesario para otros tipos de solicitudes, excepto en IE8 cuando se realiza un POST a una URL que ya ha sido solicitada con GET
- complete
es un método de evento Ajax que se ejecuta después de los eventos success y error
Este método pasa dos argumentos: jqXHR (en jQuery 1.4.x, XMLHTTPRequest) y una cadena de texto con el estado de la solicitud (‘success‘, ‘notmodified‘, ‘nocontent‘, ‘error‘, ‘timeout‘, ‘abort‘, o ‘parsererror‘)
A partir de jQuery 1.5, puede aceptar varias peticiones y cada una llamará por turno
- contents
determina cómo jQuery analizará la respuesta, dado su tipo de contenido, admite expresiones regulares (añadido en jQuery 1.5)
- contentType
tipo de contenido con el cual se enviaran los datos al servidor
El valor predeterminado es ‘application/x-www-form-urlencoded; charset=UTF-8‘Si pasa explícitamente un tipo de contenido a $.ajax(), siempre será enviado al servidor (incluso si no se envían datos)
A partir de jQuery 1.6 puede pasarse false para decirle a jQuery que no establezca ningún encabezado de tipo de contenido
La especificación W3C XMLHttpRequest dice que el juego de caracteres siempre debe de ser UTF-8; especificar otro juego de caracteres no obligaráal navegador a cambiar su codificación
Para las solicitudes para cross-domain, cuando sea distinta de ‘application/x-www-form-urlencoded‘, ‘multipart/form-data‘, o ‘text/plain‘, el navegador realizará comprobaciones previas a enviar la petición al servidor
- context
contexto para todas las respuestas de la petición, de manera predeterminada, el contexto es un objeto que representa la configuración utilizada en la llamada ($.ajaxSettings junto con la configuración introducida con $.ajax() )
Por ejemplo, especificar un elemento DOM como contexto hará su contexto para el evento de callback complete sea:
- converters
método para convertir el valor devuelto al formato que necesitemos como respuesta (añadido en jQuery 1.5)
- crossDomain
se utiliza al forzar una solicitud crossDomain (como JSONP) en el mismo dominio, debe establecerse el valor de crossDomain a true
Esto permite, por ejemplo, la redirección desde el servidor a otro dominio (añadido en jQuery 1.5)
- data
datos que se van a enviar al servidor, serán convertidos en una cadena de consulta
Se añadirá a la url en las solicitudes GET
Consulta la opción processData para evitar este proceso automático
En caso de ser una matriz, jQuery serializará varios valores con la misma clave en función del valor de la configuración de traditional
- dataFilter
método que se utilizará para manejar los datos de respuesta sin procesar de XMLHttpRequest
Acepta dos parámetros:
- data
los datos sin procesar devueltos por el servidor
- dataType
- data
- dataType
tipo de datos esperado por por servidor
Si no se especifica ninguno, jQuery intentará inferirlo en función del tipo MIME de la respuesta (un tipo MIME XML generará XML, en 1.4 JSON generará un objeto JavaScript, en 1.4 el script ejecutará el script, y cualquier otro tipo será devuelto como una cadena)
Los tipos disponibles (y el resultado pasado como primer argumento para su devolución de la llamada aceptada) son:
- xml
devuelve un documento XML que se puede procesar a través de jQuery
- html
devuelve un documento HTML como texto sin formato; las etiquetas de script incluidas se evaluarán cuando se inserten en el DOM
- script
se evalúa la respuesta como JavaScript y es devuelta como texto sin formato
Deshabilita el almacenamiento en caché agregando un parámetro en la cadena de consulta ‘_ = {timestamp}‘ a la URL, a menos que la opción cache esté establecida como true
En este caso los POST serán convertidos en GET para las peticiones de remote-domain
- json
se evalúa la respuesta como JSON y devuelve un objeto JavaScript
Los json solicitudes callback placeholder, por ejemplo ‘?callback=?‘, se realizan utilizando JSONP a menos que la solicitud incluya jsonp: false en la configuración de la petición
Los datos JSON se analizan de manera estricta; cualquier JSON con formato incorrecto será rechazado y se lanzará una error
A partir de jQuery 1.9, también se rechazan las respuestas vacías; el servidor debería devolver una respuesta null o {} en su lugar (consulta json.org para obtener más información sobre la correción del formato JSON)
- jsonp
carga en un bloque JSON usando JSONP
Añade ‘?callback=?‘ al final de su URL para especificar la devolución de la petición
Deshabilita el almacenamiento en caché agregando un parámetro en la cadena de consulta ‘_ = {timestamp}‘ a la URL, a menos que la opción cache esté establecida como true
- text
cadena de texto sin formato
- varios valores separados por espacios
a partir de jQuery 1.5, es posible convertir un dataType recibido en el encabezado Content-Type al que sea necesario
Por ejemplo, si desea que una cadena de texto sea tratada como un XML, use ‘text xml‘
También puede realizar una solicitud JSONP, recibida como texto y será interpretada por jQuery como XML: ‘jsonp text xml‘
De igual manera, la cadena abreviada ‘jsonp xml‘, primero, intentará convertir de jsonp a xml y, en su defecto, convertirá de jsonp a texto, y luego de texto a xml
- xml
- error
evento Ajax que será llamado si la petición falla
A partir de jQuery 1.5, admite un array de métodos y cada uno será llamado por turno
No será llamado con peticiones cross-domain script y JSONP
Recibe los siguientes parámetros:
- jqXHR
(en jQuery 1.4.x, XMLHttpRequest)
- cadena de texto
describe el tipo de error que se produjo
Admite los siguientes valores:
- null
no es una cadena, es el literal null
- timeout
- error
- abort
- parsererror
- null
- errorThrown
objeto para excepciones, es opcional
Cuando se produce un error HTTP, errorThrown recibe la parte textual del estado HTTP, como ‘Not Found‘ o ‘Internal Server Error‘, con este parámetro podemos sustituir sus opciones y configurarlo
- jqXHR
- global
activa el uso de varios eventos globales de Ajax
Su valor por defecto es trueUse false para evitar que los eventos globales ajaxStart o ajaxStop esten activos
- headers
encabezados adicionales enviados junto con la petición utilizando XMLHttpRequest, pudiendo modificar el objeto modificando el valor X-Requested-With: XMLHttpRequest
Tambien es posible cambiar el valor con el evento Ajax beforeSend (añadido en jQuery 1.5)
- ifModified
comprueba el valor de cabecera Last-Modified para ver si la última petición tuvo éxito
Su valor predeterminado es false, ignora el encabezado
Desde jQuery 1.4, también verifica el valor ‘etag‘ especificado por el servidor para capturar los datos no modificados
- isLocal
permite que el entorno actual sea reconocido como ‘local‘ (por ejemplo, el sistema de archivos), incluso si jQuery no lo reconoce como tal por defecto
Los protocolos siguientes son reconocidos actualmente como locales:
- file
- *-extension
- widget
Si la configuración de isLocal necesita ser modificada, se recomienda hacerlo con el método $.ajaxSetup() (añadido en jQuery 1.5.1)
- jsonp
sobreescribe la función de respuesta de las peticiones JSONP
Este valor será usado en lugar del ‘callback‘ en la cadena de consulta de la url cuando se añade ‘callback=?‘
Por ejemplo {jsonp:’onJSONPLoad’} devolvería al servidor ‘onJSONPLoad=?‘
A partir de jQuery 1.5, configurar jsonp a false evitar que jQuery agregue la cadena ‘?callback‘ a la URL o que intente usar ‘=?‘ al realizar la transformación
En este caso, debe establecerse explícitamente la configuración para jsonpCallback
Por ejemplo, { jsonp: false, jsonpCallback: ‘callbackName’ }
Por razones de seguridad, si el receptor objetivo no es de confianza, es recomendable configurar la propiedad jsonp a false
- jsonpCallback
especifica el nombre de la función de retorno para una petición JSONP
Este valor se utilizará en lugar del nombre aleatorio generado automáticamente por jQuery
Es recomendable dejar que jQuery genere ese nombre único, ya que facilitará la gestión de las peticiones y podrá controlar mejor los callbacks y las excepciones de error
Es posible especificar el retorno de la petición cuando esté habilitada la caché del navegador para peticiones GET
A partir de jQuery 1.5, también puede usar una función para configurarlo, en cuyo caso el valor de jsonpCallback se establece con el valor de retorno de esa función
- method
método HTTP que se utilirá en la petición (por ejemplo ‘POST‘, ‘GET‘, ‘PUT‘ (añadido en jQuery 1.9.0)
- mimeType
tipo mime que sobreescribe el tipo mime XHR (añadido en jQuery 1.5.1)
- password
contraseña que será utilizada con XMLHttpRequest como respuesta a una petición de autenticación de acceso HTTP
- processData
por defecto, los datos pasados a data (cualquier cosa que no sea una cadena) se procesará y transformarán a una cadena de consulta, que se ajustará al tipo de contenido predeterminado ‘application/x-www-form-urlencoded‘
Para enviar un DOMDocument u otros datos no procesados, configurelo a false
- scriptAttrs
define atributos adicionales para usar en las peticiones ‘script‘ o ‘jsonp‘
Donde:
- key
representa el nombre del atributo
- value
es el valor del atributo
Al recibir este objeto, se forzará el uso de la etiqueta de script un transporte
Por ejemplo, puede ser usado para declarar los atributos nonce, integrity o crossorigin para satisfacer los requisitos de la política de seguridad del contenido (añadido en jQuery 3.4.0)
- key
- scriptCharset
sólo se utiliza con el ‘script‘ de transporte
Define el atributo charset de la etiqueta de script utilizada en la petición
Es usado cuando el juego de caracteres en la página local no es el mismo que el del script remoto
Alternativamente, el atributo charset se puede definir con scriptAttrs, lo que también asegurará el uso del transporte ‘script‘
- statusCode
códigos numéricos HTTP y funciones que serán llamadas como respuesta a ese código
Por ejemplo, cuando el estado de respuesta sea 404, mostrará un aviso al usuario:
Si la petición es correcta, el código de estado de la función tomará los mismos parámetros que el retorno de la petición correcta; si se produce un error (incluida la redirección 3xx), tomará los mismos parámetros que el error de callback (añadido en jQuery 1.5 )
- success
evento Ajax llamada si la petición es correcta
Tiene los siguientes argumentos:
- data
datos devueltos por el servidor, formateados según el parámetro dataType o la función de callback dataFilter, si ha sido definida
- textStatus
cadena de texto que describe el estado
- jqXHR
(en jQuery 1.4.x, XMLHttpRequest)
A partir de jQuery 1.5, admite un array de métodos y cada uno será llamado por turno
- data
- timeout
establece un tiempo de espera (en milisegundos) para la petición
El valor 0 significa que no habrá tiempo de esperaEsto anulará cualquier tiempo de espera global definido con $.ajaxSetup()
El período de tiempo de espera comienza cuando se realiza la llamada a $.ajax
Si hay otras peticiones en curso y el navegador no tiene conexiones disponibles, es posible que alguna petición agote el tiempo de espera antes de que pueda ser enviada
A partir de jQuery 1.4.x, el objeto XMLHttpRequest tomará el estado de no válido si la petición agota el tiempo de espera
Acceder a cualquier campo del objeto puede generar una excepción
Solo en Firefox 3.0+, las solicitudes de script y JSONP no son canceladas mediante un tiempo de espera; el script se ejecutará incluso si es recibido después del tiempo de espera
- traditional
tomará el valor true si se desea utilizar el estilo tradicional de parametros serializados
- type
alias para method. Use type para versiones de jQuery anteriores a 1.9.0
- url
cadena que contiene la URL a la que se envía la petición
- username
nombre de usuario que será utilizado con XMLHttpRequest en respuesta a una solicitud de autenticación de acceso HTTP
- xhr
retorno de la petición para crear el objeto XMLHttpRequest
Su valor predeterminado es ActiveXObject cuando este disponible (IE), XMLHttpRequest en caso contrario
Sobreescribalo para proporcionar su propia implementación de XMLHttpRequest o alguna mejora propia
- xhrFields
define el objeto nativo XHR (añadido en jQuery 1.5.1 )
Por ejemplo, se puede usar para definir withCredentials a true para las peticiones cross-domain, si fuera necesario:
En jQuery 1.5, la propiedad withCredentials no es nativa para XHR y por lo tanto, las peticiones CORS (Control de acceso HTTP, Cross-Origin Resource Sharing
) que la requieran la ignoraránPor esta razón, te recomiendo usar jQuery 1.5.1+ en caso de que requiera ser usada