Documente Academic
Documente Profesional
Documente Cultură
14660251
DESARROLLO ................................................................................................................................. 4
Propiedades ................................................................................................................................. 4
Métodos ........................................................................................................................................ 6
Características ............................................................................................................................ 8
EJEMPLO.......................................................................................................................................... 9
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 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.
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).
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.
readyState long
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
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
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.
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
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;} }
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)
pág. 12