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

[*Emilio*]

Empezado por dec

No os veáis obligados a comentar ni a decir ni a dejar de decir.

Hombre Dec, creo yo que ya que te has tomado la molestia, precisamente estaría bien que fueses tú el que comentase el código, puede ser tal vez evidente pero tal vez para mucha gente no lo sea.

[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