Saltar la navegación

AJAX

Ajax es una tecnología. que permite la comunicación asíncrona. Las siglas provienen de Asynchronous JavaScript And XML. Javascript permite hacer la comunicación asíncrona, luego se envian datos al servidor, los cuales están en formato XML.

A pesar de que AJAX nación con la idea de enviar datos en XML, al día de hoy no solo es posible enviar los datos en XML, sino también en un formato bastante popular: JSON (Notación de objetos de JavaScript).

AJAX permite enviar y leer datos al servidor, todo esto en "segundo plano". En segundo plano significa que una vez cargada una página HTML, es posible recibir datos del servidor, leerlos y agregar el contenido enviado a la página HTML previamente cargada. En términos técnicos, la recepción de datos se la realiza de manera "asíncrona", por un lado existe un hilo que carga la página web y por otro lado un hilo que recibe la información de servidor y la actualiza en la página que está en el hilo 1.

Aplicando AJAX

En términos generales, la aplicación de AJAX consiste en 4 simples pasos:

  1. Crear un objeto XML HttpRequest
  2. Asignar la función que responde al evento
  3. Configurar la solicitud
  4. Enviar la solicitud

Revisa el siguiente ejemplo donde aplicamos estos 4 pasos.

Tema adicional: El formato JSON

  • Es un formato para estructurar datos en forma de texto y transmitirlo de un sistema a otro.
    • Otro formato conocido es XML
  • Su especificación surgió en el año 2000 y pasó a formar parte de JS después del lanzamiento de la versión 5 de ECMAScript.
  • Es independiente del lenguaje de programación
  • Usado ampliamente en las peticiones con AJAX.
  • JSON = JavaScript Object Notation
  • Estructura básica: Los datos se estructura con
    • Clave: Identificador del contenido (debe estar en comillas porque es un String)
    • Valor: Contenido correspondiente a la Clave. Pueden almacenarse tipos de datos como  string, array, object, number, boolean, null.
  • Reglas de Formato: Los datos deben seguir la siguiente notación...
    • Llaves { } .- Sirve para delimitar objetos y son obligatorias para iniciar y terminar el contenido
    • Corchetes [ ] .- indican un array
    • Dos puntos : usados para separar la clave y su valor
    • Coma , para separar elementos

Pulsa en "Mostrar Retroalimentación" para ver ejemplos de la notación en JSON.

Habilitar JavaScript