2. Enfrentándonos a Ajax sin ayudas

3. Parte 2: Primeros pasos con Prototype

1. Qué es prototype
   
2. Algunos aspectos básicos
3. Despreocuparnos de la comunicación asíncrona: Ajax.Updater
   
4. Ejemplo de uso: autocompletar con prototype
   

4. Parte 3: Primeros pasos con Script.aculo.us

1. Qué es script.aculo.us
   
2. Posibilidades que ofrece
3. Ejemplo de uso: tienda de libros
   

5. Parte 4. Modificando nuestro blog

1. Borrado de comentarios arrastrando con script.aculo.us
2. Ordenación de comentarios

6. Parte 5. Modificando nuestro blog (II)

1. Prototype en Ruby on Rails
   
2. Mostrar un formulario sobre el listado de categorías
   
3. Actualizar el listado de posts desde el formulario

7. Parte 6. La guinda final

1. Efectos de animación con Script.aculo.us
   
2. Formularios animados
   
3. Menús animados
   

1. Parte 1. Introducción

AJAX son las siglas de Asyncronous Javascript And XML. Es una técnica de desarrollo web para crear aplicaciones que se ejecutan en el cliente manteniendo una comunicación asíncrona con el servidor, en segundo plano. Así podemos realizar cambios sobre parte(s) de las páginas sin necesidad de recargarlas enteras.

Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se requieren al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. Javascript es el lenguaje interpretado (scripting language) en el que normalmente se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asíncrono esté formateado en XML.

2. Parte 2. Enfrentándonos a AJAX sin ayudas

El objeto XMLHttpRequest

La comunicación cliente-servidor se lleva a cabo mediante el objeto Javascript XMLHttpRequest. Él se encarga de enviar al servidor la petición, recoger los datos del mismo y actualizar la parte de la página que le indiquemos. A pesar de su nombre, el protocolo de comunicación cliente-servidor no tiene por qué ser en XML.

Controlarlo todo desde Javascript

¿Cómo utilizar AJAX básico? Supongamos que queremos llamar al servidor mediante una función Javascript "conecta", que realiza una petición a una página (JSP, por ejemplo). Esta petición obtendrá como resultado, por ejemplo, un listado de datos que colocar dentro de un panel HTML. Estos datos los recibiremos mediante otra función Javascript, que llamaremos "recoge".

var xmlhttp;

function conecta(url)
{
  if (window.XMLHttpRequest)
  {
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=recoge;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
  }
  else if (window.ActiveXObject)
  {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    if (xmlhttp)
    {
      xmlhttp.onreadystatechange=recoge;
      xmlhttp.open("GET",url,true);
      xmlhttp.send(null);
    }
  }
}

function recoge()
{
  if (xmlhttp.readyState==4)
  {
    if (xmlhttp.status==200)
    {
      document.getElementById("division").innerHTML=xmlhttp.responseText;
    }
    else
    {
      alert("Problem retrieving XML data - "+xmlhttp.status);
    }
  }
}

¿Qué hemos hecho realmente?

1. Hemos definido un objeto XMLHttpRequest, que se define de uno u otro modo (dentro del método conecta), según el navegador.
2. En conecta:
   
   1. Con el evento onreadystatechange indicamos qué método usar para obtener la respuesta del servidor cuando esté lista
   2. Con el método open hacemos la llamada al servidor, con el método indicado (GET), y la URL indicada. El tercer parámetro indica si la comunicación es asíncrona (true) o no (false). Hay un par de parámetros opcionales más, para indicar login y password en el caso de conexiones protegidas.
3. En recoge:
   1. Esperamos que el proceso termine (readyState == 4)
   2. Si el estado de finalización es 200 (OK), actualizamos el elemento de la página con el id indicado
   3. Si no es 200 (Error), mostramos un mensaje de alerta

Para las siguientes secciones, vamos a partir de la aplicación de Blog completa del Taller de Ruby on Rails. Primero haremos unas pruebas independientes a todo el blog, y después aplicaremos Ajax sobre el propio blog.

Ejemplo de uso: autocompletar

Sobre el proyecto de BlogTaller, vamos a crear un nuevo documento HTML en la carpeta /public/, lo llamaremos ajax1.html, y tendrá el siguiente contenido (copiadlo y pegadlo):

<html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
       <title>Prueba Ajax 1</title>
       <link href="stylesheets/style_blue.css" rel="stylesheet" type="text/css"/>
       <script language="javascript">
           
       </script>
    </head>
    <body>
        <div id="header">
            <div id="header_inner" class="fixed">
                <div id="logo">
                    <h1><span>Pruebas AJAX</span></h1>
                    <h2>Taller Estiu 2.0</h2>
                </div>
            </div>
        </div>
        <div id="main">
            <div id="main_inner" class="fixed">                       
                <div id="primaryContent_2columns">
                    <div id="columnA_2columns">
                        <form name="formBusq" id="formBusq" action="">
                            Texto a buscar:
                            <input type="text" name="campoBusq" id="campoBusq"
                             onkeyup="javascript:busca()" size="50" />
                        </form>
                        <br />
                        <div id="resultados">
                           
                        </div>
                    </div>
                </div>
                <div id="secondaryContent_2columns">
                    <div id="columnC_2columns">
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

De momento la página sólo tiene un formulario de búsqueda, con un campo de texto con un evento onkeyup, que llama a una función busca() que no está implementada. Lo que vamos a hacer es:

1. Crear dos funciones Javascript en el código script del head (que ahora está vacío):
1. Una función busca para llamar al servidor, pasándole un parámetro texto con el texto del cuadro de búsqueda.
2. Una función recoge, que recibirá una respuesta del servidor, y la pondrá en el div con id=resultado (ahora vacío).
   
2. Crear en el servidor un controlador (controller) que reciba el parámetro del formulario (parámetro texto) y busque sobre una lista de libros ya predefinida cuáles encajan con el texto que va escribiendo el usuario. Devolverá una lista con los libros candidatos según el texto que está escribiendo el usuario.

Para lo primero, introducimos las funciones busca y recoge dentro del script de la cabecera de la página:

var xmlhttp;
           
function busca()
{
  var texto=document.formBusq.campoBusq.value;
  var url = "/pruebaajax/search?texto=" + texto;
  if (window.XMLHttpRequest)
  {
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=recoge;
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
  }
  else if (window.ActiveXObject)
  {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    if (xmlhttp)
    {
      xmlhttp.onreadystatechange=recoge;
      xmlhttp.open("GET",url,true);
      xmlhttp.send(null);
    }
  }
}

function recoge()
{
  if (xmlhttp.readyState==4)
  {
    if (xmlhttp.status==200)
    {
      document.getElementById("resultados").innerHTML=xmlhttp.responseText;
    }
    else
    {
      alert("Problema obteniendo datos - "+xmlhttp.status);
    }
  }
}       

Después, en Aptana, vamos a la vista Generators, y generamos un nuevo controller, llamado pruebaajax.


Una vez creado, vamos a editarlo (fichero /app/controllers/pruebaajax_controller.rb). Si nos fijamos en el Javascript anterior, vamos a llamar a una URL que es /pruebaajax/search. Lo primero (pruebaajax) es el nombre del controlador que hemos creado. Lo segundo (search) debe ser el nombre de la acción a la que llamamos. Así que dentro del controlador, creamos una acción search que tome un parámetro texto, y busque en un array de libros los que encajan:

  # GET /pruebaajax/search
  def search

    libros=['El señor de los anillos','El juego de Ender','Ruby on Rails for dummies','La tabla de Flandes','La sombra del viento','El código Da Vinci','El ocho','El desorden de tu nombre']

    result = ''   

    libros.each do |libro|
      if (libro.downcase.include?(params[:texto].downcase))
        result = result +  '<div id="' + libro + '">' + libro + '</div><br />'
      end
    end

    render :text => result
  end

Básicamente, lo que hemos hecho es recibir el parámetro texto, buscar en el array libros cuáles contienen la cadena texto, y para cada uno sacar una etiqueta div con su título. El conjunto de etiquetas div resultantes es lo que enviamos a la página, con el comando render.

Y eso es todo... ya podemos acceder a nuestra página ajax1.html desde el navegador (http://localhost:3000/ajax1.html), y probar nuestro "autocompletar":

Edit this page (if you have permission) |

Google Docs -- Web word processing, presentations and spreadsheets.