Cosas a tomas en cuenta al programar AJAX

Usar AJAX nada más por usarlo es un error, recuerda el principal objetivo de AJAX es agilizar nuestra aplicación y reducir la cantidad de datos transmitidos entre el servidor y el cliente. Debido a que AJAX se apoya ampliamente en el uso de Java Script es muy común abusar de los efectos y transiciones que hacen que nuestra aplicación se ve muy llamativa, lo que trae por consecuencia que nuestra aplicación se pueda ver lenta y sobrecargar en navegador.

El olvidarse del botón de regresar del navegador, lamentablemente AJAX no se integra del todo con esta parte del navegador por eso es importante cuando desarrollas una aplicación completa en AJAX tomarlo en cuenta como lo hace GOOGLE con la forma en que trabaja su sistema de correo GMAIL.

Cada vez que un usuario hace clic en algún botón que dispara una acción AJAX es importante mostrarle que algo esta pasando, ya sea con un pequeño GIF animado que da vueltas, o una barra de progreso, o algún efecto que parpadee o cambie de color.

En cuanto a la seguridad es importante mencionar y cabe destacar que todo lo que envía el servidor puede ser accedido por algún Spyware o Troyano aun y cuando no se muestren en la pantalla, un caso específico es cuando tus Servicios Web envía al cliente toda la información de usuario incluyendo contraseñas u otros datos sensibles que aunque no se muestran en pantalla los datos han sido enviados al cliente y pueden ser interceptados si no viajan por un canal seguro.

Algo muy importante al desarrollar elementos con AJAX es probarlos en diferentes sistemas operativos y navegadores para asegura un correcto funcionamiento en cada uno de ellos y que así sean útiles para la mayor cantidad de usuarios sin importar que navegador o sistema operativo usen.

Una aplicación realizada en AJAX también sufre de la sincronización de información con el acceso de múltiples usuarios así como lo hacen las aplicaciones comunes, trayendo como consecuencia que la información que estas viendo en pantalla no sea precisamente la información mas actualizada existente en los servidores.

Sobrecargar con muchos procesos en Java Script el navegador, esto es algo muy importante ya que si el navegador se hace lento es posible la necesidad de cerrarlo y tener que abrirlo de nueva cuenta, mostrado con esto que la aplicación desarrollada no sea lo esperado en cuanto a velocidad, buen desempeño y correcto funcionamiento, por eso es muy importante siempre liberar memoria y hacer uso correcto ella.

Con la flexibilidad que nos da AJAX para poder definir la navegación es muy importante tomar en cuanta al usuario común que no es experto en este tipo de cuestiones de navegación, la cual debe de ser intuitiva y fácil de entender.

Algo importante para mostrar una aplicación estable y de funcionamiento es hacer las validaciones correspondientes al acceder a ella, con esto me refiero a verificar que el usuario tenga tanto el navegador mínimo para el cual diseñamos nuestra aplicación como el tener Java Script activado, que en caso de no ser así mostrarle un mensaje que le explique el estatus de su navegador y los requerimientos mínimos para acceder a la aplicación.

Lista de recursos Javascript

Tutoriales

• A (Re)-Introduction to JavaScript


• Eloquent JavaScript


• JavaScript (quirksmode.org)


• JavaScript Cake Tutorials and Scripts


• JavaScript Boot Camp Tutorial


• JavaScript Closures


• JavaScript in Ten Minutes


• JavaScript Tutorial


• JavaScript tutorial for the total non-programmer


• JavaScript/DHTML Tutorials


• Painless JavaScript Using Prototype


• Ten JavaScript Tools Everyone Should Have


• You think you know (JavaScript) but you have no idea

Colección de scripts

• Hot Scripts


• JavaScript Search


• JavaScript Scripts


• JavaScript Source


• Over 400+ free JavaScripts!


• Reusable Libraries And Objects


• The Yahoo! User Interface Library

Frameworks y librerías

• Ext JS - JavaScript Library


• JavaScript code library


• jQuery


• jsvalidate


• Mochikit


• overLIB


• Project: Bajax


• Prototype


• Open Rico


• script.aculo.us


• The Dojo Toolkit


• The Solvent

Técnicas

• BarelyFitz Tabs


• Behaviour : Using CSS selectors to apply JavaScript behaviours


• BSN AutoSuggest


• Drag & Drop Sortable Lists with JavaScript and CSS


• Edit in Place with JavaScript and CSS


• FD Sortable tables


• Flexible client-side table sorting


• flickrshow - Simple JavaScript slideshows for Flickr


• Form validation


• Highslide JS - JavaScript thumbnail viewer


• iPhoto-like image resizing using JavaScript


• JavaScript gallery and slideshow system


• JavaScript Tabifier automatically create an html tab interface


• JavaScript: DHTML Library, Drag & Drop for Images and Layers


• JDV Sortable tables


• Kryogenix Sortable tables


• Lightbox JS


• Livepipe Tabs


• moo.fx - The next small thing


• Mouse wheel programming in JavaScript


• overLIB Tooltips


• PlotKit - JavaScript Chart Plotting - liquidx


• Store JSON data in cookies


• Sorted tables


• TableKit


• ThickBox 2.1


• Tooltips, DHTML, JavaScript - BoxOver

Referencias

• CSS Properties to JavaScript Reference


• gotAPI/HTML - Instant search in HTML and other developer documentation


• JavaScript Cheat Sheet/


• JavaScript Reference

Herramientas

• Firebug - Web Development Evolved


• JSLint, The JavaScript Verifier


• RegexPal: JavaScript Regex Tester


• XML.ObjTree XML parser

70+ JavaScript Resources for Every Web Developer

Via / sentidoweb.com

Vía / dzone

Mi Colección de Funciones en Java Script

function showloading(div){
var div=document.getElementById(div);
div.innerHTML="loading...";
}
function printindiv(div,msg){
var div=document.getElementById(div);
div.innerHTML=msg;
}
function hiddediv(div){
document.getElementById(div).style.display="none";
}
function showdiv(div){
document.getElementById(div).style.display="block";
}
function focusinelement(div){
document.getElementById(div).focus();
}
function cleardiv(div){
var div=document.getElementById(div);
div.innerHTML="";
}
function copyhtmltovalue(div,field){
document.getElementById(field).value = document.getElementById(div).innerHTML;
}
function copyvaluetohtml(filed,div){
document.getElementById(div).innerHTML = document.getElementById(field).value;
}
function copyhtmltohtml(divA,divB){
document.getElementById(divB).innerHTML = document.getElementById(divA).innerHTML;
}
function copyvaluetovalue(fieldA,fieldB){
document.getElementById(fieldB).value = document.getElementById(filedA).value;
}
function changecolortr(id,color){
var div = document.getElementById(id);
div.className = color;
}

Mi función de AJAX para POST y GET

function Ajax(){
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 traerDatos(url,metodo,variables,div){
var div=document.getElementById(div);
var ajax=Ajax();
div.innerHTML="Cargando...";
ajax.open(metodo, url, true);
if(metodo=='POST'){
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(variables);
}
ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
capa.innerHTML=ajax.responseText;
}
}
}

La Funcion de los Frameworks

La función principal de los framework es agilizar el desarrollo de nuestras aplicaciones, es importante conocer en su mayoría los framework que existen en la actualidad pues esto nos dará la pauta para decidir cual usaremos en un desarrollo determinado, hay framework que nos permiten hacer mas cosas que otros, unos están enfocados al uso de efectos, otros se enfocan mas para trabajar con AJAX, otros mas nos permiten trabajar en capas como es el caso de Spry, la decisión final de cual utilizar te la dará el conocimiento de la función principal de cada uno.

Frameworks Vs Conjunto de Funciones Simples

Un conjunto de funciones simples es fácil de escribir y de muy poco peso pero a veces el tamaño del proyecto requiere de un framework robusto y funcional y tras haberlo pensado mucho he llegado a la conclusión de que los framework no tienen nada de malo, lo que esta mal es la falta de conocimiento por parte de los usuario acerca de que es un framework o que representa, al hablar de esto me refiero a que no todos los framework son iguales, todo, o su mayoría tienen un enfoque distinto en algunos de sus aspectos lo que los hace tener su distinción e individualidad frente a todos los demás, a que me refiero con esto??, pues al hecho de que no todos los framework sirven para lo mismo específicamente, por eso como programador hay que conocer a fondo todos los framework de los que se tenga conciencia de que existen, ya que esto nos ayudara mucho en nuestros proyectos.

Es importante darnos cuentas que no nos servirá siempre el mismo framework para todos nuestros proyectos y que una de las principales leyes de AYAX es el optimizar funcionamiento y si usamos un framework que no es el adecuado para nuestro proyecto estamos yendo en contra de su principal función.

AJAX Frameworks

AJAX Frameworks

En el mercado existen actualmente un gran numero de frameworks para AJAX desde los mas simples como Prototype (http://www.prototypejs.org/) y SimpleJS (http://simplejs.bleebot.com/) hasta algunos algo mas avanzados como es el caso de script.aculo.us (http://script.aculo.us/) y Spry(http://simplejs.bleebot.com/) con la ventaja de que es posible combinarlos para extraer buenos efectos de uno y otro, a este tipo de diseño de librerías se une yahoo y google ente otros, en la batalla por ser el framework para AJAX numero uno trae como consecuencia grandes beneficios para los desarrolladores y que día a día se mejoran los frameworks existentes y surgen nuevos cada día.

A este tema de los frameworks podemos agregar que uno de los más utilizados es Prototype por ser uno de los más difundidos y de más fácil implementación.

Algunos de los framworks más populares para ajax son:

Prototype (http://www.prototypejs.org/)
SimpleJS (http://simplejs.bleebot.com/)
jQuery (http://jquery.com/)
mootools (http://mootools.net/)
script.aculo.us (http://script.aculo.us/)

…entre otros muchos mas…

En mi muy personal forma de pensar, no me gustan los frameworks y menos las mas grandes como es el caso de spry y otros muchos mas, estoy de acuerdo que son buenos pero usarlos representa un gran consumo de memoria por parte del usuario y que spry pesa más de 300 kb que aun y cuando se carga solo la primera vez de todas maneras se me hace que es lento.

La tecnología AJAX (acrónimo para Asynchronous JavaScript and XML)que hace uso de JavaScript asíncrono más XML para el desarrollo de aplicaciones web

Es una técnica de desarrollo web para crear aplicaciones interactivas. Éstas se ejecutan en el cliente, es decir, en el navegador del usuario, y mantiene comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma.
Información tomada de: http://es.wikipedia.org/wiki/AJAX.