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.
<SCRIPT language="JavaScript" src="prototype.js" type="text/JavaScript"></SCRIPT>
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:
<script type="text/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:
<script type='text/JavaScript'>
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).