Ajax Hospedaje - Web Hospedaje

Hospedaje web de Ajax

Sin duda, ya ha escuchado usted de Ajax. Perd�ne que lo especif�que;, pero no estamos refiri�ndonos a lo que usa para limpiar el lavamanos, Ajax limpia la experiencia tradicional del INternet y resulta en usabilidad brillante de sus p�ginas web. Ajax son las iniciales para Asynchronous Javascript and XML, pero la letra m�s prominente es la J. Ha habido mucho esfuerzo sincronizar (hacer el orden importar) y evitar el uso del XML (con Javascript), as� se puede tomar al Ajax como estilo.

Ajax es una herramienta nueva maravillosa para mejorar la usabilidad de sitios. Aunque los programadores tienen que tener cuidado en cuanto sea o no sea posible, la funcionalidad adicional vale la pena. Muchas empresas establecidas en el Internet est�n usando Ajax. Yahoo lo usa para su p�gina principal e interacci�n de usuarios. Adem�s, lo usan en su sistema Yahoo Music para calificar las canciones. El programa popular de Google Gmail de correo electr�nico usa aplicaciones web de Ajax, as� como lo hace Google maps. En realidad, este art�culo se est� escribiendo con una aplicaci�n de Ajax. La parte del sitio GoogleDocs es un procesador de textos, completamente funcional. El programa permite que el usuario edite archivos con toda la funcionalidad de Microsoft Word, u otros procesadores. Es hasta mejor que muchos procesadores que se est�n usando, porque es m�s port�til. Por el hecho que su archivo existe en los servidores de Google, lo puede accesar desde cualquier lugar donde tenga acceso a una computadora. Adem�s permite colaboraci�n en documentos y la habilidad de publicar sus trabajos a un sitio, para que lo vea cualquier persona.

El estilo tradicional de dise�o de sitios web, es de mostrar las p�ginas y volver a cargarlas cuando uno hace clic en uno de los links. El estilo de Ajax es NO volver a cargar la p�gina entera, sino los datos relevantes nada m�s. Esto se logra usando Javascript para emular la acci�n de ir a una p�gina por los datos. Por ejemplo, digamos que una p�gina tiene una lista de productos. Hay varias maneras para mostrar informaci�n m�s detallada acerce de este producto. Cuando el usuario escoje el producto, la "manera" normal de encontrar m�s informaci�n acerca del producto, es ir a otra p�gina. La "manera de Ajaxy" es usar una petici�n de Javascript (go to) en la p�gina con la informaci�n adicional acerca de este producto y hacer que Javascript consiga la informaci�n y que la muestre en la p�gina donde ya est� el usuario. Aunque las dos maneras funcionan, la manera de Ajaxy es m�s r�pida. Adem�s es sumamente m�s"peque�o" que la otra manera, porque se ahorra transferencia.

A pesar del hecho que Ajax es un estilo incre�blemente fuerte, viene con riesgos. El m�s obvio es que las p�ginas generalmente no funcionan se el usuario no ha activado Javascript. Las estadisticas ense�an que aproximadamente el 10% de usuarios del Internet no tienen Javascript activado. Por �so, es importante desarrollar p�ginas que funcionan con Javascript activado o no. Para vender, uno tiene que asegurarse de que todos puedan ver su sitio. Un riesgo m�s grave trata de "explotaci�n de" intrusos (hackers). Seg�n Wikipedia :

Cross site scripting (XSS) es un tipo de explotaci�n de la seguridad de inform�tica, una explotaci�n donde informaci�n de un contexto, donde no hay confianza, se puede insertar a otro contexto, donde si hay. Se puede armar un ataque desde el contexto confiado. http://es.wikipedia.org/wiki/XSS

Esto puede ocurrir si un usuario sabio trata de manipular las informaci�n de Javascript. Por ejemplo, quizas un hacker intente mostrar otro producto o categor�a. Es m�s probable que el hacker trate de utilizar los par�metros de sus p�ginas para ejecutar sus propios mandatos. Algunos gratis (como en cerveza) algunas formas de combatir �sto es mandar peticiones "POST" en vez de "GET", y cerciorarse de que su Javascript mande informaci�n adicional que asegure que la petici�n haya venido de un lugar v�lido (en este caso, la p�gina en su sitio). Adem�s, es importante asegurarse de �reas de datos, no importa tan trivial, se limpien de su c�digo Javascript y HTML. Surgen problemas cuando se permite �sto, as� es que es importante tener mucho cuidado cuando desarrollando un sitio.

Ahora, vamos al grano. Aunque todav�a en su infancia, Ajax ha dado nueva vida a la programaci�n de Javascript. Hay muchos programas populares, incluyendo dojo, Rico, Yahoo User Interface library (YUI), el Google Web Toolkit (GWT). Todas estas herramientas ofrecen soporte de Ajax, y tienen aspectos positivos y negativos, el m�s popular es Prototype. Seg�n una encuesta de Ajaxian.com, 43% de los que fueron entrevistados lo usan.

Nuestro primer ejemplo ser� un alb�m sencillo. El primer paso ser� ir a http://prototype.conio.net/ y bajar el archivo de Javascript. Cuando se termine �sto, aseg�rese de que su p�gina lo incluya.

El HTML b�sico de nuestro ejemplo sigue:

<button onclick='showPhoto("apple");'>Show Apple</button>
<button onclick='showPhoto("orange");'>Show Orange</button>
<button onclick='showPhoto("banana");'>Show Banana</button>

<div id='photo'>
<img src="apple.jpg" />
</div>

El prop�sito de este c�digo es tener un elemento de HTML con una identificaci�n �nica, en este caso 'photo'. Los botones tienen controladores de eventos "onClick" fijos para que llamen una funci�n espec�fica cuando se indica. Ahora lo de Javascript:

function showPhoto(fruit)
{
params = 'fruit='+fruit;
var myAjax = new Ajax.Updater( 'photo', 'photo.php', {parameters: params});
}
</script>

La biblioteca de prototipos tiene una clase ya hecha que se llama Ajax, lo cual es sumamente interesante, y tiene una funci�n �til que se llama Actualizador "Updater". La funci�n de actualizador lleva la identificaci�n para que se actualice con el contenido nuevo, la p�gina a donde se manda el contenido (llamado el Manejador de Petici�n "Request Handler"), y los par�metros que se mandan al Manejador de Petici�n. Los par�metros est�n en el Object Notation (JSON) formato de JavaScript. Yo uso PHP en casi todo el desarrollo, entonces uso 'photo.php' como manejador de petici�n. Cualquier lenguaje de programaci�n podr�a reemplacer PHP en este respecto su comple con el prop�sito principal. Mi photo.php ocupa el "fruit" par�metro, pone un '.jpg' al final, e imprime una etiqueta de imagen.

<?php
//Get Post
$fruit = $_POST['fruit'];
$image = $fruit.'.jpg';
print "<img src='$image'>";
?>

Un ejemplo funcionalmente completo est� aqu�. Obviamente, es un ejemplo muy sencillo, pero lo bonito de Ajax es que se adapta con gracia. Un desarrollador es capaz de mantener toda la l�gica fuera de Javascript y dentro de su lenguaje de desarrollo principle, a la vez manteniendo su Javascript peque�o y discreto . Ajax es �til para rastrear a los usuarios y mandar una petici�n hasta cuando no hay un resultado que uno quisiera mostrar. Javascript puede mandar peticiones continuamente de regreso al servidor para ver por cu�nto tiempo un usuario ha estado en el sistema, por ejemplo. Tambi�n se puede usar para analizar los datos del usuario para validaci�n o se puede usar para fijar cookies que se necesitan en otro lado del sitio.

Otra herramienta �til que existe en la biblioteca de prototipos es la habilidad de actualizar multiples datos a la misma vez. La manera "tradicional" de hacer �sto es hacer que el menejador de petici�n script imprima XML de su petici�n, y que Javascript analice y extraiga la informaci�n necesaria. Una forma m�s intuitiva, es usar Javascript de su Manejador de Petici�n.

Por ejemplo, usamos lo siguiente como nuestro c�digo HTML:

<input name='num' id='num' />
<button onclick="calculate()">Calculate Number</button>
<div id='number_box'>
10
</div>

Entonces uso el siguiente orden de javacript para cambiar el contenido de la caja num�rica:

function calculate()
{
params = 'number='+$F('num');
var myAjax = new Ajax.Request(
'number.php',
{
parameters: params,
evalScripts: true
}
);
}
</script>

La diferncia m�s grande en este orden es que utilizamos la funci�n de Ajax.Request en vez de la de Ajax.Updater. Esta funci�n general permite que regrese informaci�n m�s estructurada que la funci�n Update. Tambi�n permite que se ejecute el Javascript que regresa. Esto se hace utilizando el par�metro de evalScripts que se manda con el orden. Este c�digo tambi�n introduce la funci�n de $F() function. Lo que logra esta funci�n, es regresar el valor de un elemento de forma, sin atravesar manualmente la p�gina de HTML. Los datos de la forma deben tener una identificai�n �nica, pero la funci�n sirve sin falla.
El c�digo abajo agrega algo interesante al Javascript, la funci�n $. Lo que hace esta funci�n es regresar el elemento do HTML que se busca, o una serie de elementos si se encuentra m�s.

Mi p�gina de Manejador de Petici�n simplemente actualiza el contenido de la caja num�rica en la p�gina, Y �so cambia el color del contenido basado en el signo.

El c�digo del php correspondiente se ve as�:

<?
$number = $_POST['number'];
header("Content-type: text/javascript");
if($number > 0)
{
        $new_number = $number * 1000;
      print "$('number_box').innerHTML = $new_number ;";
        print "$('number_box').style.color = 'silver';";
}
if($number < 0)
{
        $new_number = $number * -1000;
        print "$('number_box').innerHTML = $new_number ;";
        print "$('number_box').style.color = 'red'";
}
?>

El c�digo completo se ve as� aqu�.

Definiciones

AJAX son las iniciales de Asynchronous JavaScript y XML.
AJAX no es un lenguaje nuevo de programaci�n, sino una nueva manera de usar estandares existentes.
con AJAX puede crear mejores aplicaciones web, que son m�s r�pidas, y m�s faciles de usarse.
AJAX se base en ordenes de JavaScript y HTTP.
AJAX es un tipo de programaci�n hecha popular en 2005 por Google (con Google Suggest).

Hospedaje de AJAX