SAJA es una librerÃa para usar Ajax en PHP de forma segura, sin necesidad de crear ningún Javascript y dando soporte a PHP4 y PHP5.
Está diseñado para crear de forma rápida aplicaciones Ajax secillas, seguras y fáciles de mantener.
Se trata de crear funciones PHP que se encarguen de todo, no es necesario registrar callbacks, ni de importar otras funciones. Tan solo se escribe una función y se llama.
La seguridad que nos ofrece es debido a que las peticiones SAJA sólo son válidas si el usuario está actualmente en la página desde donde proviene la petición. A parte, para darle mayor seguridad, se puede encriptar los datos de entrada del usuario antes de que se envÃen al servidor.
Tan solo ocupa 14K y 3.8K para el usuario final. No utiliza XML debido a que pesa demasiado y a que parsearlo requiere más proceso que con datos normales. No es necesario escribir código Javascript a no ser que quieras hacer algo fuera de lo común.
SAJA
VÃa / Ajaxian
Category Archives: AJAX
Ajax Solutoire: recursos Ajax
Ajax Solutoire es un listado de recursos Ajax muy extenso el cual nos puede sacar de un buen apuro.
Entre los enlaces que nos ofrece encontramos tutoriales de Javascript, de los cuales me ha gustado A (Re)-Introduction to JavaScript. También nos ofrece un listado de enlaces sobre depuración de Javascript, yo la verdad me quedo con Firebug y me olvido del resto, pero bueno, no todo el mundo tiene que tener mis preferencias. Sobre el listado de editores de Javascript debo decir que es muy pobre, si mal no creo todos están basados en Eclipse (jDeveloper también lo está si mal no creo) y todos basados en el mundo Java.
La serie de enlaces sobre tutoriales de Ajax es extensa, y a mà me gusta recomendar todo lo que sea sobre Ajax y accesibilidad, algo bastante importante y que a veces olvidamos un poco.
También aporta enlaces para las librerÃas más conocidas que tratan Ajax, como pueden ser Scriptaculous, Prototype y Mootols.
Un lugar que tener en nuestros favoritos.
Ajax.solutoire.com
VÃa / Proletarium
Laboratorio: no permitir que accedan directamente a las urls empleadas en Ajax
Cuando usamos Ajax en nuestras aplicaciones solemos usar un script especÃfico que devuelva los datos preparados para que el cliente los interprete y los muestre.
En algunas ocasiones no suele ser de nuestro agrado que usuarios accedan directamente a las URLs empleadas para Ajax.
Para evitar esta situación se puede usar un script sencillo. Se tomará en cuenta el valor de la variable de entorno HTTP_REFERER, la cual nos devuelve desde qué página se accede a nuestro script.
$ref = getenv('HTTP_REFERER');
Si el contenido de esta variable es false entonces es que se ha accedido directamente desde el navegador, si no, es que se accede desde una página, también habrá que comprobar que la página es la que nosotros queremos.
<?php
$ref = getenv('HTTP_REFERER');
if (!$ref || $ref != '[nuestra url]') {
?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xhtml1-transitional.dtd">
<html>
<head>
<title>Sentido Web - Redireccionamiento Ajax</title>
</head>
<body>
<h1>Sentido Web - Redireccionamiento Ajax</h1>
<p><?php echo "Hola, son las ".date("H:i:s"); ?></p>
</body>
</html>
<?php
} else {
echo "Hola, son las ".date("H:i:s");
}
?>
En este caso mostraremos una página cuando no haya referer o no sea el que nosotros esperamos. También se podrÃa hacer para que el referer estuviera en el servidor, pero eso lo dejo para que lo haga el que lo necesita.
Una funcionalidad parecida se podrÃa usar por temas de accesibilidad, dependiendo de un parámetro que indique si se trata de una llamada Ajax o no, se devuelva la información para el script del cliente o se muestre la información en una página.
<a href="url-ajax.php" onclick="ajax('url-ajax.php?ajax=1')">Enlace</a>
En el caso de haber problemas de accesibilidad, el enlace accede a la página con la información. En caso contrario, ejecuta la funciona ajax(), indicándole que se trata de una llamada Ajax para que nos devuelva la información formateada, ya sea en XML o JSON o como queramos.
XMLHttpRequest: agregador de noticias web 2.0
XMLHttpRequest es un agregador de noticias sobre Ajax, web 2.0, css, dhtml y javascript. Recoge las noticias de otros agregadores y nos las muestra.
Entre los agregadores que utiliza, nos encontramos con del.icio.us, Digg, dzone, Ajaxian, furl.net y muchos otros, algunos de los cuales no tengo muy claro si los pondrÃa, o al menos los situarÃa al final de la lista. Creo que es mejor que muestren los más especÃficos como dzone o Ajaxian que del.icio.us.
A parte también te muestra ofertas de trabajo relacionadas con la temática web 2.0.
XMLHttpRequest
VÃa / PuntoGeek
Consola remota mediante PHP y Ajax
Os voy a pasar una referencia a script de php que nos proporciona una consola remota para ejecutar comandos desde una página web. Con ella podréis ejecutar comandos mediante php, teniendo en cuenta los permisos de php para poder ejecutar los comandos que pasemos.
Algunos os llevaréis las manos a la cabeza y no sin razón, pero la verdad es que a mà personalmente me vendrÃa muy bien en ciertos proyectos en los que para ejecutar el más mÃnimo comando casi hay que enviar cien peticiones a la gente de redes encargada de los servidores de los proyectos. O cuando el acceso a telnet lo tienes restringido desde el trabajo.
Lo que está claro es que hay que añadirle toda la seguridad habida y por haber. En el artÃculo al que hago referencia, se pueden ver todos los controles de seguridad que hay que usar y copiar el script php necesario.
PHP and AJAX shell console
Microsoft AJAX Library con PHP
ASP.NET AJAX, la librerÃa Ajax de Microsoft, está disponible para los usuarios de PHP (si es que hay algún valiente que se atreva). La gente de Microsoft ha resarrollado un proyecto en Codeplex que sirve de puente entre PHP y la librerÃa de Ajax.
Aunque parezca mentira, se me ocurre una posible necesidad de esta librarÃa. Hay veces en el que proyectos grandes (y no muy organizados) se realizan en diversos lenguajes de programación y se puede dar la situación de que haya que acceder a la librerÃa de Microsoft desde PHP.
La verdad es que es una posibilidad muy remota, pero aún asÃ, alguna posibilidad ha tenido que pensar la gente de Microsoft para llevar a cabo este proyecto, porque no tiene mucho sentido crear un librerÃa para usar un framework de Ajax hecho en .NET para usarlo con PHP, sobre todo cuando ya hay tantos frameworks para PHP que añaden esta funcionalidad y que son muy útiles.
Para quien tenga ánimos de usarla, comentarles que para ello es necesario instalar primero ASP.NET AJAX, y luego enlazar con la librerÃa en PHP y en JS.
PHP for Microsoft AJAX Library
VÃa / Brian Goldfarb’s Blog
MiniAjax: showroom de scripts Ajax
MiniAjax es una galerÃa de scripts Ajax y DHTML con acceso directo a la página del script y lo más importante, acceso directo a una demo.
De todos los que muestran, los que a mÃ, personalmente, más me han gustado son:
- Prototype Window: permite abrir ventanas con contenido de otras urls, convertir capas en ventanas, abrir alertas, confirmaciones, y siendo posible que todas las ventanas se puedan mover, minimizar, maximizar y cerrar.
- Edit-in-Place with Ajax: permite modificar el contenido de una capa directamente, sin necesidad de formularios.
- Download dragable RSS boxes script: muestra ventanas con feeds, las cuales se puede mover, cerrar, editar y actualizar. Es estilo Netvibes.
- AJAX Fisheye List Widget: muestra una barra de herramientas con efecto ojo de pez.
- Amberjack site tours: nos facilita hacer una visita guiada de nuestro website.
- Slideshow Alternative: efecto de slideshow interesante.
- Digg – like spy script: efecto similar al spy de Digg.
- Unobtrusive table sort script: ordenación de tablas mediante selección de columnas.
- TurboDbAdmin: administrador de base de datos.
VÃa / Intenta
Laboratorio: paginación Ajax estilo Google Reader
A parte de todas las funcionalidades de Google Reader como lector de feeds, una de las cosas que más me gusta es su paginación.
Carga inicialmente un número de entradas, y cuando el usuario ha acabado de verlas, vuelve a cargar más. ¿Comó podemos saber cuando el usuario ha visto la última entrada?, pues sencillo, cuando el scroll de la capa que contiene la lista de feeds está abajo del todo. Es en ese momento cuando tenemos que realizar una llamada Ajax para cargar los nuevos datos e incluirlos en la lista.
Lista de ejemplos para jQuery
Una de las formas que más me gusta para entender alguna librerÃa nueva es mediante ejemplos. Si ayer realizábamos un ejemplo, con jQuery hoy os paso una pequeña lista con ejemplos donde se usa esta librerÃa.
- Mostrar/Ocultar elementos
- Ejemplos variados y simples
- Demos de la librerÃa Interface que usa jQuery
- Formulario dinámico para Drupal
- Demos oficiales de jQuery
- Obtención y tratamiento de datos mediante JSON
- Mostrar un flash la primera vez que se visita una página y una imagen el resto de las veces
Laboratorio: desplegar mapa del sitio mediante Ajax
Vamos a explicar un pequeño script para mostrar en una capa el mapa del sitio web usando Ajax (en este caso la librerÃa jQuery).
Un efecto parecido lo podemos encontrar en periódicos online para mostrar las diferentes secciones que se pueden visitar. Por ejemplo lo podemos ver en elmundo.es (en la cabecera) y en elpais.com (en el pie de página).
Se trata de que cuando se pasa el ratón sobre el link, se muestra un menú con las secciones del periódico (mapa del sitio en nuestro caso).
Como hemos explicado en otras ocasiones de cómo usar Ajax, esta vez vamos a utilizar la librerÃa jQuery para facilitar la labor. El que sea un mapa del sitio es debido a que de cara a SEO los buscadores indexan más facilmente nuestro sitio.
También hemos pensado en la accesibilidad, para ello el enlace nos lleva a una página que muestra el mapa del sitio. Esta página que deberá ser dinámica, lo que hace es incluir en la parte del HTML donde se muestra la información principal (suponiendo que hay navegación y paneles laterales) el contenido de otro archivo, que es el que tiene el mapa del sitio. Este último archivo es el mismo que mediante Ajax se carga en la capa que se muestra en el mouseover del enlace.
Supongamos que tenemos dentro de nuestra página, el enlace en cuestión y una capa que estará oculta inicialmente mediante CSS:
<p><a href="paginasecciones.php" id="secciones">Secciones</a></p>
<div id="marco"></div>
También disponemos de dos páginas, una que muestra el mapa del sitio (secciones.html) y otra que incluye a la primera dentro de su contenido (paginasecciones.php), en cuyo código deberÃa haber la siguiente función:
<?php require('secciones.html'); ?>
Ahora tan solo nos falta en el onload del window añadir la funcionalidad necesaria para ocultar la capa, y añadir al enlace el evento onmouseover para cargar el contenido de la capa y mostrarla cuando se pose el ratón en el enlace, y el evento onmouseout para ocultar la capa cuando salgamos del enlace.
window.onload = function() {
var obj = $("div#marco");
obj.hide();
$("a#secciones").mouseover(
function() {
var capa = $("div#marco");
// Para evitar recargar la pagica cada vez que se muestra
if (!capa.attr("cargado")) {
capa.load("secciones.html");
capa.attr({cargado: true});
}
capa.show().slideDown("slow");
} );
$("a#secciones").mouseout(
function() {
var capa = $("div#marco");
capa.slideUp("slow");
} );
}
El código es muy sencillo, lo único necesario de explicar para entenderlo es lo siguiente:
- Cuando se carga el contenido de la capa, primero se comprueba si existe un atributo propio que hemos añadido a la capa, si no existe ese atributo entonces cargamos el contenido mediante Ajax y luego creamos ese atributo para asà no tener que volver a cargar otra vez el contenido cuando pasemos el ratón sobre el enlace.
- La función $ nos permite obtener un elemento HTML, en el caso de $(“div#marco”) nos devuelve el elemento DIV cuyo id es “marco”.
- hide() oculta un elemento HTML.
- show() muestra un elemento.mouseover(funcion) añade la ejecución de la función en el evento mouseover de un elemento.
- mouseout(funcion) añade la ejecución de la función en el evento mouseout de un elemento.
- attr(texto) consulta el valor del atributo pasado como parámetro de un elemento.
- attr(código) añade el atributos y valores a un elemento.
- slideDown despliega una capa hacia abajo.
- slideUp repliega una capa hacia arriba.