Sesion1 Autocad

Curso de AJAX
SESION 1
INTRODUCCION A AJAX
1 - Qu es AJAX?
AJAX son las siglas de Asynchronous JavaScript And XML. No es un lenguaje de programacin
sino un conjunto de tecnologas (HTML-JavaScript-CSS-DHTML-PHP/ASP.NET/JSP-XML) que
nos permiten hacer pginas de internet ms interactivas.
La caracterstica fundamental de AJAX es permitir actualizar parte de una pgina con
informacin que se encuentra en el servidor sin tener que refrescar completamente la pgina.
De modo similar podemos enviar informacin al servidor.
La complejidad se encuentra en que debemos dominar varias tecnologas:
HTML o XHTML
CSS
JavaScript
DHTML Bsicamente debemos dominar todos los objetos que proporciona el DOM.
XML Para el envo y recepcin de los datos entre el cliente y el servidor.
PHP o algn otro lenguaje que se ejecute en el servidor (ASP.Net/JSP)
2 - Ventajas y desventajas de AJAX.

Ventajas
1.
2.
3.
4.
5.
6.
Utiliza tecnologas ya existentes.

Soportada por la mayora de los navegadores modernos.
Interactividad. El usuario no tiene que esperar hasta que lleguen los datos del servidor.
Portabilidad (no requiere plug-in como Flash y Applet de Java)
Mayor velocidad, esto debido que no hay que retornar toda la pgina nuevamente.
La pgina se asemeja a una aplicacin de escritorio.
Desventajas
1. Se pierde el concepto de volver a la pgina anterior.
2. Si se guarda en favoritos no necesariamente al visitar nuevamente el sitio se ubique
donde nos encontrbamos al grabarla.
3. La existencia de pginas con AJAX y otras sin esta tecnologa hace que el usuario se
desoriente.
4. Problemas con navegadores antiguos que no implementan esta tecnologa.
5. No funciona si el usuario tiene desactivado el JavaScript en su navegador.
6. Requiere programadores que conozcan todas las tecnologas que intervienen en AJAX.
7. Dependiendo de la carga del servidor podemos experimentar tiempos tardos de
respuesta que desconciertan al visitante.
3 - Un ejemplo con AJAX.
Confeccionaremos un ejemplo donde veremos que aparecen muchos conceptos, no se
preocupe si no los comprende en su totalidad ya que los mismos se vern en forma detallada a
lo largo de este curso.
Curso de AJAX
La idea fundamental de este ejercicio es conocer cmo debemos estructurar nuestras pginas
y ver que introduce de nuevo el empleo de AJAX.
Confeccionaremos un problema muy sencillo, imaginemos que tenemos una lista de
hipervnculos con los distintos signos del horscopo y queremos que al ser presionado no
recargue la pgina completa sino que se enve una peticin al servidor y el mismo retorne la
informacin de dicho signo, luego se actualice solo el contenido de un div del archivo HTML.
Este problema se puede resolver muy fcilmente si refrescamos la pgina completamente al
presionar el hipervnculo, pero nuestro objetivo es actualizar una pequea parte de la pgina y
ms precisamente el div que debe mostrar los datos del signo seleccionado.
Si bien nuestra pgina solo contendr los hipervnculos a los distintos signos en un caso real la
pgina puede contener muchos otros elementos HTML con imgenes, otros hipervnculos etc.
los cuales no debern sufrir cambios (ni parpadeo) ya que solo se modificar el elemento div
respectivo mediante DHTML.
Esta actualizacin parcial de la pgina tiene muchas ventajas:
Reducimos el ancho de banda requerido al no tener que recuperar toda la pgina.

Agilizamos la actualizacin de la pgina.
Reducimos el parpadeo de la pgina.
Hacemos ms natural la navegacin del sitio.
La mayora de los problemas requieren los siguientes archivos como mnimo:

1. El archivo HTML (es la pgina que se ve en el navegador)
2. El archivo JS (contiene todas las rutinas JavaScript que permiten actualizar
dinmicamente la pgina HTML (mediante DHTML) y las rutinas que permiten
comunicarse con el servidor para el envo y recepcin de informacin.
3. La hoja de estilo, es decir el archivo CSS
4. La pgina que contiene el script que se ejecuta en el servidor(en nuestro caso
emplearemos el lenguaje PHP)
Comencemos a presentar los distintos archivos para resolver este problema:
pagina1.html
<html>
<head>
<title>Problema</title>
<script src="funciones.js" language="JavaScript"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Signos del horscopo.</h1>
<div id="menu">
<p><a id="enlace1" href="pagina1.php?cod=1">Aries</a></p>
<p><a id="enlace2" href="pagina1.php?cod=2">Tauro</a></p>
<p><a id="enlace3" href="pagina1.php?cod=3">Geminis</a></p>
<p><a id="enlace4" href="pagina1.php?cod=4">Cancer</a></p>
<p><a id="enlace5" href="pagina1.php?cod=5">Leo</a></p>
<p><a id="enlace6" href="pagina1.php?cod=6">Virgo</a></p>
<p><a id="enlace7" href="pagina1.php?cod=7">Libra</a></p>
<p><a id="enlace8" href="pagina1.php?cod=8">Escorpio</a></p>
<p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p>
<p><a id="enlace10" href="pagina1.php?cod=10">Capricornio</a></p>
<p><a id="enlace11" href="pagina1.php?cod=11">Acuario</a></p>
Curso de AJAX
<p><a id="enlace12" href="pagina1.php?cod=12">Piscis</a></p>
</div>
<div id="detalles">Seleccione su signo.</div>
</body>
</html>
Esta pgina contiene HTML puro. Es importante notar que debemos incorporar los dos archivos
externos .css y .js mediante los elementos HTML respectivos:
La hoja de estilo solo tiene el objetivo de mejorar la presentacin en la pgina de los doce
hipervnculos de los signos del horscopo. Puede probar eliminar el archivo .css mediante el
borrado del elemento link del archivo HTML y el problema debera continuar funcionando, por
supuesto con una presentacin mucho ms pobre.
Podemos observar que cada hipervnculo solicita la misma pgina al servidor pero pasndole
como parmetro un valor distinto, con esto podremos detectar en el servidor que signo ha
elegido el operador.
El segundo archivo contiene las reglas de estilo que se definen para el archivo HTML:
estilos.css
#menu {
font-family: Arial;
margin:5px;
}
#menu p {
margin:0px;
padding:0px;
}
#menu a {
display: block;
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eee;
text-align:center;
}
#menu a:link, #menu a:visited {
color: #f00;
text-decoration: none;
}
#menu a:hover {
background-color: #369;
color: #fff;
}
#detalles {
background-color:#ffc;
text-align:left;
font-family:verdana;
Curso de AJAX
border-width:0;
padding:5px;
border: 1px dotted #fa0;
margin:5px;
}
Ahora viene uno de los puntos claves donde debemos prestar ms atencin, esto se encuentra
en las rutinas JavaScript que debemos implementar para comunicarnos con el servidor,
adems de lo ya conocido de DHTML para aadir elementos HTML en forma dinmica.
Veamos el archivo en su totalidad y expliquemos en forma muy global (recuerde que a lo largo
de este curso iremos profundizando todos estos conceptos de comunicacin con el servidor):
funciones.js
addEvent(window,'load',inicializarEventos,false);
function inicializarEventos()
{
var ob;
for(f=1;f<=12;f++)
{
ob=document.getElementById('enlace'+f);
addEvent(ob,'click',presionEnlace,false);
}
}
function presionEnlace(e)
{
if (window.event)
{
window.event.returnValue=false;
var url=window.event.srcElement.getAttribute('href');
cargarHoroscopo(url);
}
else
if (e)
{
e.preventDefault();
var url=e.target.getAttribute('href');
}
}
var conexion1;
function cargarHoroscopo(url)
{
if(url=='')
{
return;
}
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open("GET", url, true);
conexion1.send(null);
}
function procesarEventos()
Curso de AJAX
{
var detalles = document.getElementById("detalles");
if(conexion1.readyState == 4)
{
detalles.innerHTML = conexion1.responseText;
}
else
{
detalles.innerHTML = 'Cargando...';
}
}
//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
Recordemos que siempre llamaremos a la funcin addEvent (que se encuentra codificada en el
mismo archivo) para hacer compatible nuestro cdigo con el navegador IE (recordemos que no
cumple los estndares referente a eventos).
Lo primero que se ejecuta es la llamada a la funcin inicializarEventos() inmediatamente luego
que la pgina se ha cargado por completo en el navegador:
{
var ob;
for(f=1;f<=12;f++)
{
ob=document.getElementById('enlace'+f);
addEvent(ob,'click',presionEnlace,false);
}
Curso de AJAX
}
En esta funcin registramos el evento click para los doce enlaces de los signos del horscopo.
Para facilitar la codificacin recordemos que todos tienen casi el mismo nombre, difieren por
un nmero al final. Luego dentro de un for rescatamos la referencia a cada enlace y
registramos el evento click indicando que se debe llamar a la funcin presionEnlace.
La funcin presin enlace:
function presionEnlace(e)
{
if (window.event)
{
window.event.returnValue=false;
var url=window.event.srcElement.getAttribute('href');
}
else
if (e)
{
e.preventDefault();
var url=e.target.getAttribute('href');
}
}
Primero detecta de qu navegador se trata y procede a desactivar el evento por defecto para
el hipervnculo, luego llama a la funcin cargarHoroscopo pasndole como referencia la url que
contiene el hipervnculo.
Veamos ahora la funcin cargarHoroscopo:
var conexion1;
function cargarHoroscopo(url)
{
if(url=='')
{
return;
}
conexion1=crearXMLHttpRequest()
}
Previo a la definicin de esta funcin definimos una variable global llamada conexion1 que ser
utilizada en esta y la siguiente funcin.
La funcin recibe como parmetro la url a la que debe hacer la peticin de datos. Lo primero
que verificamos que el parmetro no llegue vaco, en caso de estar vaco salimos con el
comando return.
El siguiente paso es llamar a la funcin crearXMLHttpRequest que crea y retorna un objeto de
la clase XMLHttpRequest (luego veremos que este objeto nos permite comunicarnos con el
servidor de forma asincrnica):
Curso de AJAX
Esta funcin se encuentra codificada ms abajo dentro del mismo archivo y tiene por objetivo
retornar un objeto de la clase XMLHttpRequest.
La creacin del objeto de la clase XMLHttpRequest se implementa separada en otra funcin
porque depende del navegador que se trate la sintaxis cambia:
{
var xmlHttp=null;
else
return xmlHttp;
}
Como podemos observar verificamos si se trata del navegador IE, en caso afirmativo la
creacin del objeto XMLHttpRequest es:
Si no se trata del navegador IE verificamos si existe la clase XMLHttpRequest en el objeto
window, en caso afirmativo creamos un objeto de dicha clase:
Por la diferencia en la forma de crear un objeto de la clase XMLHttpRequest hemos movido
esta actividad a esta funcin.
La funcin retorna la referencia del objeto creado:
return xmlHttp;
Retornemos a la funcin cargarHoroscopo y veamos qu hacemos con el objeto de la clase
XMLHttpRequest que acabamos de crear:
La propiedad onreadystatechange se inicializa con la referencia de una funcin que ser la
encargada de procesar los datos enviados por el servidor, veremos el cdigo de esta funcin
ms adelante.
Seguidamente llamamos al mtodo open que tiene tres parmetros:
Primero el mtodo de envo de datos (GET o POST) Recordemos que si los datos se
envan como parmetros (como es nuestro ejemplo) debemos indicar que utilizamos el
mtodo GET
El segundo parmetro es la url y la pgina que procesar los datos que le enviemos.
El tercer parmetro indicamos si se procesarn los datos de forma asncrona (true) o
sncrona (false)
Por ltimo nos falta llamar al mtodo send para que comience el proceso:
Curso de AJAX
Nos queda explicar la funcin procesarEventos que se ejecuta cada vez que el objeto
conexion1 de la clase XMLHttpRequest cambia de estado. Tengamos en cuenta que los estados
posibles de este objeto son:
0
1
2
3
4
No inicializado.
Cargando.
Cargado.
Interactivo.
Completado.
Para conocer el estado del objeto debemos acceder a la propiedad readyState que almacena
alguno de los cinco valores que enunciamos.
Nuestra funcin procesarEventos es:
{
var detalles = document.getElementById("detalles");
{
detalles.innerHTML = conexion1.responseText;
}
else
{
detalles.innerHTML = 'Cargando...';
}
}
Decamos que cuando la propiedad readyState almacena 4 significa que todos los datos han
llegado desde el servidor, luego mediante el mtodo responseText recuperamos la informacin
enviada por el servidor. Luego cualquier otro valor que contenga la propiedad readyState
mostramos dentro del div el mensaje 'cargando...'.
Es seguro que muchas dudas han surgido de este primer pantallazo de AJAX, pero no se
preocupe a medida que avancemos en el curso se irn aclarando e internalizando.
Pero todava nos queda la pgina que contiene el programa en el servidor, en nuestro caso
empleamos el lenguaje PHP (tener en cuenta que podemos emplear otro lenguaje de servidor
para esto)
Veamos el cdigo de esta pgina:
pagina1.php
<?php
if ($_REQUEST['cod']==1)
echo "<strong>Aries:</strong> Hoy los cambios sern fsicos, personales, de carcter, Te
sentirs
impulsivo y tomars iniciativas. Perodo en donde considerars unirte a agrupaciones de
beneficencia, o de ayuda a los dems.";
echo "<strong>Tauro:</strong> Hoy los cambios sern privados, ntimos. Recuerdos. Ayuda,
solidaridad. Asuntos en lugares de retiro. Tu cnyuge puede aportar buen status a tu vida o
apoyo a
tu profesin.";
Curso de AJAX
echo "<strong>Gminis:</strong> Los asuntos de hoy tienen que ver con las amistades,
reuniones,
actividades con ellos. Da esperanzado, ilusiones. Mucha energa sexual y fuerza emocional.
Deseos
difciles de controlar.";
echo "<strong>Cancer:</strong> Este da la profesin y las relaciones con superiores y con
tu
madre sern de importancia. Actividad en relacin a estos temas. Momentos positivos con
compaeros
de trabajo. Actividad laboral agradable.";
echo "<strong>Leo:</strong> Este da los estudios, los viajes, el extranjero y la
espiritualidad
sern lo importante. Pensamientos, religin y filosofa tambin. Vivencias krmicas de la poca
te
vuelven responsable tomando decisiones.";
echo "<strong>Virgo:</strong> Para este da toma importancia tu vida sexual, tal vez
miedos, temas
legales, juicios o herencias. Experiencias extraas. Hay karma de prueba durante este perodo
en tu
parte psicolgica, generndose algunos replanteos.";
echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver con tu pareja, tambin con
socios, con
la gente o el pblico. Ellos sern lo ms importante del da. Ganancias a travs de
especulaciones o
del juego. Actividades vocacionales artsticas.";
echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que ver con temas de trabajo y de
salud.
Presta atencin a ambos. Experiencias diversas con compaeros. Durante este perodo tendrs
muchos
recursos para ganar dinero.";
echo "<strong>Sagitario:</strong> Durante este da se vivirn cambios en relacin a los
noviazgos
o a los hijos. Creatividad, actividad, diversiones y salidas. Perodo de encuentros con personas
o
situaciones que te impresionan.";
echo "<strong>Capricornio:</strong> Los cambios del da tienen que ver con tu hogar, con
la
convivencia y con el padre. Asuntos relativos al carcter en la convivencia. El karma de
responsabilidad de estos momentos te acercar al mundo de lo desconocido, mucha madurez y
contacto
con el ms all.";
echo "<strong>Acuario:</strong> Hoy todo asunto tiene que ver con el entorno inmediato,
hermanos y
vecinos, con la comunicacin, los viajes cortos o traslados frecuentes. El hablar y trasladarse
ser
importante hoy. Mentalidad e ideas activas.";
echo "<strong>Piscis:</strong> Durante este da se vivirn cambios en la economa,
movimientos en
los ingresos, negocios, valores. Momentos de gran fuerza y decisin profesionales, buscars el
liderazgo.";
Curso de AJAX
?>
Mediante el vector asociativo $_REQUEST recuperamos el valor del parmetro cod y mediante
una serie de if verificamos si almacena el valor 1 procedemos a generar un texto referente al
signo Aries, si tiene un 2 generamos un texto referente al signo Tauro y as sucesivamente.
Hay que tener en cuenta que no se estar enviando una pgina HTML completa, por eso no
tiene los elementos Head, Body etc. sino es ms bien un archivo de texto que luego ser
aadido en forma dinmica al div de la pgina HTML.
Debe quedar claro que los datos se podran haber rescatado perfectamente de una base de
datos, pero por simplicidad hemos dispuesto estos 12 if y generado el texto respectivo.
Veremos ms adelante problemas que acceden a bases de datos.
4 - El mismo ejemplo sin AJAX.

Volveremos a confeccionar el mismo problema que muestra una lista de hipervnculos con los
distintos signos del horscopo, a diferencia del problema expuesta en el concepto anterior
ahora no emplearemos AJAX, es decir recargaremos la pgina completamente al presionar
alguno de los hipervnculos.
Como debemos recargar la pgina y actualizar en el servidor los datos del signo del horscopo
seleccionado confeccionaremos solo una pgina php.
pagina1.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Signos del horscopo.</h1>
<div id="menu">
<p><a id="enlace1" href="pagina1.php?cod=1">Aries</a></p>
<p><a id="enlace2" href="pagina1.php?cod=2">Tauro</a></p>
<p><a id="enlace3" href="pagina1.php?cod=3">Geminis</a></p>
<p><a id="enlace4" href="pagina1.php?cod=4">Cancer</a></p>
<p><a id="enlace5" href="pagina1.php?cod=5">Leo</a></p>
<p><a id="enlace6" href="pagina1.php?cod=6">Virgo</a></p>
<p><a id="enlace7" href="pagina1.php?cod=7">Libra</a></p>
<p><a id="enlace8" href="pagina1.php?cod=8">Escorpio</a></p>
<p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p>
<p><a id="enlace10" href="pagina1.php?cod=10">Capricornio</a></p>
<p><a id="enlace11" href="pagina1.php?cod=11">Acuario</a></p>
<p><a id="enlace12" href="pagina1.php?cod=12">Piscis</a></p>
</div>
<div id="detalles">
<?php
if (!isset($_REQUEST['cod']))
echo "Seleccione su signo.";
echo "<strong>Aries:</strong> Hoy los cambios sern fsicos,
personales, de carcter, Te sentirs impulsivo y tomars
Curso de AJAX
iniciativas. Perodo en donde considerars unirte a agrupaciones
de beneficencia, o de ayuda a los dems.";
echo "<strong>Tauro:</strong> Hoy los cambios sern privados,
ntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares de retiro. Tu
cnyuge puede aportar buen status a tu vida o apoyo a tu profesin.";
echo "<strong>Gminis:</strong> Los asuntos de hoy tienen
que ver con las amistades, reuniones, actividades con ellos. Da esperanzado,
ilusiones. Mucha energa sexual y fuerza emocional. Deseos difciles
de controlar.";
echo "<strong>Cancer:</strong> Este da la profesin
y las relaciones con superiores y con tu madre sern de importancia. Actividad
en relacin a estos temas. Momentos positivos con compaeros de
trabajo. Actividad laboral agradable.";
echo "<strong>Leo:</strong> Este da los estudios, los
viajes, el extranjero y la espiritualidad sern lo importante. Pensamientos,
religin y filosofa tambin. Vivencias krmicas de
la poca te vuelven responsable tomando decisiones.";
echo "<strong>Virgo:</strong> Para este da toma importancia
tu vida sexual, tal vez miedos, temas legales, juicios o herencias. Experiencias
extraas. Hay karma de prueba durante este perodo en tu parte psicolgica,
generndose algunos replanteos.";
echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver con
tu pareja, tambin con socios, con la gente o el pblico. Ellos
sern lo ms importante del da. Ganancias a travs
de especulaciones o del juego. Actividades vocacionales artsticas.";
echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que ver
con temas de trabajo y de salud. Presta atencin a ambos. Experiencias
diversas con compaeros. Durante este perodo tendrs muchos
recursos para ganar dinero.";
echo "<strong>Sagitario:</strong> Durante este da se
vivirn cambios en relacin a los noviazgos o a los hijos. Creatividad,
actividad, diversiones y salidas. Perodo de encuentros con personas o
situaciones que te impresionan.";
echo "<strong>Capricornio:</strong> Los cambios del da
tienen que ver con tu hogar, con la convivencia y con el padre. Asuntos relativos
al carcter en la convivencia. El karma de responsabilidad de estos momentos
te acercar al mundo de lo desconocido, mucha madurez y contacto con el
ms all.";
echo "<strong>Acuario:</strong> Hoy todo asunto tiene que ver
con el entorno inmediato, hermanos y vecinos, con la comunicacin, los
viajes cortos o traslados frecuentes. El hablar y trasladarse ser importante
hoy. Mentalidad e ideas activas.";
echo "<strong>Piscis:</strong> Durante este da se vivirn
cambios en la economa, movimientos en los ingresos, negocios, valores.
Momentos de gran fuerza y decisin profesionales, buscars el liderazgo.";
?>
</div>
</body>
Curso de AJAX
</html>
Como podemos observar los hipervnculos llaman a la misma pgina:
href="pagina1.php?cod=1">Aries</a></p>
Luego el cdigo PHP que se ejecuta en el servidor verifica el valor que llega como parmetro y
muestra el detalle del signo del horscopo seleccionado:
echo "<strong>Aries:</strong> Hoy los cambios sern fsicos,
personales, de carcter, Te sentirs impulsivo y tomars
iniciativas. Perodo en donde considerars unirte a agrupaciones
de beneficencia, o de ayuda a los dems.";
En caso de no llegar parmetros a la pgina (normalmente la primera vez que cargamos la
pgina) el primer if se verifica verdadero:
if (!isset($_REQUEST['cod']))
echo "Seleccione su signo.";
Si comparamos este ejemplo con el anterior veremos que utilizar AJAX reduce la cantidad de
informacin que pedimos al servidor, tambin evitamos la recarga completa de la pgina
(imaginemos un sitio que contiene muchos elementos el redibujado es lento y engorroso)
La hoja de estilo no tiene cambios con respecto al problema anterior:
#menu {
font-family: Arial;
margin:5px;
}
#menu p {
margin:0px;
padding:0px;
}
#menu a {
display: block;
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eee;
text-align:center;
}
#menu a:link, #menu a:visited {
color: #f00;
text-decoration: none;
}
#menu a:hover {
background-color: #369;
color: #fff;
}
#detalles {
Curso de AJAX
background-color:#ffc;
text-align:left;
font-family:verdana;
border-width:0;
padding:5px;
border: 1px dotted #fa0;
margin:5px;
}
5 - Objeto XMLHttpRequest
El objeto XMLHttpRequest es un elemento fundamental para la comunicacin asincrnica con el
servidor. Este objeto nos permite enviar y recibir informacin en formato XML y en general en
cualquier formato (como vimos en el ejercicio anterior retornando un trozo de archivo HTML)
La creacin de un objeto de esta clase vara si se trata del Internet Explorer de Microsoft, ya
que este no lo incorpora en JavaScript sino que se trata de una ActiveX:
En cambio en FireFox y otros navegadores lo incorpora JavaScript y procedemos para su
creacin de la siguiente manera:
Como hemos visto en el problema anterior siempre implementaremos una funcin que nos
retorne un objeto XMLHttpRequest haciendo transparente el proceso en cuanto a navegador
donde se est ejecutando:
{
var xmlHttp=null;
else
return xmlHttp;
}
Es decir la funcin crearXMLHttpRequest se encargar de retornarnos un objeto de la clase
XMLHttpRequest.
Las propiedades principales del objeto XMLHttpRequest son:
onreadystatechange Almacena el nombre de la funcin que se ejecutar cuando el

objeto XMLHttpRequest cambie de estado.
readyState Almacena el estado del requerimiento hecho al servidor, pudiendo ser:
o 0 No inicializado (el mtodo open no ha sido llamado)
o 1 Cargando (se llam al mtodo open)
o 2 Cargado (se llam al mtodo send y ya tenemos la cabecera de la peticin
HTTP y el status)
o 3 Interactivo (la propiedad responseText tiene datos parciales)
Curso de AJAX
4 Completado (la propiedad responseText tiene todos los datos pedidos al
servidor)
responseText Almacena el string devuelto por el servidor, luego de haber hecho una
peticin.
responseXML Similar a la anterior (responseText) con la diferencia que el string
devuelto por el servidor se encuentra en formato XML.
o
Los mtodos principales del objeto XMLHttpRequest son:
open Abre un requerimiento HTTP al servidor.

send Enva el requerimiento al servidor.
Confeccionaremos otro problema para fijar conceptos vistos hasta el momento.

Confeccionar una pgina que muestre una imagen y permita calificarla con un valor entre 1 y
10. Permitir ingresar el nombre del visitante. Disponer de un control de tipo select para
seleccionar el valor. Luego al presionar un botn enviar el valor seleccionado utilizando el
objeto XMLHttpRequest al servidor donde almacenaremos en un archivo de texto el nombre del
visitante y el puntaje. Retornar luego todos los votos hasta el momento. Actualizaremos la
pgina HTML con todos los nombres y votos hasta el momento.
El archivo HTML es:
pagina1.html
<html>
<head>
</head>
<body>
<h1>Vote esta foto</h1>
<p>
<img src="../foto1.jpg" alt="cuadro sobre geometria generativa">
</p>
Nombre:<input type="text" id="nombre" size="20"><br>
Voto:<select id="voto">
<option value="0" selected>seleccione</option>
<option value="1">1</option>
</select><br>
<input type="button" id="boton1" value="votar">
<div id="resultados"></div>
</body>
</html>
Lo primero que podemos observar es que no utilizaremos una hoja de estilo para reducir la
complejidad del problema y concentrarnos en la lgica.
Curso de AJAX
Si vemos utilizamos controles de tipo input, select y button, pero no disponemos ningn
formulario. Esto se debe a que los datos ingresados se enviarn en forma asncrona mediante
el objeto XMLHttpRequest.
Otro punto a destacar que a cada control le definimos la propiedad id, esta es de suma
importancia para poder accederla desde JavaScript. No definimos la propiedad name ya que no
se enviarn los datos por medio de formulario.
Nuestro archivo con las funciones JavaScript es:
funciones.js
{
var ob=document.getElementById('boton1');
addEvent(ob,'click',presionBoton,false);
}
function presionBoton(e)
{
var ob1=document.getElementById('voto');
var ob2=document.getElementById('nombre');
cargarVoto(ob1.value,ob2.value);
}
var conexion1;
function cargarVoto(voto,nom)
{
conexion1=crearXMLHttpRequest();
conexion1.open('GET','pagina1.php?puntaje='+voto+'&nombre='+nom, true);
}
{
var resultados = document.getElementById("resultados");
{
resultados.innerHTML = conexion1.responseText;
}
else
{
resultados.innerHTML = 'Cargando...';
}
}
//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
Curso de AJAX
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
{
var xmlHttp=null;
else
return xmlHttp;
}
Como podemos observar tiene mucho en comn con el primer ejemplo de AJAX que habamos
desarrollado.
Lo primero que hacemos es inicializar el evento load con la funcin inicializarEventos, en esta
inicializamos el evento click del nico botn que contiene la pgina:
{
var ob=document.getElementById('boton1');
addEvent(ob,'click',presionBoton,false);
}
Cuando se presiona el botn se dispara la funcin presionBoton, donde obtenemos la
referencia a los dos controles (select y text) que tienen almacenados los valores. Llamamos
finalmente a la funcin cargarVoto:
function presionBoton(e)
{
var ob1=document.getElementById('voto');
var ob2=document.getElementById('nombre');
cargarVoto(ob1.value,ob2.value);
}
La funcin cargarVoto recibe como parmetro el valor del voto y el nombre del visitante,
seguidamente llama a la funcin crearXMLHttpRequest.
Por ltimo inicializamos la propiedad onreadystatechange y llamamos a los mtodos open y
send. En el mtodo open pasamos los dos datos en la cabecera de la peticin de pgina.
var conexion1;
function cargarVoto(voto,nom)
{
Curso de AJAX
conexion1.open('GET','pagina1.php?puntaje='+voto+'&nombre='+nom, true);
}
Nos queda la funcin procesarEventos, que cuando la propiedad readyState del objeto
XMLHttpRequest tiene un valor 4 (proceso completado) recupera el valor de la propiedad
responseText con la informacin que se retorn desde el servidor:
{
var resultados = document.getElementById("resultados");
{
resultados.innerHTML = conexion1.responseText;
}
else
{
resultados.innerHTML = 'Cargando...';
}
}
El archivo PHP que se ejecuta en el servidor es el siguiente:
pagina1.php
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
$ar=fopen("puntaje.txt","a") or
die("No se pudo abrir el archivo");
fputs($ar,"Nombre:".$_REQUEST['nombre']."<br>");
fputs($ar,"Voto:".$_REQUEST['puntaje']."<br><br>");
fclose($ar);
$ar=fopen("puntaje.txt","r") or
while (!feof($ar))
{
$linea=fgets($ar);
echo $linea;
}
fclose($ar);
?>
Lo primero que hacemos es abrir el archivo para agregar datos, es decir no borramos los votos
existentes (puede probar de cambiar "a" de append por "w" que crea el archivo):
$ar=fopen("puntaje.txt","a") or
Luego recuperamos los parmetros que llegan a la pgina y los grabamos:
fputs($ar,"Nombre:".$_REQUEST['nombre']."<br>");
fputs($ar,"Voto:".$_REQUEST['puntaje']."<br><br>");
Cerramos y abrimos nuevamente el archivo, pero ahora con el objetivo de leerlo:
fclose($ar);
$ar=fopen("puntaje.txt","r") or
Curso de AJAX
Por ltimo generamos el archivo a retornar al navegador:
while (!feof($ar))
{
$linea=fgets($ar);
echo $linea;
}
Con este segundo ejemplo debemos poder identificar que partes son comunes al problema
anterior.

Sesion1 Autocad

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Sesion1 Autocad

Загружено:

Авторское право:

Доступные форматы

Curso de AJAX

2 - Ventajas y desventajas de AJAX.

Utiliza tecnologas ya existentes.

Reducimos el ancho de banda requerido al no tener que recuperar toda la pgina.

La mayora de los problemas requieren los siguientes archivos como mnimo:

4 - El mismo ejemplo sin AJAX.

onreadystatechange Almacena el nombre de la funcin que se ejecutar cuando el

Los mtodos principales del objeto XMLHttpRequest son:

open Abre un requerimiento HTTP al servidor.

Confeccionaremos otro problema para fijar conceptos vistos hasta el momento.

Вам также может понравиться