AJAX » unijimpe

Google AJAX Libraries API

27/05/2008
10:59 pm
unijimpe

Google AJAX Libraries API es un nuevo servicio mediante el cual Google aprovechando de su gran infraestructura alojará las principales Frameworks Javascript para enlazarlos directamente. Con ello podremos acelerar la carga de nuestras librerías y por consiguiente una mejor velocidad de nuestras web.

Este servicio, tienes varias cualidades muy importantes:

Uso del Cache del Browser: Si un usuario visita una Web, descargará la librería desde Google. Si posteriormente entra a otra web que utiliza la misma librería, esta ya no se descargará nuevamente si no se utilizará la copia en el cache de navegador.
Compresión Gzip: se encuentran habilitadas las transferencia de datos comprimidas en Gzip con lo cual hay menor transferencia de datos.
Versiones minificadas: al llamar a una librería, se hará uso de las versiones minificadas, es decir donde se han eliminado los comentarios, saltos de linea, espacios en blanco innecesarios y reemplazado nombres de variables por otras mas cortas. Esto también acelera la carga del archivo.
Archivos distribuidos por en CDN de Google: se utiliza toda la infraestructura de Google, por lo cual el archivo se puede obtener de cualquiera de lo muchos servidores alrededor del mundo con los que cuenta Google.
Optimización de Header: se utilizaran headers innecesarios y tampoco se guardaran cookies lo cual es un ahorra de bytes.

Inicialmente se han puesto a disposición las librerías mas populares, pero se planea ir aumentando estas a medida que los usuarios lo soliciten. Las librerías disponibles actualmente son: jQuery, prototype, script.aculo.us, MooTools, dojo.

Como Utilizarlo
La forma mas sencilla de utilizar este servicio es enlazar directamente a los archivos utilizando el tag script como se hace normalmente, por ejemplo si deseamos cargar MooTools.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js"></script>

Para mayor información acerca de este servicio pueden leer la documentación en Developer's Guide, también pueden leer una explicación mas detallada del modo de uso en Google Ajax Libraries API, ajax sobre la arquitectura Google y finalmente les dejo un video con la presentación y explicación del funcionamiento de esta librería.

Cargando Flash

Posts Relacionados

Introducción a AJAX

25/12/2007
8:28 pm
unijimpe

AJAX (Asynchronous JavaScript And XML) es una técnica de desarrollo web que permite comunicar el navegador del usuario con el servidor en segundo plano, es decir se pueden hacer cambios sobre la misma página sin necesidad de recargarla.

El Objeto XMLHttpRequest
XMLHttpRequest es el objeto primario que nos permitirá la comunicación con el servidor de forma asíncrona, originalmente fue implementada para Internet Explorer y basada en un ActiveX y ahora los otros navegadores también la soportan.

Entonces lo primero es detectar el tipo de navegador y crear una instancia del objeto XMLHttpRequest para poder utilizarlo posteriormente, para ello implementamos la siguiente función en Javascript.

function createXMLHttpRequest() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}

Métodos y Propiedades
El objeto XMLHttpRequest dispone de los siguientes métodos:

send(content): permite enviar datos al servidor.
abort(): termina o cancela la petición actual.
getAllResponseHeaders(): devuelve todos los headers de respuesta a la petición HTTP como pares key/valor.
getResponseHeader("header"): devuelve una cadena con el valor del header especificado en "header".
open("method", "url"): permite realizar llamadas al servidor, el argumento del method puede ser GET, POST, o PUT.
setRequestHeader("header", "value"): define un header especifico al valor dado por open().

Además de ello las propiedades disponibles son las siguientes:

onreadystatechange: detector de eventos para ejecutar una función cada vez que se detecta el cambio en el estado de la petición.
readyState: es el estado de la petición. Se tienes cinco estados posibles: 0 (sin iniciar), 1 (cargando), 2 (cargado), 3 (interactuando), 4 (completo)
responseText: respuesta del servidor como un cadena de texto.
responseXML: respuesta del servidor como un XML.
status: código de estado HTTP del servidor (200, 404, etc.)
statusText: código de estado HTTP del servidor como texto (OK, Not Found, etc)

Ejemplo de Interacción
Sea que tenemos un campo de texto en donde un usuario ingresa su email, deseamos que nuestra página valide automáticamente si este email es correcto. Lo primero que hacemos es detectar que el usuario sale del campo de ingreso de email y un boton para llamar a una función Javascript que se encarga de verificar el email.

Validar Email con AJAX: <br>
<input type="text" id="email" name="email"><br>
<input type="button" id="bt" value="Send" onClick="validMail();">

El siguiente paso es crear la función validMail, el cual tomará en email ingresado lo enviará a un script llamado validate.php que devolverá si es o no valido.

var xmlHttp;
function validMail() {
var email = document.getElementById("email");
var url = "validate.php?email=" + escape(email.value);
xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = onCompleteData;
xmlHttp.send(null);
}
function onCompleteData() {
if (xmlHttp.readyState == 4) {
alert(xmlHttp.responseText);
}
}

Como se puede observar, creamos una instancia del objeto XMLHttpRequest utilizando la función creada anteriormente, luego procedemos a llamar al PHP utilizando el método GET para enviar los datos, luego cuando se detecta el cambio en el estado de la petición ejecutaremos la función onCompleteData, la cual la definimos posteriormente y se encarga de lanzar un alert con la respuesta del servidor.

Uniendo todos el código obtenemos nuestro ejemplo de AJAX funcionando y sin utilizar ninguna librería externa para ello:

<html>
<head>
<title>Ajax Demo - unijimpe</title>
<script language="JavaScript" type="text/javascript">
function createXMLHttpRequest() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
var xmlHttp;
function validMail() {
var email = document.getElementById("email");
var url = "validate.php?email=" + escape(email.value);
xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = onCompleteData;
xmlHttp.send(null);
}
function onCompleteData() {
if (xmlHttp.readyState == 4) {
alert(xmlHttp.responseText);
}
}
</script>
</head>
<body>
Validar Email con AJAX: <br>
<input type="text" id="email" name="email"><br>
<input type="button" id="bt" value="Send" onClick="validMail();">
</body>
</html>

Pueden ver el ejemplo funcionando en ajax-demo.html y como como siempre les dejamos los archivos fuente para que lo descarguen y hagan sus experimentos.

Posts Relacionados

AJAX, General, HTML
1 Comentario

Tutorial: Ajax Youtube Search

30/07/2007
9:54 am
unijimpe

La presente es una breve guía para implementar un buscador de vídeos Youtube hecho en AJAX. Para ello utilizaremos el API de Youtube, el cual nos permite acceder a la información de los vídeos. Lo segundo que utilizaremos es la librería Adobe Spry el cual nos permitirá realizar nuestra interfaz en AJAX.

API de Youtube
Youtube ha desarrollado un API, mediante el cual previo registro como desarrollador se puede acceder a datos de los vídeos. Este API permite enviar diferentes parámetros y nos devolverá un XML con el resultado de nuestra consulta. Existen varias funciones para extraer datos listadas en la documentación pero nosotros utilizaremos solamente la función youtube.videos.list_by_tag el cual devuelve un listado de vídeos resultado de la búsqueda de una palabra o tag que nosotros enviamos.

Para hacer uso de este método podemos hacerlo mediante la siguiente ruta:

http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&dev_id=devid&tag=tag&page=page&per_page=perpage

En donde se tiene:

devid: es el ID del desarrollador.
tag: es la palabra o tag que deseamos buscar.
page: es el número de pagina que deseamos ver.
perpage: es la cantidad de resultados por pagina.

Creando un Proxy Youtube
Los primero es crear un archivo que haga las veces de proxy, es decir que convierta el archivo remoto del dominio de Youtube a nuestro dominio local con lo cual evitaremos problemas de crossdomain. Creamos un archivo llamado proxy.php en el cual recibimos dos parámetros tag y pag con el cual obtenemos el criterio y número de pagina a obtener, luego construimos el URL a consultar, luego abrimos el URL recién creado y lo imprimimos.

// functions
function getVariable($vparam, $vdefault) {
$result = $vdefault;
if (isset($vparam)) {
$result = $vparam;
}
return $result;
}
// youtube interface
$yt_keynum = "6jrOQnqPhLk";
$yt_squery = getVariable($_GET['tag'], "santana");
$yt_pagnum = getVariable($_GET['pag'], 1);
$yt_paglen = 10;
$yt_urltot = "http://www.youtube.com/api2_rest";
$yt_urltot.= "?method=youtube.videos.list_by_tag";
$yt_urltot.= "&dev_id=" . $yt_keynum;
$yt_urltot.= "&page=" . $yt_pagnum;
$yt_urltot.= "&per_page=" . $yt_paglen;
$yt_urltot.= "&tag=" . $yt_squery;
header('Content-Type: text/xml; charset=ISO-8859-1');
// ----------------
$lineas = file($yt_urltot);
foreach ($lineas as $lnum => $linea) {
echo $linea;
}

Obtenemos los datos con Adobe Spry
Los resultados que devuelve el API son XMLs, entonces utilizaremos Adobe Spry que tiene la cualidad que puede leer XMLs y mostrarlos directamente en una página web. Para los que aún no conoces de Spry pueden leer Tutorial de Adobe Spry para aprender a utilizarlo. Entonces descargamos los archivos de Spry y los colocamos en una carpeta lllamada inc en donde ubicaremos nuestros archivos js. Incluimos nuestras librerías a utilizar, primero los archivos de Spry (xpath.js y SpryData.js) luego swfobject.js para incluir el reproductor de flash y finalmente una archivo llamado functions.js en el cual colocaremos nuestras funciones javascript.

<script type="text/javascript" src="inc/xpath.js"></script>
<script type="text/javascript" src="inc/SpryData.js"></script>
<script type="text/javascript" src="inc/swfobject.js"></script>
<script type="text/javascript" src="inc/functions.js"></script>

A continuación definimos las variables en javascrip vartag el cual contendrá la palabra a buscar, varpag que es el número de página. Luego creamos un dataset en Adobe Spry con el cual obtenemos los datos de nuestro XML generado por el proxy creado anteriormente al cual le pasamos los parámetros de vartag y varpag. Luego creamos una variable con el path al nodo que deseamos acceder.

var vartag = "oasis";
var varpag = 1;
var varurl = "youtube.php"+"?tag="+vartag+"&pag="+varpag;
var varpath = "ut_response/video_list/video";
var dsYouTube = new Spry.Data.XMLDataSet(varurl, varpath);

El siguiente paso es crear el formulario en donde se escribirá el criterio de búsqueda, para ello incluimos un campo de texto y un botón que llamará a la función javascript getVideo encargada de llamar nuevamente al XML con el nuevo criterio de busqueda que definiremos posteriormente.

<input type="text" id="criterio" value="oasis">
<input type="button" value="Buscar" onClick="getVideo();">

Ahora escribimos los resultados del XML dentro del HTML, para ello creamos un región de Spry con la propiedad spry:region y luego escribiremos todos los nodos del XML con la propiedad spry:repeat. Luego podemos escribir el thumbnail, titulo, url y descripción de cada vídeo, escribiendo los nombres de los nodos del XML como se muestra a continuación.

<div spry:region="dsYouTube" spry:repeat="dsYouTube">
<img src="{thumbnail_url}" width="134" height="97"><br>
<a href="javascript:setVideo('{id}')">{title}</a><br>
<span>{url}</span><br>{description}<br>
<a href="javascript:setVideo('{id}')">[ play video ]</a><br>
<a href="download.php?v={id}">[ download video ]</a>
</div>

Luego creamos un div en donde imprimiremos el video utilizando SWFObject.

<div id="swfvideo">
Seleccione un video para reproducir.
</div>

Creando la funciones Javascript
Creamos un archivo llamado functions.js en el cual incluiremos nuestras funciones Javascript. La primera de ellas es setVideo el cual imprime el player de Youtube utilizando SWFObject, para ello recibe como parámetro el ID del video. Luego getId devuelve una referencia a un elemento HTML de acuerdo a su identificador. La siguiente es getVideo, la cual toma la palabra ingresada en el formulario y luego llama a setURL para obtener los datos nuevamente.

// JavaScript Document
function setVideo(idvideo) {
vurl = "http://www.youtube.com/v/"+idvideo;
vswf = new SWFObject(vurl,"idx","300","250","8","#FFFFFF");
vswf.addParam("menu", "false");
vswf.addParam("wmode", "transparent");
vswf.addParam("quality", "high");
vswf.write("swfvideo");
}
function getId(nameid) {
return document.getElementById(nameid);
}
function getVideo() {
varpag = 1;
vartag = getId("criterio").value;
vartag = vartag.replace(" ", "-");
setText("query", vartag);
dsYouTube.setURL(varurl+"?tag="+vartag+"&pag="+varpag);
dsYouTube.loadData();
}

Finalizando
Para finalizar, le agregamos un logo, un hoja de estilos para darle colores, paginación de resultados y un precargador de datos con lo cual lograremos obtener un buscador de videos Youtube hecho en AJAX. Pueden ver el resultado de este tutorial en: http://samples.unijimpe.net/youtube/. Para terminar con este tutorial les deje los archivos fuente con el buscador completo con todas las funcionalidades.

Posts Relacionados