IceBeat

Sencilla función para saber si tus peticiones vienen de AJAX o no. Para que funcionen tienes que saber si tu framework envía esa cabecera.

function is_ajax(){
    return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest');
}

Si utilizas tu propia clase tienes que enviarla

this.transport.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

Mucha gente cree que usar AJAX es difícil pero en realidad es facilísimo, lo que es difícil es aprender javascript para poder usar AJAX en condiciones.

Con mootools tenemos resueltas muchas dificultades, con muy pocas lineas podemos conseguir cosas muy curiosas.

Antes de ponernos hacer algo, hay que tener en cuenta 2 conceptos básicos sobre AJAX.

La codificación: Es lo mas jodido que tenemos nosotros (los que no escribimos en ingles), si usamos acentos o similar suelen aparecer caracteres raros, lo que pasa es que el navegador no sabe que tipo de codificación tiene que devolver ya que no es una pagina entera y no contiene el encode-type (<meta http-equiv="content-type" content="text/html; charset=UTF-8" />).

<?php header('Content-Type: text/html; charset=utf-8'); ?>

El cache: Nuestro amigo el IE suele cachear todas las paginas y en el caso de AJAX si usas datos dinámicos no te servirá de nada, ya que mantiene el cache de la ultima carga. Para ello tienes dos opciones, enviar un argumento con algún parámetro dinámico (una fecha o un random) o enviar una cabecera de respuesta diciendo que no cachee el tema.

<?php header ("Cache-Control: no-cache, must-revalidate "); ?>

Y dicho esto vamos a crear un cargador de paginas.

//mootools.js + cargar.js
//Pasamos 2 argumentos, el div donde cargaremos los datos y la ruta a cargar.
var cargar = function(el,ruta) {
    el = $(el);
    //mientras este cargando no enviamos mas peticiones
    if(el.pg.hasClass('loading')) return false;
    el.toggleClass('loading');
    //estamos cargando
    el.setHTML('Cargando datos...');
    new Ajax(ruta, {
        onComplete:function(e) {
            el.toggleClass('loading');
            //actualizamos contenedor
            el.setHTML(e).effect('opacity').custom(0,1);
        }
    }).request();
    return false;
}

Con esta función tenemos resuelta toda la parte javascript que necesitamos. Ahora toca la parte del servidor, como ya mencione antes hay que tener en cuenta las dos cabeceras (codificación y cache) y para enviarlas usaremos PHP.

<?php 
//mi_pagina.php
header('Content-Type: text/html; charset=utf-8');
header ("Cache-Control: no-cache, must-revalidate ");
?>
<p>Este es el texto html que queremos cargar.</p>

Por ultimo la parte de interacción con el usuario.

<a href="enlace_en_caso_de_no_usar_AJAX.html" 
onclick="return cargar('box','mi_pagina.php');" title="Cargar">Cargar</a>
<!-- Donde cargaremos los datos -->
<div id="box"></div>

Para mantener un poco de paz con aquellos que no tienen javascript activado usamos este tipo de enlaces. Con este ejemplo ya podrás usar AJAX en tus paginas web, con opacidad y todo :P.

Los que usamos Gmail sabemos que la app guarda cada X tiempo un borrador de nuestro mensaje, incluso sube por nosotros los archivos adjuntos.
He creado algo parecido, bastante más sencillo.
Con Form.autoSave guardas el QUERY_STRING del formulario en una sesión, con esto consigues no insertarlos en alguna base de datos y que se mantenga el tiempo necesario por si tienes algún problema con el navegador o cierras las ventana sin darte cuenta.

Nota: Hay que tener paciencia en la Demo porque guarda cada 30 segundos y si no ha cambiado no actualiza vía AJAX.

Ayer por la noche me puse un ratillo intentando mejorar el editor. He mejorado un poco el código sobre todo para safari y ademas he conseguido que los snippets sean más potentes. Ahora puedes indicar un pequeño macro el cual una vez pegado puedas tabular por sus parámetros sin necesidad de utilizar el cursor.
Puedes probarlo escribiendo *..* y tabulando.

No hay nada mejor que verlo con un screencast

Lenguaje para Autocompleter.Editor

Para crear un lenguaje solo tenemos que seguir unas pautas ya predefinidas, teniendo en cuenta los hashes y las matrices todo ira viento en popa.

Lo primero que tenemos que hacer es crear el objeto language para contener el lenguaje.

if(!language) var language = {};

A continuación le ponemos nombre a la criatura.

language.HTML = {
charCodes: [],
snippets: $H({}),
selections: {},
tooltips: $H({}),
tokens: $H({})
};

Este es el pilar básico del lenguaje.

charCodes: Su función es comprobar si los tokens se disparan o no, los tres que tenemos para CSS son un espacio en blanco, un salto de linea o un ;, os preguntareis para que esto, pero si nos movemos con el cursor y coincide un token ya completado no es plan que vuelva a salir.

snippets: son los trozos de códigos que sustituimos cuando tabulamos, no hay que olvidar poner $H() porque el script captura las keys para comprobar que existe el snippet.
Hay dos tipos de snippets, los directos y los desplegables. Los directos son aquellos que contiene una matriz y los desplegables los que contiene otro objeto con keys y values.

"{" : ["{n    ",'',"n}"]

Esto seria un snippet directo, la matriz esta compuesta por 3 elementos, [contenido antes de la selección, la selección, y contenido después de la selección].

El desplegable actúa igual pero es creando un $H().

Selections: Podemos también ejecutar funciones con las selección del texto, por motivos de compatibilidad con safari y firefox solo tenemos las teclas del 0 al 9, pero vamos como se puede desplegar opciones viene sobrao. A la función se le pasa el texto seleccionado, luego solo hay que devolver la matriz que hemos hablado antes.

tooltips: Muy parecido a los snippets pero estos devuelven un tooltips informativo, en vez de crear una matriz es una cadena.

tokens: Pueden resultar algo complejos pero existen dos tipos, el token directo y el token buscando un patrón.

El token directo es aquel que se dispara cuando el carácter coincide con el token, es decir si escribimos ”@” el token se dispara.
El otro busca la cadena hacia atrás para encontrar la comparación, imagina que tienes tu CMS y tus etiquetas empiezan por cms:, si quieres disparar la coincidencia tendrás que poner como token : y luego buscar si coincide con cms. Puede tener varias coincidencias el mismo token pero no hay problemas con ellas.

Veamos un ejemplo:

if(!language) var language = {};

	
language.HTML = {
//caracteres permitidos despus del token
charCodes: [10,32],
//snippets: funcionan escribiendo la palabra clave y dando al tabulador
snippets: $H({
//snippets sin tooltips, se reemplazan directamente
"=" : ['="','','"'],
"div" : $H({
"id" : ['<div id="','','"></div>'],
"class" : ['<div class="','','"></div>']
})
}),
//seleciones: funcionan con crtl+shift+ un numero del 0 al 9
selections: {
//sustituci&#243;n directa de la seleccion
"0": function(sel) {
//convertir a entidades
var mtoc = /<([^<>]*)>/g;
return ['',sel.replace(mtoc,"&lt ;$1&gt ;"),''];
},
//muestra un tooltip para elegir la opcion
"1": $H({
<a href="[function(sel">toUpperCase</a>) {
return ['',sel.toUpperCase(),''];
}],
<a href="[function(sel">toLowerCase</a>) {
return ['',sel.toLowerCase(),''];
}]
})
},
//despliegan un tooltip informativo, funcion dando al escape despues de la palsbra clave
tooltips: $H({
"a" : "noinfo",
"strong" : "noinfo"
}),
//tokens que se disparan si encuentra el caracter
tokens: $H({
//autocompletado buscando un patron
":" : $H({
// coincida con a:
"<cms:" : $H({
"post" : ['<cms:post>','','</cms:post>'],
"title" : ['<cms:title />','','']
})
}),
//autocompletado directo
"<" : $H({
"a" : ['<a href="','http://www.com','" title=""></a>'],
"strong" : ['<strong>','','</strong>']
})
})
};

Ver código: tutorial.js

Teniendo un poco de paciencia puedes conseguir maravillas, incluso unir varios lenguajes en uno con las funciones de prototype.