TECNOLÓGICO NACIONAL DE MÉXICO

Instituto Tecnológico de Matehuala

INSTITUTO TECNOLÓGICO DE MATEHUALA

REPORTE. 3.4 Acceso asíncrono al servidor

web con XMLHttpRequest

EDUARDO ENRIQUE MOLINA ESPARZA

14660251

INGENIERÍA EN SISTEMAS COMPUTACIONALES

MATEHUALA, S.L.P. ABRIL, 2018

Índice Página
INTRODUCCIÓN .............................................................................................................................. 3

DESARROLLO ................................................................................................................................. 4

¿Qué es XMLHttpRequest? ..................................................................................................... 4

Propiedades ................................................................................................................................. 4

Métodos ........................................................................................................................................ 6

Características ............................................................................................................................ 8

¿Qué quiere decir Asíncrono?................................................................................................ 8

EJEMPLO.......................................................................................................................................... 9

Pantallas de ejecución ............................................................................................................ 10

DOCUMENTACIÓN DEL CÓDIGO ............................................................................................ 10

Fichero html ............................................................................................................................... 10

Fichero php ................................................................................................................................ 11

CONCLUSIÓN ................................................................................................................................ 12

REFERENCIAS .............................................................................................................................. 12
INTRODUCCIÓN
El siguiente reporte muestra el acceso asíncrono a un servidor web pero con la
implementación del objeto XMLHttpRequest, pero para comprender bien habrá que
comentar la técnica AJAX.

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es

una técnica 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 comunicación asíncrona con el servidor en segundo
plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de
recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan
al servidor y se cargan en segundo plano sin interferir con la visualización ni el
comportamiento de la página, aunque existe la posibilidad de configurar las peticiones
como síncronas de tal forma que la interactividad de la página se detiene hasta la espera
de la respuesta por parte del servidor.

JavaScript es un lenguaje de programación (scripting language) en el que normalmente se

efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza
mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier
caso, no es necesario que el contenido asíncrono esté formateado en XML.

Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas
operativos y navegadores dado que está basado en estándares abiertos como JavaScript
y Document Object Model (DOM).

El propósito es demostrar como funciona el objeto aquí tratado, especificando algunos de

los aspectos más importantes como son la definición, sus características principales y la
demostración de uno o varios ejemplos.

pág. 3
 DESARROLLO
¿Qué es XMLHttpRequest?
API que se encuentra implementado en el navegador y que proporciona los métodos y
propiedades necesarios para la comunicación con el servidor mediante HTTP.
Originalmente desarrollado por Microsoft como un objeto ActiveX, disponible desde
Internet Explorer 5.
Utilizada por JavaScript, Jscript, VBScriptu otros lenguajes de scripting de navegadores
web.
Proporciona una forma fácil de obtener información de una URL sin tener que recargar la
página completa. Una página web puede actualizar sólo una parte de la página sin
interrumpir lo que el usuario está haciendo. XMLHttpRequest es ampliamente usado en la
programación AJAX.

A pesar de su nombre, XMLHttpRequest puede ser usado para recibir cualquier tipo de
dato, no solo XML, y admite otros formatos además de HTTP (incluyendo file y ftp).

Propiedades
Atributo Tipo Descripción
El canal es usado por el objeto cuando se
produce el pedido. Esto da null si el canal
channel nsIChannel aún no fue creado. En el caso de un
pedido de múltiples partes, este es el
canal inicial, no las diferentes partes del
pedido múltiple. Es necesario tener
privilegios elevados para acceder; sólo
lectura.
Indica si el objeto representa o no un
mozBackgroundRequest booleano pedido de un servicio de fondo. Si es true,
no se asocia una carga de grupo con el
pedido, y los diálogos de seguridad no se
muestran al usuario. Es necesario tener
privilegios elevados para acceder.
La respuesta al pedido en la forma de
mozResponseArrayBuffer ArrayBuffer un arreglo de JavaScript. Esto es
NULL si el pedido no fue exitoso o si
todavía no ha sido enviado. Sólo
lectura.
Indica cuando se espera que la
multipart booleano respuesta sea o no una serie de
mútiples documentos XML. Si se
define como true, el tipo de contenido
de la respuesta inicial debe ser
multipart/x-mixed-replace u ocurrirá
un error. Todos los pedidos deben ser
asincrónicos.
Una función del objeto JavaScript que
onreadystatechange nsIDOMEventListener se llama cuando el atributo readyState

pág. 4
 cambia. El callback se llama desde la
interfaz del usuario.

Aviso: Esto no debe ser usado desde

código nativo. Tampoco debes usarlo
con pedidos sincrónicos.

readyState long

La respuesta al pedido como un objeto

DOMDocument, o null si el pedido no fue
exitoso, aún no fue enviado o no puede
ser analizado como XML. La respuesta es
analizada como si fuera text/xml. Sólo
lectura.
responseXML nsIDOMDocument
Nota: Si el servidor no aplica el
encabezado de tipo de contenido
text/xml, puedes usar
overrideMimeType() para forzar a
XMLHttpRequest a analizarlo como XML
igualmente.

El estado de la respuesta al pedido. Éste

Status unsigned long es el código HTTPresult (por ejemplo,
status es 200 por un pedido exitoso). Sólo
lectura.
La cadena de respuesta que devuelve el
statusText AUTF8String HTTPserver. A diferencia de status, este
incluye el texto completo del mensaje de
respuesta ("200 OK", por ejemplo). Sólo
lectura.
upload nsIXMLHttpRequestUpload El proceso de subida puede ser rastreado
al agregar un registro de evento a upload.

pág. 5
Métodos
abort()
Aborta el pedido si éste ya fue enviado.
void abort();
getAllResponseHeaders()
Devuelve todos los encabezados de respuesta como una cadena.
Nota: Para pedidos multi partes, esto devuelve los encabezados de la parte actual
del pedido, no del canal original.
string getAllResponseHeaders();
Valor devuelto
El texto de todos los encabezados de respuesta, o null si no se ha recibido
ninguna respuesta.
getResponseHeader()
Devuelve el texto de un encabezado específico.
ACString getResponseHeader(
in AUTF8String header
);

Parámetros
header

El nombre del encabezado buscado.

Valor devuelto
Una cadena que contiene el texto de un encabezado específico, o null tanto
si la respuesta no se ha recibido o el encabezado no existe en la respuesta.
Init()
Inicializa el objeto para que sea usado desde código C++.
Aviso: Este método no debe ser llamado desde JavaScript.

[noscript] void init(

in nsIPrincipal principal,
in nsIScriptContext scriptContext,
in nsPIDOMWindow ownerWindow
);

pág. 6
Parámetros
Principal
El principal para usar en el pedido; no debe ser null.
scriptContext
El contexto del programa que usará en el pedido; no debe ser null.
ownerWindow
La ventana asociada con el pedido; puede ser null.
open()
Inicializa el pedido. Este método es para ser usado desde código JavaScript, para
inicializar un pedido desde código nativo, debes usar openRequest().
Nota: Llamar a este método en un pedido activo (uno para el cual open() o openRequest()
ya han sido llamados) es equivalente a usar abort().
void open(
in AUTF8String method,
in AUTF8String url,
[optional] in boolean async,
[optional] in AString user,
[optional] in AString password
);
Parámetros
method
El método HTTP a usar: tanto "POST" o "GET". Se ignora para urls que no
son de HTTP.

url
La URL a la que se envía el pedido.

async
Un parámetro booleano opcional, predeterminado es true, que indica si se
debe o no realizar la operación de forma asíncrona. Si este valor es false, el
método send() no se devuelve hasta que se reciba la respuesta completa. Si
es true, la notificación de una transacción completada se proporciona
mediante los oyentes de eventos. Esto debe ser true si el atributo multipart es
verdadero o se lanzará una excepción.
user
El nombre de usuario es opcional solo es usado con fines de autenticación,
de forma predeterminada es una cadena vacía.
password
La contraseña es opcional solo es usado con fines de autenticación, de
forma predeterminada es una cadena vacía.

pág. 7
Características
 Emplea un canal de conexión independiente
 Comunicación GET/POST
 Documentos pueden ser texto plano/xml
 Trabaja en background
 Número limitado de peticiones
 Permite especificar un manejador para el control de cambios de estado
 Manejador notifica el estado de la petición:
- Inicializada
- Iniciada
- En proceso de retornar la información
- Operación completada

¿Qué quiere decir Asíncrono?

El AJAX normalmente es asíncrono y se denomina comunicación asincrónica al proceso
comunicativo que se lleva a cabo sin coincidencia temporal. Esto quiere decir que la
emisión y la recepción de los mensajes están separadas por un cierto periodo de tiempo.

El Javascript puede seguir haciendo “otras cosas” mientras se recibe la respuesta del
servidor. En el caso síncrono el usuario podría pensar que el navegador se ha bloqueado
o se ha colgado el script, si la respuesta del servidor tarda mucho.

pág. 8
EJEMPLO
En el fichero HTML tenemos un contenido HTML que incluye un formulario donde se
permite elegir entre varios países (España, México, Argentina, Colombia) y el atributo
value asociado a cada opción es exactamente el que espera recibir el fichero php.

Además tenemos algunos estilos definidos con CSS.

Finalmente tenemos un código JavaScript con una función denominada

mostrarSugerencia(str). Esta función se ejecuta como respuesta al evento onchange que
se produce cuando el usuario elige un país en el combobox desplegable del formulario. Al
elegirse un país se pasa a la función this.value, que contiene el atributo value del
elemento del combobox elegido. Los valores posibles son none, spain, mexico, argentina
y colombia.

En el código html se ha dejado un div con id listaCiudades que se encuentra vacío (<div
id="listaCiudades"> </div>). En este div es donde tenemos previsto mostrar las ciudades
que recuperemos del servidor en función de la opción elegida por el usuario, usando Ajax
para ello.

Nuestro fichero php es un fichero que contiene información en forma de arrays sobre
países y ciudades que pertenecen a esos países. En concreto se utilizan cuatro países:
España, México, Argentina y Colombia, y para cada país se definen las principales
ciudades utilizando un array o arreglo. Así por ejemplo $ciudad[3][4] es el elemento del
array ciudad con primer índice 3 y segundo índice 4. En este ejemplo el primer índice
indica el país (0 España, 1 México, 2 Argentina y 3 Colombia) y el segundo índice la
ciudad (en este caso la ciudad con índice 4). $ciudad[3][4] es “Cartagena”. Estamos
usando arrays con índice inicial cero, por tanto $ciudad[3][4] se lee como “quinta ciudad
(índice cuatro) del cuarto país (índice 3)”. Para cada país se definen un grupo de
ciudades.En el fichero php se recupera (o se trata de recuperar) un parámetro usando
REQUEST. Request nos permite recuperar tanto parámetros pasados por post como por
get. Una vez identificado el parámetro esperado, que es el nombre de un país entre none,
spain, mexico, argentina, colombia, se procede a comprobar si el parámetro pais recibido
coincide con alguno de estos valores. En caso de recibirse none o un valor extraño, el
resultado o ejecución del fichero devuelve un código HTML que se define en la última
línea mediante una sentencia echo. El código HTML devuelto es la concatenación de una
variable $msg y otra variable $ciudadesRespuesta.

pág. 9
Pantallas de ejecución

DOCUMENTACIÓN DEL CÓDIGO

Fichero html
<!DOCTYPE html><html><head><title>Cursos aprende a programar</title><meta charset="utf-8">
<!-- En esta clase se define el estilo de la página desplegando una lista
de países, dado que al seleccionar una de estas realiza la función de
recuperar los datos -->
<style type="text/css">
*{font-family:sans-serif;} a:link {text-decoration:none;} select{font-size:18px;}
div div {color: blue; background-color:#F1FEC6; font-size: 20px; float:left; border: solid; margin: 20px; padding:15px;}
</style>
<!-- A partir de aquí se ejecuta la función -->
<script>
function mostrarSugerencia(str) {
//Variables que se necesitan para realizar la función
var xmlhttp;
var contenidosRecibidos = new Array();
var nodoMostrarResultados = document.getElementById('listaCiudades');
var contenidosAMostrar = '';
//Si el parámetro str tiene una longitud de 0 se van recuperar el contenido en el objeto txtInformación
if (str.length==0) { document.getElementById("txtInformacion").innerHTML=""; nodoMostrarResultados.innerHTML = '';
return; }
//Creación del objeto XMLHttpRequest
xmlhttp=new XMLHttpRequest();
//Llamada a la función desde la interfaz
xmlhttp.onreadystatechange = function() {
//Se reciben los datos recuperados
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
contenidosRecibidos = xmlhttp.responseText.split(",");
document.getElementById("txtInformacion").innerHTML=contenidosRecibidos[0];

pág. 10
 for (var i=1; i<contenidosRecibidos.length;i++) {
//Muestra los datos
contenidosAMostrar = contenidosAMostrar+'<div id="ciudades'+i+'"> <a href="http://aprenderaprogramar.com">' +
contenidosRecibidos[i]+ '</a></div>';
}
//La propiedad innerHTML establece o devuelve el contenido HTML (HTML interno) de un elemento.
nodoMostrarResultados.innerHTML = contenidosAMostrar;
}
}

xmlhttp.open("GET"," datosCU01206F.php?pais="+str);
xmlhttp.send();
}

</script>
</head>
<body style="margin:20px;">
<h2>Elige un país:</h2>
<form action="">
<select onchange="mostrarSugerencia(this.value)">
<option value="none">Elige</option>
<option value="spain">España</option>
<option value="mexico">México</option>
<option value="argentina">Argentina</option>
<option value="colombia">Colombia</option>
</select>
</form>
<br/>
<p>Informacion sobre operacion en segundo plano con Ajax: <span style="color:brown;" id="txtInformacion"></span></p>
<div id="listaCiudades"> </div>
</body>
</html>

Fichero php
<meta charset = "utf-8"/>
<?php // Datos
//Este fichero contiene información en forma de arrays
//Dónde el primer valor se define al país y el segundo a las ciudades
$pais[0]="spain"; $pais[1]="mexico"; $pais[2]="argentina"; $pais[3]="colombia";
$ciudad[0][0]="Madrid"; $ciudad[0][1]="Barcelona"; $ciudad[0][2]="Valencia"; $ciudad[0][3]="Sevilla";
$ciudad[0][4]="Zaragoza"; $ciudad[0][5]="Málaga"; $ciudad[0][6]="Murcia";
$ciudad[1][0]="México D.F."; $ciudad[1][1]="Ecatepec"; $ciudad[1][2]="Guadalajara"; $ciudad[1][3]="Puebla";
$ciudad[1][4]="Juárez"; $ciudad[1][5]="Tijuana"; $ciudad[1][6]="León"; $ciudad[1][7]="Zapopan";
$ciudad[2][0]="Buenos Aires"; $ciudad[2][1]="Córdoba"; $ciudad[2][2]="Rosario"; $ciudad[2][3]="La Plata";
$ciudad[2][4]="Mar del Plata"; $ciudad[2][5]="San Miguel de Tucumán"; $ciudad[2][6]="Ciudad de Salta";
$ciudad[3][0]="Bogotá"; $ciudad[3][1]="Medellín"; $ciudad[3][2]="Cali"; $ciudad[3][3]="Barranquilla";
$ciudad[3][4]="Cartagena"; $ciudad[3][5]="Cúcuta"; $ciudad[3][6]="Soledad"; $ciudad[3][7]="Ibagué";

// Rescatamos el parámetro pais que nos llega mediante la url que invoca xmlhttp
$paisRecibido=$_REQUEST["pais"]; $ciudadesDevueltas="";
$existePais = false;
for ($i = 0; $i<count($pais) ; $i++) { if ($paisRecibido == $pais[$i]) {$indicePais = $i; $existePais=true;} }

$msg = 'El pais recibido por get en segundo plano es '.$paisRecibido ;

if ($existePais) {$msg = $msg. ' y tiene indice '.$indicePais;}
$ciudadesRespuesta = "";

// Creamos el array a devolver

for ($i = $indicePais; $i<count($ciudad[$indicePais]) ; $i++) {
$ciudadesRespuesta .= ",".$ciudad[$indicePais][$i];
}echo $msg.$ciudadesRespuesta; ?>

pág. 11
CONCLUSIÓN
Aunque el uso de las tecnologías AJAX en las aplicaciones Web puede mejorar en forma
considerable el rendimiento, la programación AJAX es compleja y tal vez propensa a
errores. Los diseñadores de páginas requieren conocer tanto los lenguajes de secuencias
de comandos como los lenguajes de marcado.

Se dice que la primera y más importante pieza del rompecabezas Ajax fue la API
XMLHttpRequest (XHR). XHR es una API JavaScript usada para transferir mensajes de
datos entre un navegador web y un servidor web.

REFERENCIAS
XMLHTTPREQUEST
https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest

Wikipeda (https://es.wikipedia.org/wiki/AJAX)

“Ajax: A NewApproachtoWeb Applications”

http://adaptivepath.com/publications/essays/archives/000385.php

pág. 12