IceBeat

Librerías Javascript que están de moda:

1. http://prototype.conio.net/
2. http://script.aculo.us/
3. http://bennolan.com/behaviour/

Prototype es lo que esta partiendo la pana por la red, tiene soporte nativo en Ruby on Rails y destaca por su sencillez.
Script.aculo.us la veo demasiada pesada, puedes hacer barbaridades con un par de lineas, pero se podrían currar una versión lite.
Behaviour es la solución mas elegante que he visto para usar con AJAX, es tan buena que me entra una envidia grrrr. Con ella solo tienes que escribir código tal y como lo harías siempre, luego declarar selectores (div#ajax) en Javascript para que te devuelva el elemento.

Librerías PHP con muy buena pinta:

1. http://www.xajaxproject.org/

Es uno de los pocos proyectos que más me han encantado para PHP, su interacción con AJAX es perfecta, su potencial la sencillez. Declaras una función y luego solo tienes que devolver información por medio de comandos, definiendo alertas, innerHTML’s, estilos…

Merecen la pena mirarlas un poco.

En AJAX hay dos formas de devolver un respuesta del servidor, XML o HTML, para ello accedemos con los métodos
responseXML o responseTEXT, hasta el momento la forma mas fácil de acceder al contenido es mediante la segunda opción, aunque la primera es mucho mas potente ya que puedes indexar o ejecutar comandos según la estructura del XML devuelta.

Para acceder y leer el XML es un poquito lioso. Imaginemos este XML (sin saltos de linea):

<ajax>
<info type="200">Ok</info>
<block id="content"><![CDATA[ Content HTML ]]></block>
<block id="content2"><![CDATA[ Content HTML 2 ]]></block>
</ajax>

Para leer este XML con js lo hacemos de la siguiente forma:

var xml = obj.responseXML.documentElement;
for (i=0; i<xml.childNodes.length; i++) {
//nombre del tag
alert(xml.childNodes[i].nodeName); 
//valor del tag
alert(xml.childNodes[i].firstChild.nodeValue);
}

No es muy lioso que digamos pero la cosa se complica cuando se anidan mas etiquetas o cuando incluimos atributos.
Con easyXML he intentado simplificar el proceso para que el acceso sea menos complejo.

easyXML depende de 3 funciones y dos variables.

1. .tag función busqueda de nodos segun su nombre
2. .item función para iterar sobre los nodos
3. .name nombre del nodo
4. .value valor del nodo // puede ser un objeto si es un contenedor
5. .attr función para acceder a los atributos

El mismo ejemplo con easyXML:

var xml = new easyXML(obj.responseXML);
while(child = xml.item()) {
alert(child.name);
alert(child.value);
}

Por medio del bucle while conseguimos desplazarnos por todo los ítems secundarios. También con la función item() puedes acceder a un nodo en concreto, xml.item(1).value devuelve “Content HTML”.

Para acceder a los atributos es tan sencillo como usar la función attr o acceder directamente, xml.item().attr.type o xml.item().attr("type") devuelve el atributo type del primer elemento.

El XML lo puedes complicar tantas veces como quieras, para acceder a los nodos solamente tienes que usar el bucle y la función item dentro del objeto.

var xml = new easyXML(obj.responseXML);
while(child = xml.item()) {
//en caso de que child también anide, child.value será un objeto
//child.value.item() es igual a child.item()
while(next = child.item()) {
alert(next.value);
}
}

También puedes buscar los childNodes dependiendo del nombre del tag.

var xml = new easyXML(obj.responseXML);
var block = xml.tag("block");
while(item = block.item()) {
alert(item.value);
}

Puedes descargar easyXML y probar su funcionamiento con tus aplicaciones AJAX.

Este código es uno de los trozos sobre la librería javascript que tengo pensada hacer, en este caso he creado app.alert, un sistema de alertas personalizable tanto en html como en CSS.

El script lo que hace es mostrar un cuadro de dialogo indicando si se quiere cumplir la acción, cuando el usuario acepta se llama a la función creada para tal propósito.

Veamos un ejemplo:

function alerta() {
var msg = new app.alert();
msg.title = "Mensaje de aviso";
msg.message = "¿Seguro que deseas continuar?";
msg.ok = function() {
msg.hide();
document.getElementById("content").innerHTML = "<h1>Alerta ok!!!</h1>";
};
msg.show();
return false;
}

Puedes definir el titulo y el mensaje, la caja contenedora siempre y cuando respetes los identificadores.
La función ok es la que se llama en caso aceptar la alerta.

El código esta basado en dashboard, con lo que os resultara familiar :P.

Demo de sistema de alertas.

He retocado el código del script plink.ajax , ahora es posible crear métodos privados para que no se puedan ejecutar desde el navegador.
Y añadida la variable window.location.hash para obtener la información del ancla.

De paso he mejorado la estructura del archivo

Si quieres efectos de capa y puedes prescindir de drag&drop y algunos efectos complejos puedes usar moofx , una librería que pesa solo 3kb y que asombra lo fácil que es usarla. Puedes definir los efectos usando los tags class y rel sin necesidad de escribir ningún código javascript.

Fundidos y movimientos es su especialidad. Si ves que se te queda corta siempre puedes usar “script.aculo.us2:http://script.aculo.us/.