Ajax.class.js - Sencilla forma de hacer peticiones HTTP en segundo plano

[dec]

Hola,

Eso está hecho. Si no lo hize antes es porque pensé que era acaso mejor así, sin comentarios, pero, tienes razón, y además no vendrá mal. Lo comento y lo subo comentado y edito el mensaje y actualizo el archivo Zip de marras en unos momentos...

[|NoName|]

Una consulta dec, como se hace para capturar con tu libreria los valores de uno o mas inputs utilizando el metodo POST?

[[kayetano]]

Hola

Buen trabajo dec.

[roman]

Veo muy bien la clase. En particular me gustan los "eventos" para el progreso y el final de la operación. Si no te parece mal, creo que puedo complementar tu clase con mi función parseForm que toma como parámetro un formulario HTML y devuelve el query que requiere tu método HttpRequest (o casi). Hace tiempo que no lo reviso y me parece que faltan cosas, pero ahí está la idea.

Primero, tenemos la clase HttpParams que básicamente es una lista de parámetros y valores:

Código PHP:

/**************************************************************************

  Clase HttpParams

  Almacena pares [key, value] para ser enviados en una petición HTTP

***************************************************************************/

function HttpParams()
{
  this.items = new Array();
}

// Agrega un par a la lista
//
HttpParams.prototype.add = function(key, value)
{
  this.items[this.items.length] = [key, value];
}

// Construye la cadena a ser enviada
//
HttpParams.prototype.getQueryString = function()
{
  var result = '';

  for (var i = 0; i < this.items.length; i++)
  {
    var item = this.items[i];

    if (result)
    {
      result += '&';
    }

    result += item[0] + '=' + item[1];
  }

  return encodeURI(result);
} 


El método getQuery es el que regresa la cadena ya lista para ser enviada por Ajax.

La función parseForm:

Código PHP:

/**************************************************************************

  Función parseForm
  
  Extrae la información de un formulario y la coloca en un objeto HttpParams

**************************************************************************/

function parseForm(form)
{
  var elements = form.elements;
  var params = new HttpParams();
  var element;

  for (var i = 0; i < elements.length; i++)
  {
    element = elements.item(i);

    if (!element.name)
    {
      continue;
    }

    switch (element.type.toLowerCase())
    {
      case 'text': case 'password': case 'hidden': case 'textarea': case 'button':
        params.add(element.name, element.value);
        break;

      case 'select-one':
        if (element.value)
        {
          params.add(element.name, element.value);
        }
        break;

      case 'select-multiple':
        options = element.options;

        for (j = 0; j < options.length; j++)
        {
          option = options.item(j);

          if (option.selected)
          {
            params.add(element.name, option.value);
          }
        }
        break;

      case 'radio': case 'checkbox':
        if (element.checked)
        {
          params.add(element.name, element.value);
        }
        break;
    }
  }

  return params;
} 


Un ejemplo de uso está aquí, en donde los datos del formulario a la izquierda se envían vía la clase de dec. El script php que procesa los resultados, simplemente muestra los valores.

// Saludos

[dec]

Hola,

Empezado por |NoName|

Una consulta dec, como se hace para capturar con tu libreria los valores de uno o mas inputs utilizando el metodo POST?

Pues Román puede que te haya dado ya una idea bastante completa de cómo lograrlo. En realidad lo que se pasa en el "query" son pares de claves/valor. En el ejemplo se utiliza sólo un par, pero, en la práctica pueden ser los que te sean precisos.

Respecto de la clase de marras... no sé. Al cabo se sale de madre. Si la intención era que no fuera menester utilizar muchos parámetros en los métodos "más completos", lo cierto es que no se consigue, puesto que al cabo hay que pasar hasta seis parámetros...

Lo cierto es que intenté limitar estos pasando a una sola función el objeto "request", y que fuera dicha función la que se encargara de completar la tarea, comprobando el "readyState" y el "status". Sin embago esto no funciona. No me pregunten porqué, pero, no funciona. Y el caso es que creo recordar haber intentado lo mismo hace tiempo... con el mismo nulo resultado.

No sé. Al cabo creo que lo suyo es tener más o menos claro cómo funciona el objeto "XmlHttpRequest", formar una clase básica para utilizarlo, y, a partir de ahí, ya saben, cada proyecto es un mundo...

En fin. Que creo que la clase es un éxito sólo relativo y quedan no pocos flecos por ahí que no convencen demasiado. Lo que propone Román es muy interesante, desde luego, y puede que en algunos casos fuera muy curioso hacer las cosas de ese modo: mandando todo el formulario en la petición HTTP y a partir de ahí obrar.

[roman]

Empezado por dec

Lo cierto es que intenté limitar estos pasando a una sola función el objeto "request", y que fuera dicha función la que se encargara de completar la tarea, comprobando el "readyState" y el "status". Sin embago esto no funciona. No me pregunten porqué, pero, no funciona. Y el caso es que creo recordar haber intentado lo mismo hace tiempo... con el mismo nulo resultado.

Me gustaría que detallaras más a ver si podemos ver por donde está el problema. Lo comento porque javascript es todo un mundo muy extraño. Sin ir más lejos, usas en tu clase (creo que variable es más adecuado) una notación identificador:function que yo jamás había visto, y eso que no estoy en cero en js. El caso es que en la clase Ajax que hice alguna vez, el "evento" de finalización (yo no tenía el de progreso), en lugar de pasarlo como parámetro de una función, lo asignaba como "propiedad" de la clase misma y eso generó algunos problemas porque this no es lo mismo here and there, .

En cuanto a lo que mencionas de muchos parámetros pues de cualquier manera has de pasarle información. Una forma de hacerlo es con parámetros y otra con propiedades del objeto, y no estoy seguro cual pueda ser más práctica.

// Saludos

[dec]

Hola,

A mí se me hace más práctico utilizar parámetros de una función. ¿Porqué? Bueno. Quizás porque cuando he venido utilizando JavaScript lo he hecho mediante PHP, y, bueno, quizás se me hace más sencillo algo como esto:

Código PHP:

echo '<a onclick="Funcion(parametros);" href="#" title="Muestra el total">Total</a>'; 


Sin embargo, en la práctica el "Funcion(parametros)" es una odisea, a poco que estos parámetros sean unos pocos... uno puede terminar desquiciado con las comillas, por ejemplo.

Ahora mismo acabo de dejar el asunto como sigue: cuatro funciones o métodos; todos ellos incluyen la posibilidad de indicar una función que muestre el progreso de la tarea y otra función que esté atenta al final de la misma.

En los dos primeros se asume el método a utilizar, de modo que no hace falta pasarlo como parámetro, y también se asume que la petición "GET" o "POST" no tendrá "query" alguna, por lo que tampoco hace falta pasar ese parámetro.

Lo siguiente es real y forma parte del ejemplo de la clase/variable/lo que sea:

Código PHP:

<a onclick="Ajax.Get('hora-actual.php', 'destino', ProgresoPeticionHttp, FinalPeticionHttp);" href="#" title="Get">Get</a> 


Cuatro parámetros: el Script receptor, el ID del elemento destino de la misma, la función para el progreso y la función para el final de la tarea.

Lo mismo para el método "Post", es decir:

Código PHP:

<a onclick="Ajax.Post('hora-actual.php', 'destino', ProgresoPeticionHttp, FinalPeticionHttp);" href="#" title="Get">Get</a> 


Y quedan dos métodos más, los cuales asumen vuelven a asumir el método a utilizar: se cuenta con un método para "get" y otro para "post". Estos dos métodos, sin embargo, requieren que se especifique la "query" a utilizar. Puede llamárseles así:

Código PHP:

<a onclick="Ajax.GetQuery('clave-valor.php', 'destino', 'clave=valor', ProgresoPeticionHttp, FinalPeticionHttp);" href="#" title="GetQuery">GetQuery</a> 


Son cinco parámetros, pero, en fin, en menos de momento no he sabido dejarlo. He quitado del medio los "Get" y los "Post" que únicamente tenían dos parámetros: el Script de la petición y el ID del elemento destino, puesto que dejaban fuera el progreso y el final de la tarea, y esto no creo que en una aplicación "real" tenga mucho sentido.

Respecto de la notación que puedes ver Román... yo no tengo mucha idea de JavaScript, no nos vamos a engañar, sin embargo, en algún sitio la ví y comenzé a utilizarla... comprendo que tú usas otra que también me consta que se utiliza... y que yo no uso porque me parece más liosa, sin duda por mi ignorancia.

PD. El ejemplo de todo esto sigue pudiéndose ver en: http://dec.clubdelphi.com/ajax.class.js/

Notar que el progreso de la tarea en realidad se fuerza usando la función "sleep" de PHP. En realidad las peticiones son tan sencillas y ocupan tan poco que no requieren prácticamente tiempo, pero, entonces no se vería "el progreso" tal como se vería en situaciones más reales.

PD2: Me dio por buscar si había forma de pasar un Array de PHP a JavaScript... por aquello de pasar un parámetro únicamente que los contuviera a todos... pero, aunque ví que había algo ya por ahí no quise ir más allá. Creo que con lo que hay ahora mismo podrían ya hacerse cosas...