unijimpe » AJAX http://blog.unijimpe.net Desarrollo Web, SEO, Adsense Mon, 28 Nov 2011 03:18:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Sikbox: Live Search en tu Webhttp://blog.unijimpe.net/sikbox-live-search-en-tu-web/ http://blog.unijimpe.net/sikbox-live-search-en-tu-web/#comments Mon, 17 Nov 2008 05:08:52 +0000 unijimpe http://blog.unijimpe.net/?p=966 Sikbox es un servicio que te permitirá incluir un buscador que uso de AJAX para mostrar los resultados automáticamente, se pueden configurar la interface y los resultados ademas de tener búsqueda de texto o de imágenes.…

]]> Sikbox es un servicio que te permitirá incluir un buscador que uso de AJAX para mostrar los resultados automáticamente, se pueden configurar la interface y los resultados ademas de tener búsqueda de texto o de imágenes.

Sikbox esta basado en Yahoo! Search BOSS para obtener los resultados y jQuery para los efectos y AJAX. Incluye dos tipos de búsqueda: texto e imágenes además de mostrar los resultados con paginación en una misma interfaz.

Como utilizar Sikbox
El uso de este servicio es muy sencillo para ello solo hace falta incluir una línea de código en nuestro web. El código consiste en una llamada a un archivo Javascript de la forma:

  1. <script src="http://sikbox.com/magic.js?d=domain.com&r=5&s=grey"
  2.  type="text/javascript"></script>

Donde se tienen los siguientes parámetros URL los cuales sirven para configuración:

  • d: es el nombre dominio donde se realizará la búsqueda
  • r: numero de resultados a mostrar por pagina.
  • s: estilo a aplicar para los resultados (default, bezel, dark, grey, minimalist).

Como pueden ver el servicio es muy potente y muy sencillo de implementar, en definitiva una excelente herramienta que facilitará la búsqueda de información para nuestros visitantes.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/sikbox-live-search-en-tu-web/feed/ 2 TableSorter jQuery Pluginhttp://blog.unijimpe.net/tablesorter-jquery-plugin/ http://blog.unijimpe.net/tablesorter-jquery-plugin/#comments Thu, 16 Oct 2008 06:08:53 +0000 unijimpe http://blog.unijimpe.net/?p=933 TableSorter es un plugin para jQuery que te pemitirá convertir las tradicionales tablas de datos en tablas interactivas con la posibilidad de ordenar los datos por columnas y todo ello con pocas líneas de código.

Entre …

]]> TableSorter es un plugin para jQuery que te pemitirá convertir las tradicionales tablas de datos en tablas interactivas con la posibilidad de ordenar los datos por columnas y todo ello con pocas líneas de código.

Entre las características mas destacables tenemos: ordenamiento por múltiples columnas, interpreta y ordena por texto, URLs, enteros, moneda, números flotantes, direcciones IP, fecha, hora entre otros. Adicionalmente es soportado en la mayoría de browsers (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+).

Utilizando TableSorter
Para utilizar esta librería lo primero es descargar la ultima versión de jQuery y luego el archivo jquery.tablesorter.js. Luego de ello incluimos estas librerías en el header de nuestro HTML.

  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/jquery.tablesorter.js"></script>

Lo siguiente es incluir nuestra tabla de forma normal, teniendo cuidado en asignarle un identificador y utilizar los tags thead y tbody para separar los títulos del contenido en la tabla como se muestra a continuación.

  1. <table id="myTable">
  4.     <th>Last Name</th>
  5.     <th>First Name</th>
  6.     <th>Email</th>
  7.     <th>Due</th>
  8.     <th>Web Site</th>
  9. </tr>
  10. </thead>
  13.     <td>Smith</td>
  14.     <td>John</td>
  15.     <td>jsmith@gmail.com</td>
  16.     <td>$50.00</td>
  17.     <td>http://www.jsmith.com</td>
  18. </tr>
  20.     <td>Bach</td>
  21.     <td>Frank</td>
  22.     <td>fbach@yahoo.com</td>
  23.     <td>$50.00</td>
  24.     <td>http://www.frank.com</td>
  25. </tr>
  27.     <td>Doe</td>
  28.     <td>Jason</td>
  29.     <td>jdoe@hotmail.com</td>
  30.     <td>$100.00</td>
  31.     <td>http://www.jdoe.com</td>
  32. </tr>
  34.     <td>Conway</td>
  35.     <td>Tim</td>
  36.     <td>tconway@earthlink.net</td>
  37.     <td>$50.00</td>
  38.     <td>http://www.timconway.com</td>
  39. </tr>
  40. </tbody>
  41. </table>

Para finalizar hacemos un llamado a la función tablesorter indicando mediante el identificador a que tabla le aplicamos el ordenamiento.

  1. <script type="text/javascript">
  2. $(document).ready(function()
  3.     {
  4.         $("#myTable").tablesorter();
  5.     }
  6. );
  7. </script>

Con esto ya tenemos nuestra tabla con las opciones para ordenar, obviamente lo que le hace falta es aplicarlo estilos para mejorar la apariencia con lo cual logramos obtener un buen resultado como el mostrado a continuación.

Obviamente este plugin tiene muchas opciones adicionales como definir ordenamientos iniciales, funciones para llamar al ordenamiento desde otros elementos entre otros, todo ello muy detallado y con ejemplos en el web original de TableSorter. Sin duda esta será una herramienta para mejorar la interactividad con la información que deseamos mostrar en nuestros webs.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/tablesorter-jquery-plugin/feed/ 8 jqPuzzle: Puzzles con jQueryhttp://blog.unijimpe.net/jqpuzzle-puzzles-con-jquery/ http://blog.unijimpe.net/jqpuzzle-puzzles-con-jquery/#comments Mon, 29 Sep 2008 18:23:34 +0000 unijimpe http://blog.unijimpe.net/?p=921 jqPuzzle es un plugin para jQuery que te permitirá crear rápidamente Puzzles o rompecabezas utilizando cualquier imagen y así sorprender y entretener a tus amigos y familiares.

Utilizando jqPuzzle
Lo primero es descargar la librería jQuery…

]]> jqPuzzle es un plugin para jQuery que te permitirá crear rápidamente Puzzles o rompecabezas utilizando cualquier imagen y así sorprender y entretener a tus amigos y familiares.

Utilizando jqPuzzle
Lo primero es descargar la librería jQuery y luego jqPuzzle en encontrarás los archivos jquery.jqpuzzle.js y la hoja de estilos jquery.jqpuzzle.css. Entonces el siguiente paso es incluir estos archivos en el header de nuestro HTML que deseamos.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.jqpuzzle.js"></script>
  3. <link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />

Luego de ello, incluimos una imagen en nuestro HTML y le asignamos el estilo jqPuzzle de la siguiente forma:

  1. <img src="photo.jpg" alt="My Desktop" class="jqPuzzle" />

Con esto ya tenemos nuestro puzzle funcionado, el cual tiene las opciones de mezclar los bloques, previsualizar la imagen original y mostrar los números con la posición de cada imagen. Una versión funcionando la pueden ver en jqPuzzle.

El puzzle generado por defecto es de 4x4, si quieres modificar estos valores o modificar otras opciones adicionales puedes visitar la documentación de este plugin en jqPuzzle: How to Use

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/jqpuzzle-puzzles-con-jquery/feed/ 0 SimplePie Livehttp://blog.unijimpe.net/simplepie-live/ http://blog.unijimpe.net/simplepie-live/#comments Sun, 21 Sep 2008 23:52:40 +0000 unijimpe http://blog.unijimpe.net/?p=906 Los desarrolladores de SimplePie han lanzado un servicio gratuito y sin registro llamado SimplePie Live que te permite crear e incluir un lector de Feeds en tu web, todo ello utilizando solamente Javascript.

El servicio funciona …

]]> Los desarrolladores de SimplePie han lanzado un servicio gratuito y sin registro llamado SimplePie Live que te permite crear e incluir un lector de Feeds en tu web, todo ello utilizando solamente Javascript.

El servicio funciona internamente con SimplePie y devuelve los resultados en JSON para que se pueda acceder a los resultados del Feed sin necesidad de ningún lenguaje de servidor, solamente Javascript.

Como utilizar SimplePie Live
Para utilizar este servicio, lo primero es incluir la librería base.js directamente desde los servidores de SimplePie en el header de nuestro HTML.

  1. <script type="text/javascript"
  2. src="http://live.simplepie.org/app/0.5/base.js"></script>

Luego podremos hacer uso de la función SimplePie, el cual recibe como parámetro el URL del Feed que deseamos leer y una función que se ejecutará cuando se haya completado la carga de los datos.

  1. var feed = new SimplePie("URL", {onSuccess: function});

Ahora que ya conocemos la sintaxis, procedemos a crear las variables y procedimientos necesarios para mostrar los datos devueltos por SimplePie. Previamente vamos a crear un div donde mostraremos los resultados.

  1. <div id="divfeed"><p>Cargando...</p></div>

Primero, creamos una variable con el URL del Feed que vamos a leer, luego llamamos a la función SimplePie el cual ejecutará showFeed cuando se haya completado la carga de los datos.

  1. var feedURL = 'http://feedproxy.google.com/unijimpe';
  2. var feedDIV = document.getElementById('divfeed');
  3. var feedLIV = new SimplePie(feedURL, {onSuccess: showFeed});
  4. var tmp = "";
  5. function showFeed (feed) {
  6.     var qty = feed.itemQuantity;
  7.     tmp+= '<p>'
  8.     tmp+= '<h2>'+feed.title+'</h2>';
  9.     tmp+= '<em>'+ feed.description+'</em>';
  10.     tmp+= '</p>';
  11.     for (var x = 0; x <qty; x++) {
  12.         var item = feed.items[x];
  13.         tmp+= '<p>';
  14.         tmp+= '<strong>' + (x+1) + '. </strong>';
  15.         tmp+= '<a href="'+item.permalink+'">'+item.title+'</a>';
  16.         tmp+= '<br>' + '<em>' + item.date + '</em>';
  17.         tmp+= '</p>';
  18.         tmp+= '<p>' + item.description+ '</p>';
  19.     }
  20.     feedDIV.innerHTML = tmp;
  21. }

Como podemos ver, dentro de la función showFeed, tenemos acceso a los datos devueltos, estos datos están dentro de una variable como un objeto por lo que podemos acceder a cada uno de sus elementos como si fueran propiedades por lo cual es muy fácil de generar nuestro código html para mostrarlo en web.

En nuestro caso hemos utilizado las propiedades básicas de un Feed (title, data, description) pero si deseas un referencia completa de métodos y propiedades puedes leer SimplePie Documentation: API Reference

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/simplepie-live/feed/ 0 FancyUploadhttp://blog.unijimpe.net/fancyupload/ http://blog.unijimpe.net/fancyupload/#comments Thu, 31 Jul 2008 05:59:38 +0000 unijimpe http://blog.unijimpe.net/?p=872 FancyUpload es una extensión de Mootools que permite hacer upload de archivos incluyendo barra de progreso. Esta basado en Swiff la clase de Mootools que permite incluir archivos SWF en HTML.

Si hacemos uso de la …

]]> FancyUpload es una extensión de Mootools que permite hacer upload de archivos incluyendo barra de progreso. Esta basado en Swiff la clase de Mootools que permite incluir archivos SWF en HTML.

Si hacemos uso de la etiqueta input file no se puede hacer un seguimiento del progreso del upload y mucho menos aplicar estilos para integrarse correctamente con nuestro diseño. Esta librería utiliza un SWF que contiene las funciones necesarias para detectar el progreso de la carga, restringir a determinado tipo de archivos, entre otras opciones las cuales son características de flash.

Obteniendo los archivos
Lo primero es obtener los archivos necesarios: mootools.js desde Mootools, luego los archivos FancyUpload2.js, Swiff.Uploader.js, Fx.ProgressBar.js y Swiff.Uploader.swf desde FancyUpload.

Incluyendo los archivos
Lo siguiente es incluir los archivos recién descargados en nuestro HTML (En nuestro caso hemos colocado los Javascript en una carpeta llamada js), esto lo hacemos de la forma:

  1. <script type="text/javascript" src="js/mootools.js"></script>
  2. <script type="text/javascript" src="js/Swiff.Uploader.js"></script>
  3. <script type="text/javascript" src="js/Fx.ProgressBar.js"></script>
  4. <script type="text/javascript" src="js/FancyUpload2.js"></script>

Creando el Formulario
Lo que necesitamos crear son dos elementos, uno llamado demo-status que mostrará el progreso de la carga y demo-list que contiene la lista de archivos a subir. Además de ello necesitamos dos botones o links uno para seleccionar el archivo y el otro para iniciar el upload.

  1. <div id="demo-status" class="hide">
  2. <a href="#" id="demo-browse-all">Browse Files</a> |
  3. <a href="#" id="demo-upload">Upload</a>
  5.     <strong class="overall-title">Overall progress</strong><br />
  6.     <img src="img/bar.gif" class="progress overall-progress" />
  7. </div>
  9.     <strong class="current-title">File Progress</strong><br />
  10.     <img src="img/bar.gif" class="progress current-progress" />
  11. </div>
  12. <div class="current-text"></div>
  13. </div>
  14. <ul id="demo-list"></ul>

Implementando el Upload
Creamos una instancia de la clase FancyUpload2 el cual recibe como parámetros el elemento html para el estado de la carga, el elemento para el listado de archivos y luego un array de opciones donde indicamos a donde enviar los archivos, cual será el nombre con el cual se enviaran los archivos y finalmente la ruta al swf que contiene las funciones necesarias para el funcionamiento de esta librería.

  1. window.addEvent('load', function() {
  2.     var swiffy = new FancyUpload2(
  3.         $('demo-status'),
  4.         $('demo-list'),
  5.         {
  6.             'url': 'upload.php',
  7.             'fieldName': 'archivo',
  8.             'path': 'Swiff.Uploader.swf'
  9.         }
  10.     );
  11.     $('bt-browse').addEvent('click', function(){
  12.         swiffy.browse();
  13.         return false;
  14.     });
  15.     $('bt-upload').addEvent('click', function(){
  16.         swiffy.upload();
  17.         return false;
  18.     });
  19. });

Hay que notar también que hemos agregado los eventos para los botones que abrirán el selector de archivos y el inicio del upload.

Guardando los archivos con PHP
PHP recibe los archivos de forma normal y procedemos a guardarlo, para ello accedemos al archivo subido con el nombre asignado en el parámetro fieldName, entonces obviando la validación por propósitos de facilitar la explicación tendríamos:

  1. // file: upload.php
  2. if (isset($_FILES['archivo'])) {
  3.     $file = $_FILES['archivo']['tmp_name'];
  4.     $name = $_FILES["archivo"]['name'];
  5.     if (copy($file, "files/".$name)) {
  6.         $status = "Archivo subido: <b>".$name."</b>";
  7.     } else {
  8.         $status = "Error al subir el archivo";
  9.     }
  10. } else {
  11.     $status = 'Archivo vacio intentelo nuevamente!';
  12. }
  13. echo $status;

Pueden ver el ejemplo funcionando en: http://samples.unijimpe.net/fancyupload/ en donde se puede observar lo intuitiva que resulta ser la pantalla para subir archivos. Esto es muy importante por que le permite a los usuarios saber si efectivamente se esta subiendo los archivos y sobre todo que nos hemos olvidado del típico formulario al cual no se le podía aplicar estilos de forma adecuada.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/fancyupload/feed/ 41 Google AJAX Libraries APIhttp://blog.unijimpe.net/google-ajax-libraries-api/ http://blog.unijimpe.net/google-ajax-libraries-api/#comments Wed, 28 May 2008 03:59:14 +0000 unijimpe http://blog.unijimpe.net/?p=849 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 …

]]> 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.

  1. <!-- versión minificada -->
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js"></script>
  3. <!-- versión normal -->
  4. <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.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/google-ajax-libraries-api/feed/ 5 Introducción a Mootoolshttp://blog.unijimpe.net/introduccion-a-mootools/ http://blog.unijimpe.net/introduccion-a-mootools/#comments Thu, 28 Feb 2008 02:37:26 +0000 unijimpe http://blog.unijimpe.net/introduccion-a-mootools/ Mootools es un framework Javascript muy potente que nos facilitará el desarrollo de interfaces visuales, efectos, manipulación del DOM, manejo de AJAX, entre otras muchas opciones. Además de ser muy ligera, tiene soporte para OOP y …

]]> Mootools es un framework Javascript muy potente que nos facilitará el desarrollo de interfaces visuales, efectos, manipulación del DOM, manejo de AJAX, entre otras muchas opciones. Además de ser muy ligera, tiene soporte para OOP y además tiene multitud de plugins que te permitirán implementar variedad de aplicaciones fácilmente.

mootools.gif

Empezando con Mootools
Lo primero es descargar la librería, para ello puedes acceder a Download Mootools, donde seleccionas los módulos a utilizar y el método de compresión, para nuestro caso seleccionamos todos los módulos. Descargaremos un archivo con el nombre mootools-release-x.xx.js.txt (Donde x.xx es la versión), el cual lo renombrados a mootools.js y lo colocamos al directorio de nuestro proyecto web.

El siguiente paso es incluir la librería en nuestro html, para poder utilizarlo, para ello colocamos en el header lo siguiente.

  1. <script type="text/javascript" src="js/mootools.js"></script>

Detectando los Eventos de Carga
Lo siguiente que debemos hacer el crear un detector de eventos para ejecutar nuestras acciones una vez que se ha cargado la página. Si se llama a las funciones cuando aun no se ha completado la carga se generar errores pues aun hay elementos que no están disponibles.

Para ello existen dos eventos: domready que se ejecuta cuando todos los elementos de la página están listos, pero no espera por las imágenes y load que se ejecuta cuando toda la página incluyendo las imágenes se ha cargado, entonces tendríamos:

  1. <script type="text/javascript">
  2. window.addEvent('domready', function() {
  3.      // código - carga sin imágenes completa
  4. });
  5. window.addEvent('load', function() {
  6.      // código - carga con imágenes completa
  7. });
  8. </script>

Obviamente es mas rápido domready pues no espera que se carguen las imágenes pero ya se tiene disponible todos los elementos de la página para manipularlos.

La función $ (dolar)
La función $() es equivalente a document.getElementById() con el cual se puede acceder a un elemento mediante su identificador. Veamos los siguientes ejemplos:

  1. document.getElementById('myDiv'); // accede a mydiv
  2. $('myDiv'); // accede al elemento con id=mydiv

La función $$ (doble dolar)
La función $$() es equivalente a document.getElementsByTagName(), pero mas potente pues devuelve un array con los elementos que cumplen la condición.

  1. $$('div'); // Array de elementos Mootools
  2. $$('a.external'); // Array de enlaces con la class=external
  3. $$('a[href=#]'); // Array de enlaces con href=#

Nuestro Primer Ejemplo
Una vez que tenemos los conceptos básicos, podemos implementar nuestro primer ejemplo, haremos que al cargar la página se aplique el estilo link a todos los enlaces de nuestro html, además pintamos de color rojo al div con nombre diverror, para ello tendríamos el siguiente código:

  1. <script type="text/javascript">
  2. window.addEvent('domready', function() {
  3.     $$('a').addClass('link');
  4.     $('diverror').setStyles('color: #CC0000');
  5. });
  6. </script>

Mas Información
Obviamente este es una pequeña introducción con los conceptos más básicos, mas adelante iremos desarrollando mas temas que nos ayudarán a comprender mas las capacidades de Mootools. Para mas información pueden les dejo una pequeña lista con recursos:

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/introduccion-a-mootools/feed/ 6 Introducción a AJAXhttp://blog.unijimpe.net/introduccion-a-ajax/ http://blog.unijimpe.net/introduccion-a-ajax/#comments Wed, 26 Dec 2007 01:28:22 +0000 unijimpe http://blog.unijimpe.net/introduccion-a-ajax/ 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 …

]]> 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.

  1. function createXMLHttpRequest() {    
  2.     if (window.ActiveXObject) {     
  3.         return new ActiveXObject("Microsoft.XMLHTTP");  
  4.     } else if (window.XMLHttpRequest) {     
  5.         return new XMLHttpRequest();    
  6.     }   
  7. }

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.

  1. Validar Email con AJAX: <br>
  2. <input type="text" id="email" name="email"><br>
  3. <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.

  1. var xmlHttp;
  2. function validMail() {
  3.     var email = document.getElementById("email");
  4.     var url = "validate.php?email=" + escape(email.value);
  5.     xmlHttp = createXMLHttpRequest();
  6.     xmlHttp.open("GET", url);
  7.     xmlHttp.onreadystatechange = onCompleteData;
  8.     xmlHttp.send(null);
  9. }
  10. function onCompleteData() {
  11.     if (xmlHttp.readyState == 4) {
  12.         alert(xmlHttp.responseText);
  13.     }
  14. }

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:

  3. <title>Ajax Demo  - unijimpe</title>
  4. <script language="JavaScript" type="text/javascript">
  5. function createXMLHttpRequest() {   
  6.     if (window.ActiveXObject) {     
  7.         return new ActiveXObject("Microsoft.XMLHTTP");  
  8.     } else if (window.XMLHttpRequest) {     
  9.         return new XMLHttpRequest();    
  10.     }   
  11. }
  12. var xmlHttp;
  13. function validMail() {
  14.     var email = document.getElementById("email");
  15.     var url = "validate.php?email=" + escape(email.value);
  16.     xmlHttp = createXMLHttpRequest();
  17.     xmlHttp.open("GET", url);
  18.     xmlHttp.onreadystatechange = onCompleteData;
  19.     xmlHttp.send(null);
  20. }
  21. function onCompleteData() {
  22.     if (xmlHttp.readyState == 4) {
  23.         alert(xmlHttp.responseText);
  24.     }
  25. }
  26. </script>
  27. </head>
  29. Validar Email con AJAX: <br>
  30. <input type="text" id="email" name="email"><br>
  31. <input type="button" id="bt" value="Send" onClick="validMail();">
  32. </body>
  33. </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.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/introduccion-a-ajax/feed/ 3 EasyDrag jQuery Pluginhttp://blog.unijimpe.net/easydrag-jquery-plugin/ http://blog.unijimpe.net/easydrag-jquery-plugin/#comments Wed, 10 Oct 2007 14:56:39 +0000 unijimpe http://blog.unijimpe.net/easydrag-jquery-plugin/ EasyDrag es un plugin para la popular librería javascript jQuery el cual te permitirá añadir la funcionalidad de Drag and drop o Arrastrar y soltar a elementos html de tu pagina. Esta librería permite agregar la …

]]> EasyDrag es un plugin para la popular librería javascript jQuery el cual te permitirá añadir la funcionalidad de Drag and drop o Arrastrar y soltar a elementos html de tu pagina. Esta librería permite agregar la funcionalidad de drag con sencillas lineas de código, además de ello tiene detectores de eventos con lo cual se pueden controlar los drag dependiendo de las acciones realizadas.

Utilización
Lo primero para utilizar EasyDrag es descargar JQuery y luego jquery.easydrag.js, este ultimo archivo contienen las funciones necesarias para el funcionamiento de esta librería.

El siguiente paso es añadir estas librerías al header de nuestro html, para ello utilizamos los tags script para incluirlas de la forma:

  1. <script src="jquery.js" type="text/javascript"></script>
  2. <script src="jquery.easydrag.js" type="text/javascript"></script>

Luego el siguiente paso es agregar la función easydrag al elemento que deseamos controlar de la siguiente forma:

  1. <script type="text/javascript">
  2. $(function(){
  3.     $("#box1").easydrag();
  4. });
  5. </script>

Uniendo estas lineas tendremos el siguiente código con el cual podemos hacer Drag a un elemento html.

  3. <title>EasyDrag Demo</title>
  4. <script src="jquery.js" type="text/javascript"></script>
  5. <script src="jquery.easydrag.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. $(function(){
  8.     $("#box1").easydrag();
  9. });
  10. </script>
  11. <style type="text/css">
  12. #box1 {
  13.     font-family: "Trebuchet MS", Tahoma, Verdana;
  14.     background-color: yellow;
  15.     padding: 5px;
  16.     border: 2px solid orange;
  17.     width: 200px;
  18. }
  19. </style>
  20. </head>
  22. <h3>EasyDrag jQuery Plugin </h3>
  23. <div id="box1">Versi&oacute;n demo de Easy Drag</div>
  24. </body>
  25. </html>

También existe la posibilidad de detectar cuando se termina de hacer el drag, para ello se utiliza el evento ondrop, con el cual se pude llamar a una acción de la siguiente forma:

  1. <script type="text/javascript">
  2. $(function(){
  3.     $("#box1").easydrag();
  4.     $("#box1").ondrop(function(){ alert("Dropped"); });
  5. });
  6. </script>

Como pueden ver es una forma muy sencilla de crear este tipo de efectos para nuestras páginas html. Les dejo el ejemplo funcionando en: http://samples.unijimpe.net/easydrag.html

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/easydrag-jquery-plugin/feed/ 3 JQuery UIhttp://blog.unijimpe.net/jquery-ui/ http://blog.unijimpe.net/jquery-ui/#comments Tue, 18 Sep 2007 15:15:34 +0000 unijimpe http://blog.unijimpe.net/jquery-ui/ jQuery UI es un conjunto de widget o aplicaciones pequeñas que permiten personalización e interactividad, desarrolladas utilizando JQuery se pueden utilizar para desarrollas aplicaciones altamente interactivas y de gran calidad.

El corazón de esta librería contiene …

]]> jQuery UI es un conjunto de widget o aplicaciones pequeñas que permiten personalización e interactividad, desarrolladas utilizando JQuery se pueden utilizar para desarrollas aplicaciones altamente interactivas y de gran calidad.

jquery-ui.gif

El corazón de esta librería contiene funciones para diferentes interacciones con el mouse, arrastrar y soltar, ordenamiento, selecciones y redimensión de elementos. Basado en estas funciones se implementan widgets como: acordeon, selectores de fechas, pantallas de dialogo, sliders, ordenamiento de tablas y tabs.

Puedes ver los ejemplos en la web oficial y se encontrarán con una amplia variedad de formas de utilizar esta librería.

jquery-ui-samples.gif

Descargar jQuery UI
Esta librería necesita JQuery para su funcionamiento, para descargarlo puedes hacerlo desde: jquery.ui-1.0.zip con un tamaño de 101Kb es muy ligero comparado con lo que se puede lograr. Además existe la posibilidad de seleccionar los elementos y/o temas que se desean descargar.

Ejemplo
Veamos un ejemplo muy sencillo, crearemos un elemento html y lo convertiremos en arrastrable o draggable, para ello empleamos la propiedad draggable, donde se le define que elemento sera el que se puede arrastrar.

  1. $(".block").draggable();

Entonces implementando el HTML para verlo funcionar se tendría:

  3.   <script src="js/jquery.js"></script>
  4.   <script src="js/ui.mouse.js"></script>
  5.   <script src="js/ui.draggable.js"></script>
  6.   <script src="js/ui.draggable.ext.js"></script>
  8.   $(document).ready(function(){
  9.     $(".block").draggable();
  10.   });
  11.   </script>
  12.   <style>.block {
  13.    border: 2px solid #0090DF;
  14.    background-color: #68BFEF;
  15.    width: 150px;
  16.    height: 70px;
  17.    margin: 10px;
  18. }</style>
  19. </head>
  21. <div class="block"></div>
  22. </body>
  23. </html>

El resultado del ejemplo lo pueden ver en jquery-ui.htm, como ven sencillo y con un resultado de buena calidad. Para muchos desarrolladores esta librería contribuirá a lograr mejores interfaces en el desarrollo de nuestras aplicaciones.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/jquery-ui/feed/ 1