8

Estoy intentado un ejemplo en Ajax que al parecer solo funciona en Firefox. En Chrome no funciona. ¿Alguien sabe porque? Gracias

index.html

  <div class="contenedor">
        <p>AJAX</p>          
        <button id="cargar" value="cargar">Cargar</button>
        <div id="contenido"></div>
  </div>
  <script src="js/06.js"></script>

06.js

var btnCargar = document.getElementById('cargar');

function cargarContenido() {
  // se crea
  var xhr = new XMLHttpRequest();

  // se abre
   xhr.open("GET", "servidor.php", true);

   // revisar que cambie
   xhr.onreadystatechange = function() {
      console.log(xhr.readyState);

      if(xhr.readyState == 4 && xhr.status == 200) {
          //console.log("Se cargo correctamente");
          var json = JSON.parse(xhr.responseText);

          //console.log(json);
          var contenido = document.getElementById('contenido');
          contenido.innerHTML = json.frontend;
      } 
   };
   xhr.send(); 
}

btnCargar.addEventListener('click', cargarContenido );

servidor.php

$tecnologias = array(
    'frontend' => 'html5, css3, javascript',
    'backend' => 'php, mysql, apache',
    'fullstack' => 'html, css3, javascript, php, mysql, apache'
);
echo json_encode($tecnologias);
9
  • 1
    lo que sucede es que estas usando javascript puro, prueba con un fw como jQuery por medio de sus ajax para evitarte problemas con diferentes navegadores. revisa la sig. URL: cursos.mejorcodigo.net/article/… Commented el 4 may. 2018 a las 18:36
  • 1
    te dejo una pequeña guia: fernando-gaitan.com.ar/ajax-facil-primera-parte Commented el 4 may. 2018 a las 18:41
  • 2
    doc oficial ajax : api.jquery.com/jquery.ajax Commented el 4 may. 2018 a las 18:41
  • 2
    Es muy raro que en chrome no funcione. He encontrado esta respuesta en ingles para que ajax funcione en todos los navegadores. Luego, mirate w3schools ajax ya que todo el mundo te envia informacion sobre jQuery.
    – Txmx
    Commented el 6 ago. 2018 a las 14:40
  • 3
    También estaría muy bien que explicaras si el error es en el envío o en la respuesta. Que llega al php y que devuelve
    – Txmx
    Commented el 6 ago. 2018 a las 14:42

2 respuestas 2

0

intenta con este codigo JS y me comentas, donde puede variar en vez de hacer console.log manipulas el HTML una vez tengas la respuesta que necesitas

    let myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");


let requestOptions = {
  method: 'GET',
  headers: myHeaders,
};

fetch("http://localhost/servidor.php", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));
0

Creo que el problema se puede solucionar haciendo que el código se ejecute una vez se haya cargado toda la página.

Por ejemplo:

window.onload = () => {
    var btnCargar = document.getElementById('cargar');

    function cargarContenido() {
    // se crea
    var xhr = new XMLHttpRequest();

    // se abre
    xhr.open("GET", "servidor.php", true);

    // revisar que cambie
    xhr.onreadystatechange = function() {
        console.log(xhr.readyState);

        if(xhr.readyState == 4 && xhr.status == 200) {
            //console.log("Se cargo correctamente");
            var json = JSON.parse(xhr.responseText);

            //console.log(json);
            var contenido = document.getElementById('contenido');
            contenido.innerHTML = json.frontend;
        } 
    };
    xhr.send(); 
    }

    btnCargar.addEventListener('click', cargarContenido );
}

1
  • Acabo de darme cuenta de la fecha de esta consulta, jejeje. Sorry!
    – Hnry23
    Commented el 3 ago. 2023 a las 13:55

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.