¿Es incompatible responseText de ajax con JSON?

agcforos · #1 (**permalink**) 02/10/2011, 11:59

Hola.
Estoy realizando una petición ajax y me esta devolviendo una cadena pero no consigo leer nada de esta cadena, sin duda porque estoy haciendo . En el php en el que hago la petición en el servidor, paso la consulta a JSON y previamente he pasado esta consulta a un array para poder leerlo con javascript.
En resumen:
1 - Realizo la petición AJAX.
2 - Hago la consulta en el php.
3 - Transformo esta consulta a un array
4 - Trato este array mediante una función para poder leer estos datos con javascript.
5 - Codifico este array con JSON para transmitirlo.
6 - Lo recibo en el html con javascript.
7 - A partir de aquí me vienen las muchas dudas. Si lo intento descodificar para poder leerlo, el javascript me da un error en el momento que pongo JSON.parse.

¿Esto último se puede dar porque no se puede pasar el JSON codificado como una cadena de texto con responseText?

Adjunto el código por si alguien puede ayudarme y decirme como leer los elementos de este imagino que array.

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="author" content="SyToo" />
    
    <script type="text/javascript" src="json.js"></script>  
    <script type="text/javascript">
 
    var title1;
    var idcurso;
    var idasignatura;
    var idtema;
    var curso;
    var asignatura;
    var tema;
    var usuario;
    var myArr;
    var capaContenedora;
    
    function inicio(){
        var vars=[];
        query=window.location.search.substring(1);
        q=query.split("&");
        for(i=0;i<q.length;i++){
            x=q[i].split("=");
            k=x[0];
            v=x[1];
            vars[k]=v;
        }
        idcurso = vars['idcurso']; 
        idasignatura = vars['idasignatura'];
        curso = vars['curso']; 
        asignatura = vars['asignatura'];
        tema = vars['tema'];
        idtema = vars['idtema'];
        usuario = vars['usuario'];
        title1 = curso+' - '+asignatura+' - '+tema;
        document.title = unescape(title1);
        verCabecera();
        verUsuario();
        FAjax('devuelveArray.php', 'capaContenedora', 'idtema='+idtema, 'POST');
    }
    
    function verCabecera(){
        document.getElementById('cat').innerHTML = unescape(title1);
    }
    
    function verUsuario(){
        document.getElementById('usu').innerHTML = unescape(usuario);
    }
     
    function creaAjax(){
        var objetoAjax = false;
        try {
            // Para navegadores distintos a Internet Explorer.
            objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                // Para Explorer.
                objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (E) {
                objetoAjax = false;
            }
        }
        if(!objetoAjax && typeof XMLHttpRequest != 'undefined') {
            objetoAjax = new XMLHttpRequest();
        }
        return objetoAjax;
    } 
    
    function FAjax(url, capa, valores, metodo){
        var ajax = creaAjax();
        
        //Creamos y ejecutamos la instancia si el método elegido es POST.
        if (metodo.toUpperCase() == 'POST') {
            ajax.open('POST', url, true);
            ajax.onreadystatechange = function(){
                procesaAjax(ajax, capa);
            }
            ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            ajax.send(valores);
            return;
        }
        
        //Creamos y ejecutamos la instancia si el método elegido es GET.
        if (metodo.toUpperCase() == 'GET') {
            ajax.open('GET', url, true);
            ajax.onreadystatechange = function(){
                procesaAjax(ajax, capa);
            }
            ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            ajax.send(null);
            return;    
        }
    }
    
    function procesaAjax(ajax, capa){
        capaContenedora = document.getElementById(capa);
        if (ajax.readyState == 1) {
                capaContenedora.innerHTML = "Cargando.......";
        } else if (ajax.readyState == 4) {
            if (ajax.status == 200) {
                myArr = replaceAll(ajax.responseText, '|', '"');
                //capaContenedora.innerHTML = myArr;
                procesarArray();              
            } else if (ajax.status == 404) {
                capaContenedora.innerHTML = "La dirección no existe";
            } else {
                capaContenedora.innerHTML = "Error: " + ajax.status;
            }
        }
    }
    
    function procesarArray(){
        myArray = JSON.parse(myArr);
        capaContenedora.innerHTML = myArray;
    }
    
    function replaceAll( text, busca, reemplaza ){ 
        while (text.toString().indexOf(busca) != -1) {         
          text = text.toString().replace(busca,reemplaza);
    }
        return text;
    }
 
    
    
    
</script>
 
    <title></title> 
    
<style>
      h2 {
        font-family: Arial, Helvetica, sans-serif; 
        font-size: 22px; 
        color : red; 
        margin : 6px; 
      }
      body {
        font-family: Arial, Helvetica, sans-serif; 
        font-size: 13px; 
        background-color: #F5DEB3;
      }
      li, td {
        font-family: Arial, Helvetica, sans-serif; 
        font-size: 13px; 
      }
      hr {
        color: #FF0000; 
        width:70%; 
        text-align:center;
      }
      a {
        color: #000000 
      }
      input.error{
        background-color : silver;
        border : 1px solid black;
      }
      #volver, #pregunta{
        text-align:center;
      }
      #pregunta, #respuesta1, #respuesta2, #respuesta3, #respuesta4{
        padding-left: 7px;
      }
      #capaContenedora{
        border-style: groove double;
        padding: 10px;
        margin: 14px;
        border-color: blue;
      }
</style>
    
</head>
 
<body>
 
    <table width=100% border=0 cellspacing = 0 background='imagenes/indice1.jpg'>
        <tr>
        <td rowspan = 2>
        <a href = "do_cursos.php"><img src="imagenes/libro.png" alt="Anagrama Aprendetu" border=0 
             align=left valign=bottom height = 60 width = 247></a>
        </td>
        <td align = right valign = bottom>
         
        </td>
        </tr>
    </table>
    
    <h2 id='cat'></h2>
      
    Tu usuario es: <b id='usu'></b>
    
    Este es el ejemplo de envío recepción de datos por AJAX<br /><br />
    <!--<div style="text-align: center;">
        <form method="post" onsubmit="FAjax('devuelveArray.php', 'capaContenedora', 'idtema='+idtema, 'POST'); return false" action="#">
            <input type="hidden" id="idtema" value="" />
            <div><input type="submit" value="enviar" /></div>
        </form>
    </div>-->
    <div id="capaContenedora">Capa que recibirá los datos</div>
 
<script>
// Recupero los parámetros de entrada y cargo el campo oculto idtema.
    inicio();
    //document.getElementById('curso').value = idcurso;
</script>
</body>
</html>

Código PHP:

Ver original<?
  include ('aprendetu_sc_fns.php');
  // Necesitamos una sesión, así que empezar una
  @session_start();
  
  ?>
  
        <LINK rel="stylesheet" type="text/css" href="cuerpo.css">
     
  <?php
  
  $array_preguntas = array();
   
  $idtema = $_POST['idtema'];
 
  // Obtener las preguntas relacionadas con el tema seleccionado
  $preguntas = get_preguntas($idtema);
  
  $numero_preguntas = @mysql_num_rows($preguntas);
  
  $usuario = $_SESSION['usuario'];
  $_SESSION['num_preguntas'] = $numero_preguntas;
  $_SESSION['indice_array'] = 0;
  $_SESSION['aciertos'] = 0;
  $_SESSION['primeraVez'] = true;
  
  if ($numero_preguntas > 0){
      // Array que contendrá las filas de nuestra consulta
    for($i=0; $i<$numero_preguntas; $i++) {   
        $array_preguntas[$i] = mysql_fetch_array($preguntas);
    }
    
    PHPtoJS($array_preguntas);
    $oJSON = new JSON();
    $myArr = $oJSON->encode($array_preguntas);
    $myArr = str_replace('"','|',$myArr);
    //echo "valor de myArr: ".$myArr;
    
    if ($_GET) {
       echo "Valores del formulario con el método GET: <pre>";
       print_r($myArr);
       echo "</pre>"; 
    }
    if ($_POST) {
       echo "Valores del formulario con el método POST: <pre>";
       print_r($myArr);
       echo "</pre>"; 
    }
   
} else {
    echo "<p>Este tema actualmente no tiene preguntas/respuestas a realizar</p>";
  }
?>

Dentro del anterior include está el include_once("JSON.php");

Muchas gracias a todos y saludos.

agcforos · #2 (**permalink**) 02/10/2011, 12:10

Ampliando el tema.

Si proceso la función la función procesarArray con la descodificación...

myArray = JSON.parse(myArr);

Se me cuelga la petición y se queda continuamente en cargando, es decir no finaliza.

Y si no proceso esta función si finalizar la petición con el siguiente resultado:

Cita:

[{"0":"180","idpregunta":"180","1":"Quiero ver la pregunta","descpregunta":"Quiero ver la pregunta","2":"aaa","usuario":"aaa","3":"ddddddddd ddddddddddddr","r1":"dddddddddddddddddddddr","4":" rrrrrrrrrrrrrrrrrrrrrrrrrr","r2":"rrrrrrrrrrrrrrrr rrrrrrrrrr","5":"gggggggggggggggggggggggggggg","r3 ":"gggggggggggggggggggggggggggg","6":"jjjjjjjjjjjj jjjjjjjjjjjjj","r4":"jjjjjjjjjjjjjjjjjjjjjjjjj","7 ":"Falso","c1":"Falso","8":"Falso","c2":"Falso","9 ":"Verdadero","c3":"Verdadero","10":"Falso","c4":" Falso","11":"6","idtema":"6","12":"1","validado":" 1"}]

Seguro que hay algo que, o no lo estoy haciendo, o lo estoy haciendo de mas, pero en cualquiera de los casos, me estoy liando.
De nuevo saludos y gracias a todos.

agcforos · #3 (**permalink**) 03/10/2011, 02:31

Dicho de otro modo...
Si devuelvo una variable JSON dentro de una respuesta ajax responseText como cadena de texto, ¿puedo tratar esta cadena como JSON y descodificarla para tratarla en un javascript?

agcforos · #4 (**permalink**) 03/10/2011, 12:43

Hola a todos.
Voy a ver si preguntándolo de otro modo tengo mejor suerte.
¿Existe algún problema por recibir como texto, es decir responseText, una cadena JSON?
Me está dando un problema al parsear en javascript una cadena JSON recibida por AJAX de la forma que comento, y sin embargo con los mismos pasos pero por url método GET, recibo esta cadena, la parseo a javascript y la leo sin ningún problema. Al hacerlo con responseText la sentencia JSON.parse(array) me da el siguiente error cuando proceso:
uncaught exception: [object Object]

agcforos · #5 (**permalink**) 04/10/2011, 11:22

Sigo teniendo la duda de si es posible pasar una cadena JSON dentro de un responseText, pero ya lo he solucionado de otra manera. Simplemente por AJAX sin codificarlo para enviarlo como JSON.
Imagino que averigüare mi pregunta. Cuando lo haga me molestaré en ponerlo para todo aquel que tenga mi misma duda que quiero pensar que es mucha.
Muchas gracias por todo, como siempre a todos, y saludos.