11486 sujets

JavaScript, DOM et API Web HTML5

Code AJAX ne fonctionnant que sur Edge

Bonjour,

débutant avec AJAX, je ne comprends pas pourquoi l'appel de mon fichier texte ne fonctionne que sur le navigateur EDGE (Firefox, Chrome et Safari ne font rien)

Voici le code :

<!DOCTYPE html>
<html>
<head>


</head>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}
</script>

[b]</body>
</html>
Comme ce qui marche partout ailleurs ne fonctionne généralement pas (ou mal) avec les produits Microsoft, rien d'étonnant à ce que l'inverse soit aussi vrai Smiley cligne
Plus sérieusement, nous avons besoin d'en savoir plus sur la localisation de tes fichiers. Sont ils sur un serveur ou en local?
Il y a des limites à l'utilisation d'AJAX, en particulier les navigateurs interdisent généralement l'utilisation d'AJAX entre différents serveurs, ou en ciblant des fichiers locaux.
Merci Papy JP, j'ai eu cette idée également, en effet sur serveur cela fonctionne sur tous les navigateurs.

Les choses se compliquent à présent, car je souhaiterai que selon mon choix dans un menu déroulant avec suggestion, le résultat approprié s'affiche sous le champ dans la zone de résultat matérialisé (plusieurs jours de recherche sur ce sujet précis ne m'ont pas permis de trouver la solution) actuellement mon fichier "resultat.txt" à la racine du dossier n'est pas appelé, un tuto précis sur le sujet serait d'une grande aide !!

version test ici : http://me77.fr/TNS/AJAX/TEST.html

<!doctype html>
<html>
<head>
      <title>Seine-et-Marne-environnement.fr</title>
	
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
			<meta name="description" content="">
			<meta name="keywords" content="">
			<meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="style.css">
      
      <style type="text/css">
                      .ReadMsgBody {width: 100%; background-color: #fff;}
                      .ExternalClass {width: 100%; background-color: #fff;}      
      </style>

<body>
		<form autocomplete="off" >
			<div class="autocomplete" style="width:277px;"><input id="myInput" type="text" name="maCommune" placeholder="Commune"></div>
			<input type="submit" value="Valider" onclick="loadDoc()">
		</form>
	
		<div id="resultat" style="color: black">ZONE DE RESULTATS</font></div>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("resultat").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "resultat.txt", true);
  xhttp.send();
}

function autocomplete(inp, arr) {
 
  var currentFocus;
  
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      this.parentNode.appendChild(a);
      for (i = 0; i < arr.length; i++) {
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          b = document.createElement("DIV");
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          b.addEventListener("click", function(e) {
              inp.value = this.getElementsByTagName("input")[0].value;
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        currentFocus++;
        addActive(x);
      } else if (e.keyCode == 38) {
        currentFocus--;
        addActive(x);
      } else if (e.keyCode == 13) {
        e.preventDefault();
        if (currentFocus > -1) {
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }
  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
  });
}
var communes = ["Achères-la-Forêt","Amillis","Amponville","Andrezel","Annet-sur-Marne","Arbonne-la-Forêt","Argentières","Armentières-en-Brie","Arville","Aubepierre-Ozouer-le-Repos","Aufferville","Augers-en-Brie","Aulnoy","Avon","Baby","Bagneaux-sur-Loing","Bailly-Romainvilliers","Balloy"
];

autocomplete(document.getElementById("myInput"), communes);
</script>
</body>
</html>
Sujet clos
Aller à