0

estoy siguiendo un tutorial, pero la página no muestra nada. index.html

        <html>
<head></head>
<body>
    <button onclick="ajax_get_json()">Mostrar datos</button>
    <div id="info"></div>

    <script type="text/javascript">
        var resultado = document.getElementById("info");

        function ajax_get_json(){
            var xmlhttp;

            /*
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } */

            if(window.XMLHttpRequest) /*Vemos si el objeto window posee el metodo XMLHttpRequest(Navegadores como Mozilla y Safari).*/
            {
                xmlhttp = new XMLHttpRequest(); //Si lo tiene, crearemos el objeto
            }  

            else if(window.ActiveXObject) /*Sino tenia el metodo anterior,deberia ser el Internet Exp.*/
            {
                var versionesObj = new Array(
                                            'Msxml2.XMLHTTP.5.0',
                                            'Msxml2.XMLHTTP.4.0',
                                            'Msxml2.XMLHTTP.3.0',
                                            'Msxml2.XMLHTTP',
                                            'Microsoft.XMLHTTP');

                for (var i = 0; i < versionesObj.length; i++)
                {
                    try
                        {
                            xmlhttp = new ActiveXObject(versionesObj[i]);
                        }
                        catch (errorControlado)
                        {

                        }
                }
            }
            throw new Error("No se pudo crear el objeto XMLHttpRequest");

            xmlhttp.onreadystatechange = function(){                
                if(xmlhttp.readystate === 4 && xmlhttp.status === 200){
                    var datos = JSON.parse(xmlhttp.responseText);

                    for(var i in datos){
                        resultado.innerHTML += i + ": " + datos[i] + "<br/>"
                    }
                }
            }

            xmlhttp.open("GET", "datos.json", false);
            xmlhttp.send();

        }
    </script>
</body>
</html>
7
  • Como estás probando la web. ¿Abres el fichero .html directamente en el navegador o lanzas un servidor en local? Commented el 23 jun. 2018 a las 7:59
  • Uso el xampp y luego lo abro en el navegador Commented el 23 jun. 2018 a las 8:02
  • ¿Aparece algún error en la consola de JS?
    – Alvaro Montoro
    Commented el 23 jun. 2018 a las 14:24
  • No... aparecen los datos del Json Commented el 25 jun. 2018 a las 16:20
  • @JhonHernández El navegador te devuelve el json desde la consola? o podrías explicar mejor tu problema, donde es que no se visualiza tu data...
    – vicasas
    Commented el 25 jun. 2018 a las 16:31

1 respuesta 1

0

Compara tu código con esta solución, la escribí cuando necesité manejar ajax, sin hacer uso de librerías de terceros, y me ha resultado muy útil:

Primero construir una clase que se pueda invocar desde cualquier parte

<!-- language: lang-js -->  
// Se define un objeto que centraliza todos los llamados  
// para obviar eventuales conflictos de espacios de nombres  
var llamadorAJAX = new Object();  

// Se asignan constantes para control de estatus  
llamadorAJAX.READY_STATE_UNINITIALIZED = 0;  
llamadorAJAX.READY_STATE_LOADING = 1;  
llamadorAJAX.READY_STATE_LOADED = 2;  
llamadorAJAX.READY_STATE_INTERACTIVE = 3;  
llamadorAJAX.READY_STATE_COMPLETE = 4;  
// Respuesta satisfactoria del servidor  
llamadorAJAX.LOAD_STATUS_SUCCESS = 200;  
// Método constructor  
llamadorAJAX.CargadordeContenidos = function(url, accion, OnloadcallBack,  
                                    OnErrorCallBack, data,  
                                    encodeProtocol) 
{  
    this.url = url;
    this.xhr = null; // objeto request
    this.method = (accion) ? accion : "GET";
    if (encodeProtocol){
        this.encodeProtocol = encodeProtocol;
    }else{
        if(this.method=="POST"){
            this.encodeProtocol = "application/x-www-form-urlencoded";
        }else{
            this.encodeProtocol = null;
        }
    } 
    this.data = (data) ? data : null;
    this.onload = OnloadcallBack;
    this.onerror = (OnErrorCallBack) ? OnErrorCallBack : 
                                       this.defaultError;
    this.cargaContenidoAJAX(url);
} 
// Ahora ajustes en el prototipo del lanzador de solicitudes
llamadorAJAX.CargadordeContenidos.prototype = {
cargaContenidoAJAX: function(url) {
    if(window.XMLHttpRequest){
        this.xhr = new XMLHttpRequest();
    }else{
        if(window.ActiveXObject) {
            this.xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    if(this.xhr){
        try{
            var loader = this;
            this.xhr.onreadystatechange = function() {
                loader.onReadyState.call(loader);
            }
            this.xhr.open(this.method, url, true);
            // si el metodo es POST es necesario que encodeprotocol se haya establecido
            if (this.encodeProtocol){
                this.xhr.setRequestHeader("Content-Type", this.encodeProtocol);
            }
            this.xhr.send(this.data);
        }catch(err){
            this.onerror.call(this);
        }        
    }
},
onReadyState: function() {
    var xhr = this.xhr;
    var ready = xhr.readyState;
    // interesa atrapar estado complete
    if (ready==llamadorAJAX.READY_STATE_COMPLETE){
        var httpStatus = xhr.status;
        // verifica la condicion del resultado
        if ((httpStatus == llamadorAJAX.LOAD_STATUS_SUCCESS) || (httpStatus == 0)){
            this.onload.call(this);
        }else{
            this.onerror.call(this);
        }
    }
},
defaultError: function() {
    alert("Se ha producido un error al obtener los datos"
        + "\n\nreadyState:" + this.req.readyState
        + "\nstatus: " + this.xhr.status
        + "\nheaders: " + this.xhr.getAllResponseHeaders());
}}

Ahora su uso
Escribir un método para mostrar errores generales (en caso de necesidad) y al menos un método para tratar las devoluciones Ajax así:

function retrollamado_mostrar_respuesta_ajax(){
    var respuesta = ''+ this.xhr.responseText;
    // Hacer lo que se quiera con la respuesta
}

Y, para ejecutar las solicitudes

// Declarar la dirección que atiende la solisitud ajax
var url = 'http://www.misitio.com/ajaxresponser.html'; // o
var url = 'http://www.misitio.com/index.php?q=ajaxresponser'; // o etc
// Recoger los datos a pasar
var data = miMetodoParaRecogerData();
// Ejecutar el llamado
var dummie = new llamadorAJAX.CargadordeContenidos(url, "POST",  
           retrollamado_mostrar_respuesta_ajax, null, data);

Y no es más. Ahora tiene una utilidad que maneja todas sus solicitudes.

6
  • Soy nuevo en esto... el ejemplo sencillo en el que se llama un json con un botón, ¿cómo quedaría entonces? Commented el 25 jun. 2018 a las 19:29
  • @Jhon Hernández: Los datos ¿Son devueltos por el servidor o tratas de enviarlos? No se ve claro en tu código.
    – quevedo
    Commented el 25 jun. 2018 a las 19:32
  • El propósito de un llamado Ajax es producir una recarga o modificación parcial de una página, eventualmente actualizando datos en el servidor, sin necesidad de recargar la página completa. Debes mostrar qué vas a enviar, y si no envías nada, dónde quieres ver lo que te devuelven para pasarlo allí.
    – quevedo
    Commented el 25 jun. 2018 a las 19:38
  • uso xampp para simular un servidor donde hay un archivo json, eso es lo que pido con ajax Commented el 26 jun. 2018 a las 1:41
  • El llamado Ajax es asíncrono. De modo que el proceso termina antes de recibir la respuesta del servidor. Si no tienes un método o algo que procese la respuesta, cuando llegue, no se muestra nada. Examina el código que te dejé arriba
    – quevedo
    Commented el 26 jun. 2018 a las 1:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.