Está en la página 1de 16

Instituto tecnolgico de Campeche

(Investigacin)

Ingeniera en sistemas computacionales

Integrantes:
Gabriel Eusebio Coba Alvarez
Miguel ngel Bazn Chan
Alejandro romero Meza
Abraham Prez Coyoc
Carlos Samudio Zavala
Guadalupe Rodrguez Chvez

VS9

15/12/2014
ndice

Introduccin ....... 3
Definicin de Ajax . 4
Antecedentes de Ajax ....... 4
Para que sirve Ajax? ... 5
Tecnologas incluidas en Ajax ..... 6
Problemas e Inconvenientes ... 7
Ventajas .. 8
AJAX vs. Aplicaciones Web Tradicionales .... 9
Quin est usando Ajax? ... 9
Ejemplo de Pgina simple con Ajax y PHP .... 10
Ejemplo 1 ..... 13
Conclusin .... 15
Bibliografa 16

Introduccin

Durante los ltimos aos JavaScript ha pasado de ser algo ocasional o una idea
secundaria objeto de burla, a ser el lenguaje individual ms importante en la Web.
Si algn factor puede afirmar ser el instigador de ese crecimiento destacado es el
aumento en el desarrollo de aplicaciones basadas en Ajax.
Ajax, definido de forma simple, es un patrn de desarrollo y de diseo que permite
a los sitios web o a las aplicaciones, actualizar la pantalla con datos en vivo sin
necesidad de una renovacin de pgina. Esta funcionalidad crea una experiencia
fluida y tipo escritorio.

Definicin de Ajax

AJAX es el acrnimo de Asynchronous Javascript and XML, es decir: Javascript y


XML Asincrono. Este acrnimo fue utilizado por primera vez por Jesse James
Garret en 2005, en su publicacin Ajax: a New Approach to Web Applications si
bien los componentes en que se basan y los recursos tcnicos de que hace uso ya
existan desde muchos aos antes.
Normalmente, AJAX se define como una tcnica para el desarrollo de pginas
(sitios) web que implementan aplicaciones interactivas.
Es decir, que podemos refinar un poco nuestra definicin indicando que AJAX es
una tcnica que permite, mediante programas escritos en Javascript, que un
servidor y un navegador intercambien informacin, posiblemente en XML, de
forma asncrona.
Ajax es una tcnica vlida para mltiples plataformas y utilizable en muchos
sistemas operativos y navegadores dado que est basado en estndares abiertos
como JavaScript y Document Object Model (DOM).

Antecedentes de Ajax
A pesar de que el trmino Ajax fue creado en 2005 por Jesse James Garrett, 1 la
historia de las tecnologas que permiten Ajax se remonta a una dcada antes con
la iniciativa de Microsoft en el desarrollo de Scripting Remoto. Sin embargo, las
tcnicas para la carga asncrona de contenidos en una pgina existente sin
requerir recarga completa remontan al tiempo del elemento iframe (introducido en
Internet Explorer 3 en 1996) y el tipo de elemento layer (introducido en Netscape 4
en 1997, abandonado durante las primeras etapas de desarrollo de Mozilla).
Ambos tipos de elemento tenan el atributo src que poda tomar cualquier direccin
URL externa, y cargando una pgina que contenga JavaScript que manipule la
pgina paterna, pueden lograrse efectos parecidos al Ajax.
El Microsoft's Remote Scripting (o MSRS, introducido en 1998) result un sustituto
ms elegante para estas tcnicas, con envo de datos a travs de un applet Java
el cual se puede comunicar con el cliente usando JavaScript. Esta tcnica
funcion en ambos navegadores, Internet Explorer versin 4 y Netscape Navigator
versin 4. Microsoft la utiliz en el Outlook Web Access provisto con la versin
2000 de Microsoft Exchange Server.
La comunidad de desarrolladores web, primero colaborando por medio del grupo
de noticias microsoft.public.scripting.remote y despus usando blogs,
desarrollaron una gama de tcnicas de scripting remoto para conseguir los
mismos resultados en diferentes navegadores. Los primeros ejemplos incluyen la
biblioteca JSRS en el ao 2000, la introduccin a la tcnica imagen/cookie2 en el
mismo ao y la tcnica JavaScript bajo demanda (JavaScript on Demand) en
2002. En ese ao, se realiz una modificacin por parte de la comunidad de
usuarios al Microsoft's Remote Scripting para reemplazar el applet Java por

XMLHttpRequest.
Frameworks de Scripting Remoto como el ARSCIF aparecieron en 2003 poco
antes de que Microsoft introdujera Callbacks en ASP. NET.
Desde que XMLHttpRequest est implementado en la mayora de los
navegadores, raramente se usan tcnicas alternativas. Sin embargo, todava se
utilizan donde se requiere una mayor compatibilidad, una reducida
implementacin, o acceso cruzado entre sitios web. Una alternativa, el Terminal
SVG7 (basado en SVG), emplea una conexin persistente para el intercambio
continuo entre el navegador y el servidor.

Para qu sirve AJAX?


En esencia, AJAX permite que una pgina web que ya ha sido cargada solicite
nueva informacin al servidor. Dicho as, no supondra en realidad ningn invento
novedoso.
Una pgina web que contiene un enlace permite que se solicite al servidor nueva
informacin cada vez que se pincha dicho enlace. Una pgina web que contiene
un formulario enva informacin al servidor y recibe de l nueva informacin,
normalmente la respuesta ante los datos que se han enviado. En ambos casos
hay una conexin entre el cliente y el servidor.
Cul es la diferencia cuando usamos AJAX? La diferencia es que con AJAX no
es necesario recargar toda la pgina web, como ocurre cuando pinchamos en un
enlace o cuando pulsamos el botn submit de un formulario.
Con AJAX es posible realizar una conexin a un servidor desde dentro de una
pgina web usando un programa Javascript. Dicho servidor enviar una respuesta;
esta respuesta se almacenar en una variable del programa Javascript y, una vez
almacenada en la variable, podremos hacer con ella lo que deseemos.

Figura 1: Comparacin de Modelos de Aplicacin Web clsico y basado en Ajax


Por ejemplo, podemos pedirle al servidor que nos indique qu hora tiene y mostrar
dicha hora en el cliente, en una capa dedicada slo para visualizar este dato.
De esta forma, el usuario podra ver la hora correcta que hay en el servidor
(posiblemente sincronizada por NTP) y esta sera la misma para todos los
usuarios conectados a dicho servidor, sin tener en cuenta la hora que tengan en
su ordenador (posiblemente errnea o susceptible de ser modificada por el
usuario). Si actualizamos la hora cada minuto, sin usar AJAX, tendremos que
recargar toda la pgina cada 60 segundos. Sin embargo, con AJAX, simplemente
actualizaremos la capa que hemos dedicado a imprimir la hora sin necesidad de
alterar el resto de la pgina.

Tecnologas incluidas en Ajax


Ajax es una combinacin de cuatro tecnologas ya existentes:
P
P
P

XHTML (o HTML) y hojas de estilos en cascada (CSS) para el diseo que


acompaa a la informacin.
Document Object Model (DOM) accedido con un lenguaje de scripting por parte

del usuario, especialmente implementaciones ECMAScript como JavaScript y


JScript, para mostrar e interactuar dinmicamente con la informacin presentada.
P
P

El objeto XMLHttpRequest para intercambiar datos de forma asncrona con el


servidor web. En algunos frameworks y en algunas situaciones concretas, se usa
un objeto iframe en lugar del XMLHttpRequest para realizar dichos intercambios.
PHP es un lenguaje de programacin de uso general de script del lado del servidor
originalmente diseado para el desarrollo web de contenido dinmico tambin
utilizado en el mtodo Ajax.
La primera y ms importante pieza del rompecabezas Ajax fue esta: API
XMLHttpRequest (XHR). XHR es una API JavaScript usada para transferir
mensajes de datos entre un navegador web y un servidor web. Permite al
navegador usar un HTTP POST (para pasar datos hacia el servidor) o una
solicitud GET (para acceder a datos desde el servidor en segundo plano).
Esta API es el centro de la mayora de interacciones Ajax y es una de las
tecnologas base del desarrollo web moderno.
Tambin es el mejor regalo que el equipo Microsoft Internet Explorer dio jams
a Internet.
Es cierto. El XHR apareci por primera vez en Internet Explorer versin 5 en el
ao 2000. Escrito originalmente por Alex Hopmann como un control ActiveX de
Microsoft, el XHR fue creado para usarse con Web Access de Microsoft Outlook ,
diseado para facilitar las interacciones entre la avanzada (para su tiempo)
interfaz de primer plano y Microsoft Exchange Server.
Aunque el paquete de software de Microsoft no cuenta exactamente como un
"humilde comienzo", el XHR realmente ha crecido ms all del alcance limitado de
ese producto inicial. Desde entonces ha sido implementado en cada uno de los
principales navegadores y ha sido adoptado como un estndar W3C.

XML es el formato usado generalmente para la transferencia de datos solicitados


al servidor, aunque cualquier formato puede funcionar, incluyendo HTML
preformateado, texto plano, JSON y hasta EBML.

P
Como el DHTML, LAMP o SPA, Ajax no constituye una tecnologa en s, sino que
es un trmino que engloba a un grupo de stas que trabajan conjuntamente.

Problemas e Inconvenientes
P

Las pginas creadas dinmicamente mediante peticiones sucesivas AJAX, no son


registradas de forma automtica en el historial del navegador, as que haciendo
clic en el botn de "volver" del navegador, el usuario no ser devuelto a un estado
anterior de la pgina, en cambio puede volver a la ltima pgina que visit.
Soluciones incluyen el uso de IFrames invisible para desencadenar cambios en el

historial del navegador y el cambio de la porcin de anclaje de la direccin


(despus de un #).
P

Los motores de bsqueda no analizan JavaScript.


La informacin en la pgina dinmica no se almacena en los registros del
buscador. Exceptuando Google, que desde el 2011 s indexa contenido Ajax
y JavaScript. Matt Cutts (director del departamento contra el spam en web
de Google) lo confirm en Twitter: Googlebot keeps getting smarter. Now
has the ability to execute AJAX/JS to index some dynamic comments.

Hay problemas usando Ajax entre nombres de dominios, a esto se le conoce como
Same Origin Policy o Poltica del Mismo Origen, lo cual es una medida de
seguridad que puede ser solucionada con Cross-Origin Resource Sharing
(CORS).

Dependiendo de como se desarrolle el sitio web, puedes mejorar o empeorar la


carga en el servidor. Ajax puede ayudar al servidor a evitar la fase de
renderizacin de HTML, dejndole ese trabajo al cliente, pero tambin puede
sobrecargar al servidor si se hace varias llamadas a Ajax.
Es posible que pginas con Ajax no puedan funcionar en telfonos mviles, PDA u
otros aparatos. Ajax no es compatible con todos los software para invidentes u
otras discapacidades.

Ventajas
P

P
P

Mejor experiencia de usuario. Ajax permite que las pginas se modifiquen sin tener
que volver a cargarse, dndole al usuario la sensacin de que los cambios se
producen instantneamente. Este comportamiento es propio de los programas de
escritorio a los que la mayora de los usuarios estn ms acostumbrados. La
experiencia se vuelve mucho ms interactiva.
Optimizacin de recursos. Al no recargarse la pgina se reduce el tiempo
implicado en cada transaccin. Tambin se utiliza menos ancho de banda.

P
P
P

Alta compatibilidad. Ajax es soportado por casi todas las plataformas Web.

Interactividad (El usuario no tiene que esperar hasta que llegen los datos del
servidor).

Rapidez en las operaciones.

P
P

Portabilidad

Usabilidad

AJAX vs. Aplicaciones Web Tradicionales

Las aplicaciones web tradicionales:

Requieren que el usuario rellene formularios y haga un POST


de los mismos a un servidor web

El servidor web procesa los datos enviados y genera un nueva pgina web
en consecuencia
Mientras el servidor realiza cierto procesamiento recupera datos, realiza
clculos para generar una pgina, el usuario ha de esperar

Aparte de los datos de la aplicacin la informacin de formateo en XHTML


debe ser transmitida
En ocasiones el HTML de una pgina a la siguiente vara muy ligeramente.
AJAX solamente enva peticiones a los servidores va HTTP y procesa la
informacin recuperada (nicamente la necesitada) mediante JavaScrip

Quin est usando Ajax?


Google est haciendo una significativa inversin en el acercamiento Ajax. Todos
los grandes productos que Google ha introducido en el ultimo ao (Orkut, Gmail, la
ltima versin de Google Groups, Google Suggest, y Google Maps ) son
aplicaciones Ajax. (Para datos ms tcnicos de estas implementaciones Ajax, lean
estos excelentes anlisis de Gmail, Google Suggest, y Google Maps.) Otros estn
siguiendo la tendencia: muchas de las funciones que la gente ama en Flickr
dependen de Ajax, y el motor de bsqueda de Amazon A9.com aplica tecnologas
similares.
Estos proyectos demuestran que Ajax no es solo tcnicamente importante, sino
tambin prcticos para aplicaciones en el mundo real. Esta no es otra tecnologa
que solo trabaja en un laboratorio. Y las aplicaciones Ajax pueden ser de cualquier
tamao, de lo ms simple, funciones simples como Google Suggest a las muy
complejas y sofisticadas como Google Maps.
En Adaptive Path, estuvimos haciendo nuestro propio trabajo con Ajax en los
ltimos meses, y estamos descubriendo que solo raspamos la superficie de la rica
interaccin y respuesta que que las aplicaciones Ajax puede proveer. Ajax es un
desarrollo importante para las aplicaciones Web, y su importancia solo va a crecer.
Y como hay tantos desarrolladores que ya conocen como usar estas tecnologas,
esperamos ver mas empresas y organizaciones siguiendo el liderazgo de Google
en explotar la ventaja competitiva que Ajax provee.

Ejemplo de Pgina simple con ajax y PHP


Veamos ahora como realizar una pgina que utilice xajax, para ejecutar una
sencilla funcin PHP como respuesta a una accin del usuario. El ejemplo es
relativamente sencillo, incluso lo podemos hacer en pocos pasos, como una
receta. Luego se podr complicar todo lo necesario para realizar acciones ms
complejas.
1) Incluir con PHP el archivo donde est la clase xajax
//inclumos la clase ajax
require ('xajax/xajax.inc.php');
2) Creamos una instancia de un objeto de la clase xajax
//instanciamos el objeto de la clase xajax
$xajax = new xajax();
3) Escribimos una funcin en PHP, que luego llamaremos con por medio de ajax
Esta funcin es todo lo complicado que se requiera. Realizar acciones del lado
del servidor y por tanto puede acceder a bases de datos, abrir ficheros o cualquier
cosa que se nos ocurra. Luego en la propia funcin realizaremos una instancia de
un objeto AjaxResponse, que utilizaremos para mostrar resultados en la pgina.
function si_no($entrada){
if ($entrada=="true"){
$salida = "Marcado";
}else{
$salida = "No marcado";
}
//instanciamos el objeto para generar la respuesta con ajax
$respuesta = new xajaxResponse();
//escribimos en la capa con id="respuesta" el texto que aparece en $salida
$respuesta->addAssign("respuesta","innerHTML",$salida);
//tenemos que devolver la instanciacin del objeto xajaxResponse
return $respuesta;
}
El objeto xajaxResponse() sirve para realizar acciones en la pgina sin tener que
recargar el documento. Dispone de varios mtodos o funciones, como por ejemplo
addAssign() que sirve para asignar un valor a una propiedad de un elemento de la
pgina. En este caso se asigna el valor contenido en la variable $salida al
innerHTML de la capa "respuesta", con lo que se altera el texto contenido en esa

10

capa.
4) Asociamos la funcin PHP al objeto xajax
//asociamos la funcin creada anteriormente al objeto xajax
$xajax->registerFunction("si_no");
Esta asociacin permitir ejecutar la funcin PHP desde una llamada a una
funcin Javascript.
5) Antes de enviar cualquier contenido a la pgina, tenemos que ejecutar un
mtodo del objeto xajax para procesar las peticiones del que puedan llegar a la
pgina.
//El objeto xajax tiene que procesar cualquier peticin
$xajax->processRequests();
Insistimos, esta llamada al mtodo se tiene que hacer antes de escribir ningn
contenido dentro del cdigo de la pgina, es decir, antes que llegue al cliente
ningn carcter de cdigo HTML.
6) Escribir el cdigo javascript necesario para procesar las llamadas a ajax.
//En el <head> indicamos al objeto xajax se encargue de generar el javascript
necesario
$xajax->printJavascript("xajax/");
Lo ideal es hacer esta llamada al mtodo printJavascript() dentro del <head> de la
pgina.
Si nos fijamos, el mtodo recibe un parmetro, que es la ruta relativa para acceder
al directorio donde estn los archivos xajax descomprimidos.
7) Podemos hacer llamadas a las funciones PHP en cualquier lugar del cdigo,
como respuesta a las acciones del usuario con javascript.
<input
type="checkbox"
name="si"
value="1"
onclick="xajax_si_no(document.formulario.si.checked)">
Como podemos ver, desde un elemento de la pgina, como en este caso una
casilla de verificacin, al cambiar su estado, se llama a una funcin javascript para
ejecutar la funcin PHP escrita anteriormente. Es decir, al pulsar el chechbox se
desencadena el evento onchange y con l se llama a la funcin xajax_si_no()
envindo como parmetro el estado (chequeado o no) de la casilla de verificacin.
Con esto es todo tenemos todo lo necesario para entender el ejemplo. Podemos
verlo en ejecucin en una pgina aparte.

11

Podemos ver el cdigo del ejemplo completo a continuacin, pero tener en cuenta
que para que funcione tiene que disponer del cdigo de la clase xajax, que en este
caso debe estar en un subdirectorio que cuelgue del directorio donde est el
archivo del ejemplo.
<?
//inclumos la clase ajax
require ('xajax/xajax.inc.php');
//instanciamos el objeto de la clase xajax
$xajax = new xajax();
function si_no($entrada){
if ($entrada=="true"){
$salida = "Marcado";
}else{
$salida = "No marcado";
}
//instanciamos el objeto para generar la respuesta con ajax
$respuesta = new xajaxResponse();
//escribimos en la capa con id="respuesta" el texto que aparece en $salida
$respuesta->addAssign("respuesta","innerHTML",$salida);
//tenemos que devolver la instanciacin del objeto xajaxResponse
return $respuesta;
}
//asociamos la funcin creada anteriormente al objeto xajax
$xajax->registerFunction("si_no");
//El objeto xajax tiene que procesar cualquier peticin
$xajax->processRequests();
?>
<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-88591">
<title>Si / No en Ajax</title>
<?
//En el <head> indicamos al objeto xajax se encargue de generar el javascript
necesario
$xajax->printJavascript("xajax/");
?>

12

</head>
<body>
<div id="respuesta"></div>
<form name="formulario">
<input
type="checkbox"
name="si"
onclick="xajax_si_no(document.formulario.si.checked)">
</form>

value="1"

<script type="text/javascript">
xajax_si_no(document.formulario.si.checked); //Llamando inicialmente
funcin xajax_si_no inicializamos el valor de la capa con la respuesta
</script>
</body>
</html>

la

Ejemplo 1
La primera aplicacin
La aplicacin AJAX completa ms sencilla consiste en una adaptacin del clsico
"Hola Mundo". En este caso, una aplicacin JavaScript descarga un archivo del
servidor y muestra su contenido sin necesidad de recargar la pgina.
Cdigo fuente completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hola Mundo con AJAX</title>

Transitional//EN"

<script type="text/javascript">
function descargaArchivo() {
// Obtener la instancia del objeto XMLHttpRequest
if(window.XMLHttpRequest) {
peticion_http = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
peticion_http = new ActiveXObject("Microsoft.XMLHTTP");
}
// Preparar la funcion de respuesta
peticion_http.onreadystatechange = muestraContenido;
// Realizar peticion HTTP
peticion_http.open('GET', 'http://localhost/holamundo.txt', true);

13

peticion_http.send(null);
function muestraContenido() {
if(peticion_http.readyState == 4) {
if(peticion_http.status == 200) {
alert(peticion_http.responseText);
}
}
}
}
window.onload = descargaArchivo;
</script>
</head>
<body></body>
</html>
En el ejemplo anterior, cuando se carga la pgina se ejecuta el mtodo JavaScript
que muestra el contenido de un archivo llamado holamundo.txt que se encuentra
en el servidor. La clave del cdigo anterior es que la peticin HTTP y la descarga
de los contenidos del archivo se realizan sin necesidad de recargar la pgina.

Conclusin

14

AJAX es un nuevo enfoque de desarrollo web que garantiza una mayor


interactividad y usabilidad de portales web
Su utilizacin por lderes en la industria web como Google o Yahoo, da una idea
de su potencial.
Incluso MicroSoft ya est pensando en aadir a ASP.NET 2.0 un conjunto de
controles basados en tecnologa AJAX.
El desarrollo web con AJAX no es trivial y difcil de hacer debugging
Sin embargo, las frameworks que estn emergiendo simplificarn el desarrollo
web basado en AJAX

Bibliografa

15

http://luiscalderon.ing-sistemas.com/ebooks/Manual_Ajax.pdf
http://www.ibm.com/developerworks/ssa/web/library/wa-aj-ajaxhistory/
Mi pgina web Curso AJAX , http://paginaspersonales.deusto.es/dipina
Ajax for Java developers: Build dynamic Java applications http://www128.ibm.com/developerworks/library/j-ajax1/?ca=dgr-lnxw01Ajax

16