[Résolu] AJAX et passage en UTF-8

Bonjour la liste !

Je suis en train de faire un dictionnaire en ligne avec un champ de saisie des premières lettres du mot recherché qui déclenche l'apparition d'une liste de mots correspondants. Vous pouvez visualiser la chose ici. Si on tape bara ou abad (essayez !), pas de problème, mais si on rentre un caractère accentué ou un tilde, la liste n'apparaît pas. Exemple : loagañ ; rendu au ñ, la liste s'efface.

Pour l'instant j'ai un mélange innommable de ISO et de UTF8 ; j'ai donc décidé de tout passer en UTF-8 (fichiers sources, champs de la base de données, déclarations PHP, etc.). En localhost pour l'instant. Ajax ne fonctionne plus du tout, dès que je tape une lettre, j'ai droit à une fenêtre :

Erreur de lecture de la r?ponse : TypeError: Cannot read property 'documentElement' of null (Le ? est d'origine)

Voici le fichier javascript :

var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject() 
{
  var xmlHttp;
  try
  {
    xmlHttp = new XMLHttpRequest();
  }
  catch (e)
  {
    try
    {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e) { }
  }
  if (!xmlHttp)
    alert("Erreur de création de l'objet XMLHttpRequest.");
  else 
    return xmlHttp;
}

function process()
{
  
  if (xmlHttp)
  {
    try
    {
      name = encodeURIComponent(document.getElementById("ger").value); 
      if (name == '') {name = 'x'};
      xmlHttp.open("GET", "testajax.php5?name=" + name, true);
      xmlHttp.onreadystatechange = handleRequestStateChange;
      xmlHttp.send(null);
    }
    catch (e)
    {
      alert("Connexion au serveur impossible :\n" + e.toString());
    }
  }
}

function handleRequestStateChange() 
{
  if (xmlHttp.readyState == 4) 
  {
    if (xmlHttp.status == 200 || xmlHttp.status == 304) 
    {
      try
      {
        handleServerResponse();
      }
      catch(e)
      {
        alert("Erreur de lecture de la réponse : " + e.toString());
      }
    } 
   /* else
    {
      alert("Problème d'obtention des données :\n" + xmlHttp.statusText);
    }
    */ 
  }
}

function handleServerResponse()
{
  var xmlResponse = xmlHttp.responseXML;
  xmlRoot = xmlResponse.documentElement;  
  kinnigArray = xmlRoot.getElementsByTagName("kinnig");
  var html = "";  
  for (var i=0; i<kinnigArray.length; i++)
  {html += '<a onclick="onKlik(this.textContent, 0)">' + kinnigArray.item(i).firstChild.data + '</a>';}
  var xmlResponse = xmlHttp.responseText;
  var myDiv = document.getElementById("goulakaat");
  myDiv.innerHTML = html;
}

et le fichier php concerné :

<?php
header('Content-Type: text/xml ; charset = utf-8');
include ('connect.inc.php');

$dom = new DOMDocument();
$respont = $dom->createElement('respont');
$dom->appendChild($respont);

$name = $_GET['name'];
$kinnigou = mysql_query("SELECT poz FROM ajaks WHERE poz LIKE '".$name."%"."' LIMIT 20");
while ($linenn = mysql_fetch_array($kinnigou))
{
$kinnig = $dom->createElement('kinnig');
$encoded=htmlentities ("$linenn[poz]", ENT_QUOTES, 'ISO-8859-1');
$kinnigText = $dom->createTextNode("$encoded"); 
$kinnig->appendChild($kinnigText);
$respont->appendChild($kinnig);
}

$xmlString = $dom->saveXML();
echo $xmlString;

mysql_close();
?>

J'ai essayé de remplacer ISO par UTF-8 dans cette ligne :

$encoded=htmlentities ("$linenn[poz]", ENT_QUOTES, 'ISO-8859-1');

mais sans succès.

Merci de votre attention,
Kristen
Modifié par kristen (02 Dec 2018 - 08:49)

Bonjour,

A priori, l'erreur indique que xmlResponse est null. Les raisons peuvent être multiples, mais la première à envisager est que la réponse ne soit pas du XML valide.

Il faudrait commencer par faire le test suivant :
1) remplacer var xmlResponse = xmlHttp.responseXML; par var xmlResponse = xmlHttp. responseText; dans la fonction handleServerResponse
2) faire un alert(xmlResponse) juste après pour voir si ça contient quelque chose et à quoi ça ressemble. Après le alert, ça va planter mais c'est normal.

Si ça renvoie quelque chose, alors c'est donc que la réponse existe bien mais n'est pas du XML valide. Sinon, c'est qu'il y a un autre problème côté serveur.

Je note qu'un peu plus loin dans la fonction handleServerResponse, il y a une ligne var xmlResponse = xmlHttp.responseText;. Il faudrait changer le nom de cette variable qui est déjà utilisée plus haut, par exemple en utilisant textResponse au lieu de xmlResponse, puis de changer les lignes qui suivent évidemment pour tenir compte de cette modification.

Amicalement,

PS: et as-tu essayé les modifs de mon post précédent ? ça donne quoi ?
Modifié par parsimonhi (08 Dec 2018 - 14:41)

Merci Parsimonhi, mais j'ai fait les modifs indiquées sans succès (message : xmlRoot not defined). De plus n'oublions que ce code marchait très bien (sauf pour les caractères accentués) avant le changement d'encodage. C'est donc à priori c'est au niveau de l'encodage que ça ne va pas, pas au niveau XML.

Bonjour,

C'est normal que xmlRoot soit undefined si on fait un var xmlResponse = xmlHttp. responseText; (j'ai bien précisé qu'après le alert(), le code allait planter).

La question est : est-ce que ton alert a renvoyé quelque chose ?

Amicalement,

Bonjour,

Remplace la fonction handleRequestStateChange par :

function handleRequestStateChange() 
{
  if (xmlHttp.readyState == 4) 
    if (xmlHttp.status == 200 || xmlHttp.status == 304) 
      alert(xmlHttp.responseText);
}

Et remplace ton fichier php par :

<?php
echo "coucou";
?>

Si ton alert affiche "coucou", alors remet morceau par morceau ce qu'il y a dans le php jusqu'à voir les informations attendues dans l'alert.

Ensuite (et seulement ensuite), tu pourras passer au déboggage du javascript en utilisant le même genre de méthode (en remettant par petit bout le code du javascript).

Si ton alert n'affiche pas "coucou", c'est que le problème est ailleurs (on verra si c'est le cas comment faire pour avancer dans le diagnostic).

Amicalement,

Salut Parsimonhi ( et au passage un grand merci !)

J'ai fait les modifs suggérées et résultat :
1 - le message d'alerte ne s'affiche pas
2 - j'ai toujours la même fenêtre d'erreur qu'auparavant

Nom d'un petit bonhomme ! bouton de rafraîchissement + Maj et j'ai bien mon 'coucou !'... Quand je pense aux heures que j'ai dû perdre à cause de ça...

Bon, du coup, je vais réessayer toutes tes solutions dans l'ordre, mais je devrai attendre ce soir pour ça (esclavage salarial dans la journée..). En tout cas, merci pour la manip, et je ne dois pas être le seul à me faire avoir avec ça.

bon j'ai donc modifié mon code comme tu me le suggérais au début =>

1 - fenêtre d'alerte :
From localhost
<?xml version='1.0'?>
</respont>
Effectivement, c'est peu... L'erreur serait dans le fichier PHP ? Pourtant il fonctionne impec' sur la version en ligne ?!??

2 - suivi du message d'erreur suivant :
From localhost
erreur de lecture de la réponse: TypeError: Cannot read property 'getElementsByTagName' of undefined
Modifié par kristen (04 Dec 2018 - 19:42)

Bon en fait je suis désolé de t'avoir égaré hier soir sur une mauvaise piste : le résultat de l'alerte dépend évidemment de ce qu'on tape et celui que j'ai donné devait provenir d'un vidage du champ de saisie. Le code PHP semble fonctionner parfaitement : après avoir tapé les 4 lettres de abad, xmlResponse vaut :

<?xml version="1.0"?><respont><kinnig>abad</kinnig>abadenn<kinnig>abadennad</kinnig><kinnig>abadenner</kinnig><kinnig>abadiezh</kinnig><kinnig>abadorenn</kinnig></respont>

Mais je dis semble car j'ai comparé les résultats en ligne et en localhost :
en remplaçant

var xmlResponse = xmlHttp.responseXML;

par

var xmlResponse = xmlHttp.responseText;

les deux alert me donnent le même résultat.

mais si je rétablis

var xmlResponse = xmlHttp.responseXML;

mon alerte en ligne m'indique que xmlResponse vaut

[object XMLDocument]

et en local

null

Les guillemets ? euh... ça marchait comme ça !
Le ISO-8859-1, c'est un oubli. Je l'ai remplacé par UTF-8 sans plus de succès.
Modifié par kristen (05 Dec 2018 - 07:21)

Bonjour,

rossi123 a écrit :

oui c vrai .toute utilisation ultérieure de cet objet produira une erreur mais ya une possibilite d'eviter ces erreurs

1) Corriger les erreurs qu'il y a avant
2) Corriger les erreurs qu'il y a avant
3) Corriger les erreurs qu'il y a avant

Sinon, on peut toujours mettre en commentaire les lignes qui font des erreurs par la suite, mais c'est pas ça qui va faire "vraiment" marcher le truc !

On peut aussi inclure des tests dans le code qui en cas d'erreur vont afficher un message dans la page au lieu de faire une erreur produite par le navigateur. Par exemple (au passage, j'ai mis un peu d'ordre dans ton code) :

function handleServerResponse()
{
  var xmlResponse, xmlRoot, kinningArray, html, i, myDiv;
  xmlResponse = xmlHttp.responseXML;
  if (xmlResponse&&xmlResponse.documentElement)
  {
    xmlRoot = xmlResponse.documentElement;  
    kinnigArray = xmlRoot.getElementsByTagName("kinnig");
    html = "";  
    for (i=0; i<kinnigArray.length; i++)
    {
      html += '<a onclick="onKlik(this.textContent, 0)">';
      html += kinnigArray.item(i).firstChild.data + '</a>';
    }
  }
  else
  {
    html = "Erreur ! Le serveur n'a pas envoyé les informations attendues dans un format correct !";
  }
  myDiv = document.getElementById("goulakaat");
  myDiv.innerHTML = html;
}

Amicalement,
Modifié par parsimonhi (08 Dec 2018 - 14:40)

(message à supprimer
Modifié par PapyJP (08 Dec 2018 - 18:55)