duda de CARGANDO... con Ajax

morfasto · #1 (**permalink**) 29/10/2011, 01:00

Hola, que tal?

Tengo un script en ajax que sirve para refrescar cieto div con informacion de un php.
La duda que tengo es que a veces cuando monto el script en mi host, cuando accedo, se demora en cargar, entonces queria ver la manera de hacer para mostrar un mensaje mientras carga como: "Cargando...", en el mismo div donde se mostraria la informacion del php.

Este es mi codigo:

Código Javascript:

Ver originalvar http_request = false;
function makePOSTRequest(url, parameters, funcion) {
  http_request = false;
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
     http_request = new XMLHttpRequest();
     if (http_request.overrideMimeType) {
        // set type accordingly to anticipated content type
        //http_request.overrideMimeType('text/xml');
        http_request.overrideMimeType('text/html');
     }
  } else if (window.ActiveXObject) { // IE
     try {
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
        try {
           http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
     }
  }
  if (!http_request) {
     alert('Cannot create XMLHTTP instance');
     return false;
  }
  
  http_request.onreadystatechange = funcion;
  http_request.open('POST', url, true);
  http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");
  http_request.send(parameters);
}
 
function alertContents() {
  if (http_request.readyState == 4) {
     if (http_request.status == 200) {
        //alert(http_request.responseText);
        result = http_request.responseText;
        document.getElementById('div').innerHTML = result;            
     } else {
        alert(http_request.status);
     }
  }
}
 
function get() {
  var poststr = "codigo=" + encodeURI( document.getElementById("producto_id").value );
  makePOSTRequest('generar_producto.php', poststr, alertContents);
}

Se que si el http_request.readyState es igual a 1, significa que todavia no esta completo, que recien se inicia el proceso. Pero no sabria como modificar mi codigo para poder mostrar el mensaje de "Cargando..." cuando todavia no se completa.

Alguna idea?

Muchas gracias!

IsaBelM · #2 (**permalink**) 29/10/2011, 04:59

lee este tutorial

dleal100 · #3 (**permalink**) 29/10/2011, 21:36

TIENES QUE COMPROBAR EL ESTADO XXDD
ACA TE MODIFIQUE TU CODIGO PARA QUE DIGA QUE ESTA CARGANDO XD

Código:

var http_request = false;
function makePOSTRequest(url, parameters, funcion) {
  http_request = false;
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
     http_request = new XMLHttpRequest();
     if (http_request.overrideMimeType) {
        // set type accordingly to anticipated content type
        //http_request.overrideMimeType('text/xml');
        http_request.overrideMimeType('text/html');
     }
  } else if (window.ActiveXObject) { // IE
     try {
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
        try {
           http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
     }
  }
  if (!http_request) {
     alert('Cannot create XMLHTTP instance');
     return false;
  }
  
  http_request.onreadystatechange = funcion;
  http_request.open('POST', url, true);
  http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");
  http_request.send(parameters);
}
 
function alertContents() {
  if (http_request.readyState == 4 && http_request.status == 200)  {
     
        //alert(http_request.responseText);
        result = http_request.responseText;
        document.getElementById('div').innerHTML = result;            
      
  }else{document.getElementById('div').innerHTML = "cargando...";}
}
 
function get() {
  var poststr = "codigo=" + encodeURI( document.getElementById("producto_id").value );
  makePOSTRequest('generar_producto.php', poststr, alertContents);
}

IsaBelM · #4 (**permalink**) 30/10/2011, 07:53

Cita:

Iniciado por dleal100

TIENES QUE COMPROBAR EL ESTADO XXDD
ACA TE MODIFIQUE TU CODIGO PARA QUE DIGA QUE ESTA CARGANDO XD

enseña a pescar, no le des los peces

morfasto · #5 (**permalink**) 30/10/2011, 23:23

En mi codigo, para que sirve el:

Código Javascript:

Ver originalhttp_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");

Gracias!

dleal100 · #6 (**permalink**) 30/10/2011, 23:46

Cita:

Iniciado por morfasto

En mi codigo, para que sirve el:

Código Javascript:

Ver originalhttp_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");

Gracias!

eso sirve porque seve mas bonito ¿no crees XD? jajajajjja
no es sierto era broma XD

bueno no es necesario usar eso xD pero tendras que cambiar el metodo de envio si te das cuenta envias por POST, pero es mejor enviar datos por POST que por GET, asi que te aconsejo dejarlo todo como esta XD

enviar y resivir datos por GET es mas facil pero menos seguro ewe

PD: es para la codificacion de datos, la forma en que se mandan e interpretan los datos

morfasto · #7 (**permalink**) 31/10/2011, 01:11

Lo que pasa es que cuando corro el codigo, en la consola me sale que esas lineas mandan error, pero si las saco, todo funciona bien y sin errores.

Son indispensables?

dleal100 · #8 (**permalink**) 31/10/2011, 01:18

Cita:

Iniciado por morfasto

Lo que pasa es que cuando corro el codigo, en la consola me sale que esas lineas mandan error, pero si las saco, todo funciona bien y sin errores.

Son indispensables?

elimina solo esta linea ya que abre una coneccion y la cierra, y eso no se ase desde las versiones de php 4

Código:

 http_request.setRequestHeader("Connection", "close");

y si te sigue dando problemas tambien elimina esta
v
v

Código:

  http_request.setRequestHeader("Content-length", parameters.length);

iovan · #9 (**permalink**) 31/10/2011, 01:43

Veras.
Comenzamos con Peticiones HTTP.
El formato de una petición HTTP es de la siguiente forma:

<linea-petición>
<cabecera>
<linea en blanco>
[<cuerpo-petición>

Para mayor información sobre peticiones HTTP: (Buscar en google)

Concentrate en <cabeceras>

Cuando un navegador realiza una petición HTTP a un servidor, este manda una cadena de consultas llamada <cabeceras>

Las cabeceras proveen al servidor de información adicional que le será util para conocer como debe procesar dicha petición.

Dicho todo esto vamos a ver como luce una petción GET y una POST ambas definidas en HTTP

Petición GET

Código http:

Ver originalGET / HTTP/1.1
Host: www.forosdelweb.com
User-Agent: Mozilla/7.0 (Windows..... etc.......
Connection: Keep-Alive
 
[cuerpo]

Las cabeceras son: HOST que indica al servidor que la petición se refiere a www.forosdelweb.com

la versión HTTP 1.1 requiere de la cabecerá HOST, la 1.0 no la requiere

User-Agent, indica 2 cosas:
[*] Es la piedra angular de la mayor parte de la lógica para la detección del navedor[*] Indica que es accesible por los scripts tanto del lado del servidor como el del cliente.

Y por ultimo Connection: por defecto Keep-Alive === Te debo la explicación esta no me la sé.

---------------------------------------

Ya para no aburrirte. Vemos un ejemplo de una petición POST

NOTA: Una petición POST proporciona información adicional al servidor.

Código http:

Ver originalPOST / HTTP/1.1
Host: www.forosdelweb.com
User-Agent: Mozilla/7.0 etc.....
Content-Type: application/x-www-form-urlencode
Content-Length: [numero_de_parametros]
Connection: Keep-Alive
 
[cuerpo de la petición = "PARAMETROS"]

Como puedes ver, las lineas 4,5 y 6 se parecen bastante a lo que tienes en tu código:

Código Javascript:

Ver originalhttp_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");

mmm bueno, supongo que con esto ya obtuviste la respuesta que buscabas.

==> Lo que hacen esas 3 lineas de tu código es configurar las cabeceras que constituirán la petición que se enviará al servidor.

Y como son definiciones de cabeceras hay que tener ciertas consideraciones.

Para resumir: Antes de enviar esas cabeceras debes tener especial cuidado en no imprimir nada desde el servidor.

Por ejemplo, en el caso de trabajar en asincrónico con un PHP, este PHP no deberá tener un echo, print, etc.. o un espacio en blanco antes de la etiqueta <?php porque puede ser interpretado por el navegador, o cualquier contenido html antes de la etiqueta <?php

Si ocurre alguno de estos casos el código no servirá, y como no estás tratando las excepciones o trabajando con lenguaje de servidor, [creo que] el navegador no te indicará error si no solamente tu código no funcionará.

Bueno, etc....

Y la segunda consideración es:

Investiga porque en la linea

Código Javascript:

Ver originalhttp_request.setRequestHeader("Connection", "close");

dice "close"

Mira que pasa si le pones "Key-Alive"

Es todo, un saludo.

EDITO: JAJA no es "Key-Alive" si no "Keep-Alive"