[SOLUCIONADO] Duda Javascript [En tiempo de ejecucion]

NeaFan · #1 (**permalink**) 04/01/2015, 00:08

Al grano tengo la siguiente pagina de prueba:

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Archivo Principal</title>
        <script type="text/javascript" src="ajax.js"></script>
        <script type="text/javascript">
            ejecutame = function() {
                ajax("java.php","variable=hola");
            }
            validame = function() {
                var h = document.getElementById("divpru").innerHTML;
                alert(h);
            }
        </script>
    </head>
    <body>
        <button onclick="ejecutame();">ejecutame</button>
        <button onclick="validame();">validame</button>
    </body>
</html>

estaba intentando hacer un truco con la respuesta de mi función ajax, al retornar el mismo dentro de una variable string. Sin embargo presente muchos inconvenientes «OJO no tengo problemas con la petición, ni la respuesta.

Solo deseo tratar dicha respuesta como un dato tipo string»

En fin la pregunta es el código anterior tal como esta funciona, la función ajax llamada desde el enlace crea un nuevo elemento en el DOM con el id "divpru" y la función validame asigna el contenido en el nuevo elemento a una variable. Ahora si modifico el código así:

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Archivo Principal</title>
        <script type="text/javascript" src="ajax.js"></script>
        <script type="text/javascript">
            ejecutame = function() {
                ajax("java.php","variable=hola");

                var h = document.getElementById("divpru").innerHTML;
                alert(h);
            }
        </script>
    </head>
    <body>
        <button onclick="ejecutame();">ejecutame</button>
    </body>
</html>

el resultado del alert es vacío. ¿Porque se presenta esta peculiaridad?

Alexis88 · #2 (**permalink**) 04/01/2015, 01:43

Eso sucede porque las dos líneas siguientes se ejecutan antes de que se termine de procesar la petición asíncrona. Tendrías que agregarlas en el bloque de código dentro de la función en donde proceses dicha respuesta.

Saludos

NeaFan · #3 (**permalink**) 04/01/2015, 11:00

Cita:

Iniciado por Alexis88

Tendrías que agregarlas en el bloque de código dentro de la función en donde proceses dicha respuesta.

Es muy curios veras estoy haciendo todo aqui afuera por que dentro de la funcion ajax tampoco funciona, te muestro:

Código Javascript:

Ver originalfunction ajax(url, dato, metodo) {
    dato = dato || "";
    metodo = metodo || "POST";
 
  var xmlhttp = ObjetoXMLHttpRequest();//Se crea el objeto para manejar la conexión AJAX
 
  //Función que va a procesar la petición al servidor en caso de que se espere respuesta
  xmlhttp.onreadystatechange=function(){
    if( xmlhttp.readyState == 4 && xmlhttp.status == 200 ){
      respuesta = new String();
      respuesta = '"'+xmlhttp.responseText+'"';
      respuesta = (eval(respuesta));
      midiv = document.createElement('div');
      midiv.id = "divpru";
      midiv.innerHTML = respuesta;
      document.body.appendChild(midiv);
 
     //estando aqui dentro intento leer el recién-contenido del div
     var midato = document.getElementById("divpru").innerHTML;
     alert(midato);
     
    }
  }
 
  //Apertura para el envío de la petición
  xmlhttp.open(metodo,url,true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send(dato);
}

tampoco es que tenga un buen resultado con xmlhttp.open(metodo,url,false);

EDIT: Aclaración, te preguntaras por que tanto embrollo en crear un elemento div para luego pasarle el valor de la variable respuesta que bien puedo implementar así:

Código Javascript:

Ver originalalert(respuesta);

¿Funcionaria? Si... Estamos claros, pero realmente no quiero aplicar un alert quiero trabajar con el contenido de esa variable lo que deseo es hacer algo así como:

Código Javascript:

Ver originalreturn respuesta; //Entiendase como un return xmlhttp.responseText; o similar...

Puesto que dicha idea no ha sido posible se me ocurrió que si el contenido lo puedo pasar a un elemento del DOM:

Código Javascript:

Ver originaldocument.getElementById("divpru").innerHTML = xmlhttp.responseText;
//Poteriormente leer el cntenido del elemento creado
return document.getElementById("divpru").innerHTML;
.
.
//Fuera de la librería podría hacer algo como:
var mivariable = ajax("java.php","variable=hola");
 
HagoLoQueQuieroCon(mivariable);

Esto que requiero actualmente lo hago con jQuery, pero la verdad solo implemento jQuery para usar ajax y nada mas, deseo usar RequiredJs me ha gustado la idea de controlar mis módulos y jQuery me ha dado problemas para integrarse puesto que no maneja el modelo AMD. Por ello no quiero una solución JQuery

Gracias por la atención prestada.

Alexis88 · #4 (**permalink**) 04/01/2015, 18:30

No estoy seguro de que tenga mucho que ver, pero esto no es necesario:

Código Javascript:

Ver originalrespuesta = new String();
respuesta = '"'+xmlhttp.responseText+'"';

Puesto que responseText indica que estás recibiendo texto plano. Las comas y crear un objeto String están de más.

Por otro lado, ten cuidado con ejecutar la misma función varias veces porque terminarías creando varios elementos con el mismo id y eso no es correcto ya que se trata de un dato único.

¿Y qué tal si pruebas retornando esto?

Código Javascript:

Ver originalreturn xmlhttp.responseText;

Saludos

NeaFan · #5 (**permalink**) 05/01/2015, 13:10

Hola, esta fracción que muestro no es todo mi código

.
Claro que se que a creación de un elemento una y otra vez con el mismo ID no debe ser, por ello en mi código completo elimino el elemento recién creado la creación del mismo la hago puesto que por alguna razón esto no funciona:

Código Javascript:

Ver originalreturn xmlhttp.responseText;

en cuanto a esta linea:

Código Javascript:

Ver originalrespuesta = '"'+xmlhttp.responseText+'"';

solo era una medida desesperada por respetar el contenido completamente, puesto que si mi respuesta fuese algo como esto:

Código Javascript:

Ver originalvar respuesta = '<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Frame Contenedor</title>
    </head>
    <body>
        <a href="frame2.php" target="miframe2">iniciar frame 2</a>
        <iframe id="miframe2" name="miframe2"></iframe>
    </body>
</html>';

De seguro algunas etiquetas se eliminarían y algunos de los caracteres del contenido no se respetarían »Descuida ya lo solucione» De echo conseguí completar mi implementación de una manera bastante aceptable.

Alexis88 · #6 (**permalink**) 05/01/2015, 17:55

Cita:

Iniciado por NeaFan

Descuida, ya lo solucione. De echo conseguí completar mi implementación de una manera bastante aceptable.

¿Podrías mostrarnos cómo lo conseguiste? Quizá otros usuarios tengan el mismo problema que tuviste y aquí podrían encontrar la solución.

NeaFan · #7 (**permalink**) 05/01/2015, 21:06

Esta es la solución que implemente:
http://www.forosdelweb.com/f13/aporte-ajax-sin-librerias-1117722/

En cuanto a la respuesta:

Cita:

Iniciado por Alexis88

Eso sucede porque las dos líneas siguientes se ejecutan antes de que se termine de procesar la petición asíncrona. Tendrías que agregarlas en el bloque de código dentro de la función en donde proceses dicha respuesta.

Aunque no aclare del todo mi duda, creo que esta respuesta estubo muy cerca y teniendo en cuenta que solucione el problema que incentivo la duda. daré el tema como solucionado.