Hace algunos meses atrás hablamos acerca de que el objeto XMLHttpRequest como parte de seguridad no permite mostrar ó llamar contenidos de sitios externos a donde se ejecuta dicho objeto. Hasta cierto punto esto es poco limitante si tenemos varios sitios web y deseamos que enlacen en tiempo real con Ajax. Pero justamente ante ese problema existe Ajax Cross Domain, que es un script que se encarga de mostrar contenido ó información de páginas externas a nuestro dominio, basta con especificar una url válida dentro de los parametros del archivo ACD.js

Ejemplo:

<script type="text/javascript" src="http://www.ajax-cross-domain.com/cgi-bin/ACD/ACD.js?uri=(http://216.92.176.52/?name=john)"></script>
<script type="text/javascript">alert(ACD.responseText);</script> 

Funcionamiento:

 

Puedes ver más en Ajax Cross Domain, donde encontraremos mucha documentación al respecto. 

Vía Ajaxian

Hace algunos meses atrás elaboramos el tutorial "Chat con Ajax" (parte 1 y 2) donde usamos PHP y MySQL para guardar los mensajes. Ahora en la sección Web Development de IBM encontramos un tutorial paso a paso para implementar un sistema de chat usando Prototype para trabajar Ajax, también con PHP y MySQL.

 

Enlaces: tutorial, código fuente 

Gaia Ajax Widget es una librería AJAX para ASP .NET, la cual incluye herramientas tales como:

• Ajax Menu
• Ajax DataGrid
• Ajax FishEye
• Ajax TreeView
• Ajax TabControl
• Ajax AutoCompleter
• Ajax ViewPort
• Ajax Timer
• Ajax Calendar
• Ajax Chat client
• Ajax Window with Vista skin
• Ajax Google Maps Mashup

Interesante herramienta para los desarrolladores en ASP .NET.

Con esto de las aplicaciones web 2.0, se han desarrollado una gran cantidad de utilidades/herramientas/framework para el desarrollo web con JavaScript, DHTML (HTML dínamico) y AJAX. He aquí el gran listado:

Ver Artículo Completo ››

Estas diapositivas de Borkweb muestran paso a paso los conceptos resumidos y prácticos de JavaScript, Ajax, DOM y jQuery (en inglés). 

¿Quieres saber cuál de los 3 framework más conocidos (Prototype, Mootools ó jQuery) es más rápido?

Para ello podemos hacer un test con SlickSpeed para saber cual de los 3 framework trabaja mejor con selectores. Podemos incluso modificar el código de esta utilidad para adecuarlo a nuestro gusto y probarlo con otros frameworks (ext, dojo, mochikit, etc).

1. Tutorial de Autocompletado con jQuery (Ajax), PHP y MySQL

Interesante tutorial (en inglés pero sencillo de entender) que te explica paso a paso como desarrollar tu propio cuadro de sugerencias (ó autocompletado) con jQuery. (demo, descarga)

2. Autocompletado con Mootools

Esta pequeña utilidad crea un cuadro de sugerencia no obstructivo y personalizable haciendo uso de Mootools. Compatible con IE 6+, Opera 9, Firefox 1.5+ y Safari 2+. Cuenta con documentación de cómo usarlo en su misma página web.

3. HOWTO: Usando "Ajax Agent" y PHP para autocompletado

Tutorial que te explica como crear un autocompletado usando el framework Ajax Agent (similar a Prototype, jQuery) y PHP en 2 pasos. (descarga) 

4. Autocompletado Simple con JavaScript

Utilidad hecha solo con JavaScript (no hace uso de Ajax) para crear un autocompletado fácil de entender e implementar. (descarga)

5. Autocompletado con Script.aculo.us

Usando una de las framework mas populares también podemos crear nuestro autocompletado.

6. Autocompletado con Ajax por Robert Nyman

Utilidad lista para usar en nuestros proyectos de la web de Robert Nyman. Esta utlilidad cuenta con documentación para usarlo e implementarlo en nuestro sitio web. (demo)

7. Ajax AutoSuggest / Autocomplete

Utilidad hecha con JavaScript que nos brinda los resultados de la consulta del autocompletado en formato JSON ó XML. Además cuenta con una apariencia agradable y sencilla. Su página web cuenta con documentación para el uso de esta utilidad. (demo, descarga)

8. Autocompletado con Ajax y PHP paso a paso

Interesante utilidad en Ajax vía Sentido Web. (demo, descarga)

9. Tutorial para crear un Autocompletado con Ajax y PHP

Este tutorial te explica de manera simple como implementar tu propio autocompletado de texto. (descarga)

10. ComboBox con autocompletado

Interesante utilidad en forma de lista desplegable, que muestra un cuadro con sugerencias. Por defecto el control <select/> de HTML no permite escribir dentro, solo seleccionar. Este ComboBox  es un alternativa a ello.

 

¿Conoces de otras utilidades para autocompletado de texto? 

LiveValidation es una utilidad en Javascript que permite validar los campos o entradas de textos de los formularios HTML (textarea, input text, input check) en tiempo real. Tiene interesantes características:

• Verifica que un campo no esté vacio.
• Verifica que el texto ingresado corresponda a uno determinado. Si usted exige que el usuario escriba "hola" entonces el validador actuará en función de ello, independientemente de si es con mayúsculas o minúsculas.
• Verifica que cierta palabra aparezca en una expresion ingresada.
  
• Verifica que el texto ingresado solo contenga números, números enteros ó un número específico.
• Verifica que el texto ingresado solo contenga números, pero que éste sea mayor ó menor que cierto valor, ó también verifica que el número corresponda a un valor entre un rango específico.
• Verifica la longitud de caracteres del texto ingresado, puede ser mayor ó menor a cierto valor específico, ó corresponda a un rango específico.
• Verifica que ciertas expresiones ó texto este incluido ó excluido del texto ingresado.
• Verifica que un checkbox este clickeado ó no.
• Verifica que contraseña y confirmanción coincidan (por ejemplo para un formulario de registro.)
• Verifica la estructura de un e-mail (tunickname@servidor.xxx)
• Finalmente todo lo descrito anteriormente lo puede combinar para obtener un validador avanzado.
• Entre otras características muy interesantes.

Cómo usarlo

En la parte del head, agrega el archivo javascript, esto dependerá del tipo de archivo que descarges... en este caso usamos en standalone.

<script type="text/javascript" src="livevalidation_standalone.compressed.js"></script>

Luego dentro del body en los campos ó entradas de texto que desees validar, llama a los métodos necesarios. En este ejemplo estamos validando que el campo cuyo id "f1" no quede en blanco.

<input id="f1" type="text">
<script type="text/javascript">
  var f1 = new LiveValidation('f1');
  f1.add(Validate.Presence);
</script>  

En la sección ejemplos del LiveValidation puede encontrar otras formas de uso.

Enlaces | LiveValidation, Documentación

Después de un mes alejado de blog vuelvo con un interesante tema. Aca siempre hablamos de Desarrollo y Programación web, especialmente centrado en Ajax y temas relacionados. Justamente vamos a hablar del corazón de Ajax: el objeto XMLHttpRequest. Éste tiene un problema relacionado con la seguridad cuando tratamos de hacer llamadas a dominios externos con el método open(método,url); Un ejemplo aqui:

function objAjax(){
 var xmlhttp=false;
  try{
   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");	
  }catch(e){
   try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }catch(E){
    xmlhttp = false;
   }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
   xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

function MostrarYahooHomePage(){
 resultado = document.getElementById('resultado');
 ajax=objAjax();
 ajax.open("GET", "http://es.yahoo.com/"); //esta linea  nos interesa
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   resul.innerHTML = ajax.responseText
  }
 }
 ajax.send(null);
}

Este script nos dará un error porque no podemos abrir un documento que se encuentra en otro dominio. Lo apropiado es llamar a documentos que se encuentran en nuestro propio dominio. ¿Cuál es la solución? Existen algunas soluciones (como usar iframe). Pero la que me llamo la atención es la que encuentra en Jaslabs donde explica lo siguiente:

1. Si tenemos nuestro servidor Apache, debemos asegurarnos de instalar o habilitar los módulos: mod_rewrite y proxy.
2. Luego crear la siguiente regla: ^/yahoo_proxy http://www.yahoo.com/service [P] en el archivo .htaccess
3. Ahora reemplazar la linea del método open por la siguiente: http.open("GET"."http://your_host/yahoo_proxy").

No lo he probado aún, pero teniendo en cuenta lo multifacético que es el servidor Apache... se ve funcional. Eso si lo probaré y les contaré...