Tutoriales básicos de AJAX

Introducción a AJAX

AJAX permite actualizar el contenido de la página web "asincrónicamente" intercambiando datos con el servidor web de fondo.

Esto significa que se pueden actualizar partes de la página web sin recargar toda la página.

Con AJAX, puedes:

Enviar datos al servidor web (en segundo plano)
Leer datos del servidor web (después de que la página se haya cargado)
Actualizar la página web sin recargarla

Ejemplo AJAX

El siguiente código muestra un ejemplo básico de AJAX:

AJAX cambiará este texto

Ejecutar el código

Explicación del ejemplo AJAX

El ejemplo anterior incluye las siguientes partes:

Código HTML:

　　<!DOCTYPE html>
　　<html>
　　
　　<div id="output">
　　<h2>AJAX cambiará este texto</h2>
　　<button onclick="fetchDoc()" type="button">Enviar solicitud</button>
　　</div>
　　
　　</html>

El código HTML contiene un<div>parte (<h2>y<button>)

la<DIV>parte se utiliza para mostrar información procedente del servidor.

la<button>Llamar a una función (al hacer clic).

Esta función solicita datos del servidor web y los muestra (sin recargar la página):

Función fetchDoc():

　　function fetchDoc() {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　if (this.readyState ===　4　&& this.status ===　200) {
　　　　document.getElementById("output").innerHTML = this.responseText;
　　　}
　　};
　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();
　　}

¿Qué es AJAX?

AJAX es “Asynchronous Javascript And XML” (JavaScript y XML asincrónicos).

AJAX no es un lenguaje de programación, es una tecnología para acceder a servidores web desde una página web.

AJAX le permite enviar solicitudes al servidor sin recargar la página.

AJAX puede comunicarse con el servidor, intercambiar datos y actualizar la página sin recargarla.

AJAX puede enviar y recibir información en varios formatos, incluyendo JSON, XML, HTML y archivos de texto.

En resumen, es usar el objeto XMLHttpRequest para comunicarse con el servidor.

Las dos principales funciones de AJAX le permiten realizar lo siguiente:

Enviar solicitudes al servidor sin recargar la página
Recibir y procesar datos del servidor

¿Cómo funciona AJAX?

Para ejecutar la comunicación AJAX, JavaScript utiliza un objeto XMLHttpRequest para enviar una solicitud HTTP al servidor y recibir datos como respuesta.

Todos los navegadores modernos (Chrome, Firefox, IE)7 +y Opera) también soportan el objeto XMLHttpRequest.

La siguiente imagen ilustra cómo funciona la comunicación AJAX:

Pasos de la operación AJAX

Se produjo un evento en la página web (por ejemplo, se cargó la página o se hizo clic en un botón)
El objeto XMLHttpRequest se crea con JavaScript
El objeto XMLHttpRequest envía la solicitud al servidor web
El servidor procesa la solicitud
El servidor envía la respuesta de vuelta a la página web
La respuesta se lee con JavaScript
HTML DOM se actualiza con JavaScript

Qué aprenderá

En el siguiente capítulo de este tutorial, aprenderá:
Cómo crear el objeto XMLHttpRequest
Cómo enviar datos al servidor web (en segundo plano)
Cómo leer datos del servidor web (en segundo plano)
Cómo actualizar una página web sin recargarla

AJAX XMLHttpRequest