jQuery Graceful Websocket: plugin jQuery para websockets

jQuery Graceful Websocket es un plugin jQuery que nos permite comunicarnos con el servidor usando websockets de HTML5. El problema es que tan solo Chrome permite los websokets (creo que Firefox los tiene desactivados por defecto por temas de seguridad), además se necesita que el servidor los pueda tratar, por lo que este plugin permite una alternativa mediante Ajax transparente al desarrollador.

// Si el servidor no admite websockets sustituye el ws:// por http://
var ws = $.gracefulWebSocket("ws://127.0.0.1:8080/");
// Envía datos al servidor. 
// Si el servidor no admite websockets lo envía mediante POST
ws.send("message to server");
// Recibe datos del servidor
// Si el servidor no admite websockets hace un polling mediante GET
ws.onmessage = function (event) {
   var messageFromServer = event.data;   
};

WebSocket plugin for jQuery with graceful degradation

Permitir el botón atrás en aplicaciones dinámicas

Cuando realizamos aplicaciones dinámicas, ya sea usando Ajax o mediante javascript mostrando u ocultando contenidos, nos podemos encontrar con el problema de que el usuario pulse el botón ‘Atrás’ del navegador creyendo que accederá al contenido anterior. El resultado de esa acción será en la mayoría de los casos que el usuario acceda a la página anterior y no al ‘contenido’ anterior.

Para solucionar esto, lo que se debe hacer es que las acciones dinámicas sean realizadas mediante enlaces (#), por ejemplo, si queremos usar pestañas podemos acceder a #tab1, #tab2, …, #tabn. Si vamos atrás en el navegador continuaremos en la misma página pero en otra sección (#).

Para tratar esto mediante jQuery se puede hacer usando el siguiente código:

$(window).bind('hashchange', function () {
  // hacer lo que sea para mostrar el contenido
});

Enabling the Back Button

Vía / CSS Globe

Detecta peticiones Ajax en PHP

Algo muy importante a la hora de desarrollar aplicaciones en Ajax es ofrecer la opción no-Ajax, y para ello es necesario detectar cuando la petición se realiza mediante Ajax, algo muy sencillo gracias a una cabecera que mandan los navegadores modernos:

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
echo "Es una petición AJAX"
}

Detect an AJAX Request in PHP

UIzard: herramienta de desarrollo via Ajax

UIzard es un entorno de trabajo open source vía web que utiliza Ajax, y que funciona en varios navegadores Firefox y Safari (la versión para IE está siendo optimizada).
uizard.png
Se trata de un GUI muy completo en el que se pueden realizar páginas web, añadiendo elementos, con orígenes de datos, formularios, …
La mayor parte viene en coreano, pero creo que es bastante claro para poder entenderlo facilmente.
UIzard
Vía / @knight

Resalta la sintaxis del código mediante Ajax

Buen script que nos permite resaltar el código que mostramos dentro de un <pre$gt;<code lang=”[lenguaje]“$gt;…</code$gt;</pre$gt; en nuestras páginas web o blogs.
El script realiza una llamada Ajax con los trozos de código y su lenguaje y recibe el html de cada trozo de código ya formateado. Utiliza GeSHi para resaltar el código, pero puede utilizar otras.
Ajax Syntax Highlighter
Vía / philsci

|

Laboratorio: barra de progreso mediante Ajax

Una de las necesidades con las que nos encontramos a la hora de realizar procesos largos en la web, es indicar al usuario que le toca esperar. A veces es bastante complicado realizar una barra de progreso que indice el estado actual del proceso que estamos ejecutando.

Una forma de realizarlo es usando Ajax. Realizamos una llamada Ajax que ejecuta la acción, y cuando el objeto Ajax tiene el estado LOADING (readyState == 3), podemos obtener la respuesta del script llamado y parsearlo para mostrar el porcentaje de acción que se ha realizado.

Para ello, estoy pensando en que un script (res.php por ejemplo) devuelva el porcentaje que lleva seguido de un guión. Por ejemplo, cuando pasa por el 1% habrá devuelto “1-” cuando lleve el 5% habrá devuelto “1-2-3-4-5-“. Parseando esto podemos saber por el último número cuanto lleva ejecutado.

El PHP sería el siguiente:

for($i=0; $i<10000000; $i++) {
if ($i%10000 == 0) echo ((int) $i/100000).'-';
flush();
}

Y el javascript sería así:

function ajaxobj() {
try {
_ajaxobj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
_ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
_ajaxobj = false;
}
}
if (!_ajaxobj && typeof XMLHttpRequest!='undefined') {
_ajaxobj = new XMLHttpRequest();
}
return _ajaxobj;
}
function prueba () {
ajax = ajaxobj();
ajax.open("GET", "res.php", true);
ajax.onreadystatechange=function() {
if (ajax.readyState == 3) {
// Mostramos porcentaje
var res = ajax.responseText;
res = res.split('-');
alert(res[res.length-2]);
} else if (ajax.readyState == 4) {
// Fin
alert('FIN');
}
}
// Enviamos algo para que funcione el proceso
ajax.send(null);
} 

Como no hay nada perfecto, y menos aún Internet Explorer, sólo he sido capaz hacer que funcione en FF, Opera, Safari y Chrome.