Unidad 5.1.

Comunicación asíncrona XMLHTTPREQUEST

 Modelos de comunicación
 Objeto XMLHttpRequest
 Unidad 5.1.
Comunicación asíncrona
Modelos de comunicación

COMUNICACIÓN SÍNCRONA: JavaScript espera a que se produzca la respuesta del servidor antes de
continuar con la ejecución del código
Sesión

Cómputo en el
Cliente servidor
bloqueado

COMUNICACIÓN ASÍNCRONA: La ejecución del código JavaScript continúa sin esperar a la respuesta.
Utilizaremos un manejador de eventos para buscar la respuesta del servidor

Cómputo en el Servicio
Cliente
 Unidad 5.1.
Comunicación asíncrona
Modelos de comunicación CLIENTE
Navegador
COMUNICACIÓN CLÁSICA
Interfaz de usuario
• Continuas recargas de la página
CLIENTE Llamada
• Información actualizada a partir del comportamiento JavaScript HTML+CSS
del usuario. Navegador
• Condiciona la petición realizada al servidor Interfaz de usuario Motor AJAX
• Envío continuo de formularios con datos al servidor lo
que conlleva sobrecarga en la red
Comunicación HTTP
• Imposibilidad de interactuar con otro elemento de la
HTML+CSS Comunicación HTTP
página hasta que no se ha cargado nuevamente
Petición HTTP Datos

COMUNICACIÓN MEDIANTE AJAX Bases de Datos

• Procesos en segundo plano Bases de Datos
• Se elimina la necesidad de recarga de la página Servidor Web
• Cambios y/o actualizaciones parciales
• El motor AJAX se encarga de gestionar las peticiones SERVIDOR Servidor Web
del usuario, y de comunicarse con el servidor. Permite que COMUNICACIÓN CLÁSICA SERVIDOR
la interacción suceda de forma asíncrona
COMUNICACIÓN MEDIANTE AJAX
 Unidad 5.1.
Comunicación asíncrona
Modelos de comunicación
AJAX son muchas tecnologías distintas pero que se unen con los siguientes objetivos:
• Conseguir una presentación basada en estándares, usando HTML, CSS y un uso amplio de técnicas del DOM, para
poder mostrar la información de forma dinámica e interactiva
• Intercambio y manipulación de datos JSON
• Recuperación de datos de forma asíncrona, usando el objeto XMLHTTPRequest
• Uso de JavaScript, para unir todos los componentes

Mostrar
información
Inicio
comunicación
con el servidor

Crea fragmentos
de la página
 Unidad 5.1.
Comunicación asíncrona
Modelos de comunicación

En la programación back-end , saber que un servicio puede ser destino de peticiones AJAX, hace que los
servicios se programen de forma más eficiente e independiente. Este tipo de paradigma (conocido como SaaS)
ha impulsado un mayor desarrollo y eficiencia de las aplicaciones web
Puede incrementar el tráfico hacia los servidores de Internet. El hecho de que podamos realizar peticiones http
a servicios de Internet, puede facilitar la creación de aplicaciones que hagan peticiones http constantemente.
Ante esto, muchos servidores usan protección anti CORS -Cross-Origin Resource Sharing, Intercambio de
Recursos de Origen cruzado-

Para que los servicios de internet se protejan y solo resuelvan peticiones

procedentes de dominios validados, se ideó una norma que ahora es
parte del protocolo http. Los datos sobre CORS se colocan en la
cabecera de los paquetes http y permiten una vía de comunicación
entre el navegador y el servidor web que asegura que se cumplen las
normas establecidas
application/json Unidad 5.1.
Comunicación asíncrona
Modelos de comunicación
Métodos de envío al servidor. GET y POST
La diferencia entre ambos es la forma del envío de datos

• GET  los parámetros se concatenan a la URL accedida

- Suele utilizarse para peticiones de lectura
- Se utiliza cuando se accede a un recurso que depende de la información proporcionada por el usuario
- Tiene límite en la cantidad de datos a enviar (512 bytes)
Los parámetros se envían como una serie de pares clave/valor concatenados por símbolos &
https://localhost/aplication.php? parametro1=valor&parametro2=valor

• POST  los datos se envían de forma que no pueden verse (en un segundo plano u "ocultos" al usuario)
- Se utiliza en operaciones que crean, borran o actualizan información

La cadena que contiene los parámetros se debe construir manualmente

xmlhttp.setRequestHeader("Content-type", "application/json");
xmlhttp.send(cadenaParams);
 Unidad 5.1.
Comunicación asíncrona
Modelos de comunicación
Métodos de envío al servidor. GET y POST

Aspecto Con GET Con POST

Los datos son visibles en la url SI NO

Los datos pueden permanecer en el historial del navegador SI NO

Una url puede ser guardada conteniendo parámetros de un envío SI NO

de datos
Existen restricciones en la longitud de los datos enviados
Se considera preferible para envío de datos sensibles (datos
privados como contraseñas, números de tarjeta bancaria, etc.)
Sí (no se puede superar la longitud NO
máxima de una url)
No (los datos además de ser visibles Sí (sin que esto signifique que por usar
pueden quedar almacenados en logs) post haya seguridad asegurada)

Restricciones de tipos de datos Sí (sólo admite caracteres ASC-II) No (admite tanto texto como datos
binarios p.ej. archivos)
Riesgo de cacheado de datos recuperados en los navegadores SI NO

Posibles ataques e intentos de hackeo Sí (con más facilidad) Sí (con menos facilidad)
 Unidad 5.1.
Comunicación asíncrona
Objeto XMLHttpRequest

El corazón de AJAX es una API denominada XMLHTTPRequest

XMLHTTPRequest juega un papel muy importante en la técnica AJAX, ya que sin este objeto, no sería posible
realizar las peticiones asíncronas al servidor
Permite la transferencia de datos desde los script del navegador (JavaScript, Jscript, VBScript,… ) a los del
servidor (Python, PHP, Perl, ASP, ….) y viceversa

Estos datos, podrán ser utilizados para modificar el DOM del documento actual, sin tener que recargar la
página, o también podrán ser evaluados con JavaScript, si son recibidos en formato JSON
Realiza la comunicación en segundo plano

Una de las limitaciones de XMLHTTPRequest es que, por seguridad, sólo nos deja realizar peticiones AJAX,
a las páginas que se encuentren hospedadas en el mismo Dominio, desde el cuál se está realizando la
petición AJAX
 Unidad 5.1.
Comunicación asíncrona
Objeto XMLHttpRequest
Navegador Web Petición
XMLHttpRequest XMLHttpRecuest
2
Servidor Web
XMLHttpRequest
respuesta
Ocurre un evento
información Se procesa HttpRequest
• Se crea el objeto 4 • Se crea una respuesta
XMLHttpRequest Petición • Envía los datos al cliente
• Enviamos HttpRequest Intercambio de
JavaScript HTML y CSS 5 datos
1 3

Interfaz de usuario Fuentes de datos

página web
• Recibimos respuesta
1. Instanciar el objeto XMLHttpRequest • Se procesan los datos devueltos
2. Realizar la petición al servidor usando JavaScript
• Cargamos el contenido en la página
3. Preparar la función de respuesta
4. Ejecutar la función de respuesta
5. Recibe la respuesta
 Unidad 5.1.
Comunicación asíncrona
Objeto XMLHttpRequest
1. Instanciar el objeto XMLHttpRequest
objetoAjax = new XMLHttpRequest();

2. Creación de la petición al servidor

open(method,url,[async],[user],[password])
• method: Método de envío. GET, POST, PUT, DELETE (más habituales dos primeros)
• url: Dirección url dónde realizar la petición
• async: Determina si la petición se realiza de forma síncrona o asíncrona. Predeterminado true (asíncrona).
• user: Identificador del usuario para autentificación básica (HTTP) si se requiere.
• password: Contraseña asociada a la cuenta especificada en el parámetro anterior
 Unidad 5.1.
Comunicación asíncrona
Objeto XMLHttpRequest

3. Realización de la petición al servidor

Realiza la petición de acuerdo a la configuración realizada en open
send(); Envía los datos al servidor (usado por GET)
send(datos); Envía los datos al servidor (usado por POST)
Debido a que, de forma predeterminada, las llamadas Ajax son asíncronas, la respuesta del servidor no esta disponible de
forma inmediata
Es necesario especificar una función de devolución de llamada; dicha función se ejecutará cuando la petición se haya
realizado de forma correcta ya que es en ese momento cuando la respuesta del servidor esta lista
objetoAjax.onreadystatechange=function{ } define el manejador de eventos para capturar la respuesta.
Se ejecutará cada vez que readyState cambie de valor
 Unidad 5.1.
Comunicación asíncrona
Objeto XMLHttpRequest
Eventos de respuesta al envío de datos del servidor
Los tres eventos utilizados son:

• load – cuando la solicitud está; completa (incluso si el estado HTTP es 400 o 500), y la respuesta se descargó por
completo.
• error – cuando la solicitud no pudo ser realizada satisfactoriamente, ej. red caída o una URL inválida.
• progress – se dispara periódicamente mientras la respuesta está siendo descargada, reporta cuánto se ha
descargado.
objetoAjax.onload = function()
{ //Se procesa la respuesta del servidor
};
objetoAjax.onerror = function()
{ //Se procesa el error en la respuesta del servidor
};
objetoAjax.onprogress = function(event)
{// event.loaded - cuántos bytes se han descargado
// event.lengthComputable = devuelve true si el servidor envía la
cabecera Content-Length (longitud del contenido)
// event.total - número total de bytes (si `lengthComputable` es `true`)
};
 Unidad 5.1.
Comunicación asíncrona
Objeto XMLHttpRequest
Respuesta del servidor
readyState cambia cuando se realiza una petición y se recibe la respuesta
0 sin inicializar. Objeto creado pero no se ha llamado al método open()
1 cargando. Se ha llamado a open() pero la petición no se ha enviado
2 cargado. La petición se ha enviado
3 interactivo. Se ha recibido una respuesta parcial
4 completo. Se ha recibido todos los datos
Propiedades para recuperar los datos del servidor:
reponseText Propiedad. Devuelve una cadena que contiene el cuerpo de la respuesta
status Devuelve el código del estado HTTP de la transmisión devuelto por el servidor web. Comprueba que no ha
habido errores en la comunicación con el servidor. Combinar con readyState
100 Respuesta provisional
200 Transmisión correcta
404 Enlace mal efectuado/programado

statusText Contiene el texto descriptivo del estado

 Unidad 5.1.
Comunicación asíncrona
Objeto XMLHttpRequest: Ejemplo 1

Petición del cliente (Javascript): Comunicación entre cliente y servidor, sin

pasar datos en la petición, y la respuesta
// Crear una instancia de XMLHttpRequest
var xhttp = new XMLHttpRequest(); consiste en la cadena de texto:
// Definir la función que se ejecutará cuando la solicitud se complete ¡Hola desde PHP¡
xhttp.onreadystatechange = function() { Usa GET.
if (this.readyState == 4 && this.status == 200) {
// La solicitud ha tenido éxito y la respuesta está lista
console.log(this.responseText);
}
};
// Especificar el tipo de solicitud y la URL a la que se enviará
xhttp.open("GET", "archivo.php", true);
// Enviar la solicitud
xhttp.send(); Respuesta del servidor (php):
<?php
header("Access-Control-Allow-Methods: *");
header("Access-Control-Allow-Headers: Content-
Type");
// Realizar alguna operación en el servidor
$resultado = "¡Hola desde PHP!";
// Devolver la respuesta al cliente (JavaScript)
echo $resultado;
?>
 Unidad 5.1.
Comunicación asíncrona
Objeto XMLHttpRequest: Ejemplo 2

Petición del cliente (Javascript): Comunicación entre cliente y servidor, sin

pasar datos en la petición, y la respuesta
function realizarPeticion() {
// Crear una instancia de XMLHttpRequest consiste en un objeto JSON obtenido a
var xhttp = new XMLHttpRequest(); partir de un array.
// Configurar la función que se ejecutará cuando la solicitud se Usa GET
complete
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// La solicitud ha tenido éxito y la respuesta está
lista
var respuesta = JSON.parse(this.responseText); Respuesta del servidor (php):
alert(respuesta.mensaje);
} <?php
}; // Crear un array con un mensaje de respuesta
xhttp.open("GET", "ejemplo.php", true); $respuesta = array("mensaje" => "¡Hola desde PHP!");
xhttp.send(); } // Convertir el array a formato JSON
$respuesta_json = json_encode($respuesta);
// Establecer las cabeceras para indicar que la respuesta es JSON
header("Content-Type: application/json");
header("Access-Control-Allow-Origin: *"); // Permitir cualquier
origen (solo para pruebas, ajustar en producción). CORS
// Imprimir la respuesta JSON
echo $respuesta_json;
?>
 Unidad 5.1.
Comunicación asíncrona
Objeto XMLHttpRequest: Ejemplo 3 – Parte 1--

Petición del cliente (Javascript):

function buscarEmpleado() { Comunicación entre cliente y servidor,
var formulario = document.getElementById('formulario');
var dni = formulario.elements['dni'].value;
pasando un dni, en formato JSON en la
// Crear un objeto JSON con el DNI petición, y la respuesta consiste en un
var datosEmpleado = { dni: dni }; objeto JSON obtenido a partir de un array,
var xhttp = new XMLHttpRequest(); después de consultar en la base de datos.
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { Usa POST
var respuesta = JSON.parse(this.responseText);
if (respuesta.error) {
alert(respuesta.error);
} else { respuesta.nombre
document.getElementById('resultado').innerHTML = "Nombre: " + empleado.nombre;
…….
}
}
};
xhttp.open("POST", "buscarEmpleado.php", true);
xhttp.setRequestHeader("Content-type", "application/json"); // Establecer la cabecera "Content-type" para
indicar que se está enviando JSON
// Convertir el objeto JSON a una cadena y enviarlo en el cuerpo de la solicitud
xhttp.send(JSON.stringify(datosEmpleado));
 Unidad 5.1.
Comunicación asíncrona
Objeto XMLHttpRequest: Ejemplo 3 – Parte 2--
Conectar.php:
$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
Respuesta del servidor (php): $bd_base = "prueba";
$conexion = new mysqli($bd_host, $bd_usuario,
$bd_password);
<?php
if ($conexion) {
// Incluir conexión a la base de datos
$conexion->select_db($bd_base);
include_once “conectar.php";
mysqli_set_charset($conexion,"utf8");
// Obtener el cuerpo de la solicitud POST como cadena JSON
}
$jsonData = file_get_contents('php://input');
// Convertir la cadena JSON a un array asociativo de PHP
$datosEmpleado = json_decode($jsonData, true);
// Obtener el DNI del array
$dniBuscado = $datosEmpleado['dni'];
// Consulta SQL para obtener los datos del empleado por DNI
$sql = "SELECT * FROM empleados WHERE dni = '$dniBuscado'";
$result = $conexion->query($sql);
 Unidad 5.1.
Comunicación asíncrona
Objeto XMLHttpRequest: Ejemplo 3 – Parte 3--
Respuesta del servidor (php):
// Verificar si se encontraron resultados
if ($result->num_rows > 0) {
// Convertir el resultado a formato JSON
$empleado = $result->fetch_assoc(); //obtiene un array asociativo de strings
$resultado = json_encode($empleado);
// Establecer las cabeceras para indicar que la respuesta es JSON
header("Content-Type: application/json");
header("Access-Control-Allow-Origin: *");
// Imprimir la respuesta JSON
echo $resultado;
} else
{ // Si no se encontraron resultados, devolver un mensaje de error
$error = json_encode(array("error" => "Empleado no encontrado"));
header("Content-Type: application/json");
header("Access-Control-Allow-Origin: *");
}
// Cerrar la conexión a la base de datos
$conexion->close();
?>
 Unidad 5.1.
Comunicación asíncrona
Objeto XMLHttpRequest
Propiedad Descripción
readyState Valor numérico (entero) que almacena el estado de la petición
responseText El contenido de la respuesta del servidor en forma de cadena de texto
responseXML El contenido de la respuesta del servidor en formato XML. El objeto devuelto se puede procesar
como un objeto DOM
status El código de estado HTTP devuelto por el servidor (200 para una respuesta correcta, 404 para "No
encontrado", 500 para un error de servidor, etc.)
statusText El código de estado HTTP devuelto por el servidor en forma de cadena de texto: "OK", "Not Found",
"Internal Server Error", etc.
Valor Descripción
Los valores definidos para la 0 No inicializado (objeto creado, pero no se ha invocado el método open)
propiedad readyState son
los siguientes: 1 Cargando (objeto creado, pero no se ha invocado el método send)
2 Cargado (se ha invocado el método send, pero el servidor aún no ha respondido -recibidas las
cabeceras-)
3 Interactivo (se han recibido algunos datos, aunque no se puede emplear la propiedad responseText)
4 Completo (se han recibido todos los datos de la respuesta del servidor)
 Unidad 5.1.
Comunicación asíncrona
Objeto XMLHttpRequest
Método Descripción
abort() Detiene la petición actual

getAllResponseHeaders() Devuelve una cadena de texto con todas las cabeceras de la respuesta del servidor

getResponseHeader("cabecera") Devuelve una cadena de texto con el contenido de la cabecera solicitada

onreadystatechange Responsable de manejar los eventos que se producen. Se invoca cada vez que se
produce un cambio en el estado de la petición HTTP. Normalmente es una referencia a
una función JavaScript

open("metodo", "url") Establece los parámetros de la petición que se realiza al servidor. Los parámetros
necesarios son el método HTTP empleado y la URL destino (puede indicarse de forma
absoluta o relativa)

send(contenido) Realiza la petición HTTP al servidor

setRequestHeader("cabecera", Permite establecer cabeceras personalizadas en la petición HTTP. Se debe invocar el

"valor") método open()antes que setRequestHeader()
 Unidad 5.1.
Comunicación asíncrona

PRÁCTICA

En una base de datos disponemos de una tabla con la información de los

alumnos de una clase (DNI, Nombre y Población).
Realizar una página que:

1. Consulte un alumno determinado

2. Dar de alta a un alumno que no exista una poblacion pedida

3. Obtenga el listado de todos los alumnos de Albacete