[DOM] AJAX: le chargement de la page ne s'arrête jamais

**Amallric** · 18/07/2008, 23h07

Bonjour,

J'ai suivi les tutoriels sur AJAX présents sur ce site pour réaliser mon premier script AJAX, tout simple et à peu de choses près semblable à celui que Gaël Donat utilise pour expliquer les bases d'AJAX...mon problème c'est qu'apparamment le script ne se termine jamais. Dès que j'active le script AJAX, un symbole apparait dans le navigateur, celui qui indique normalement que la page est en train de se charger....il ne disparait jamais bien que le script en lui-même(qui va juste chercher des infos dans un fichier XML et les affiche sur la page) ne met que quelques instants à s'exécuter...pourquoi, je ne comprends pas.

Voici mon fichier .js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// JavaScript Document
 
function ajax()
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
    //on affiche le message d'acceuil
    document.getElementById("message").className="tumevois";
    //on appelle le fichier reponse.txt
    xhr.open("GET", "http://amallric.free.fr/trench_warfare/chat_get.php", true);
    xhr.send(null);
 
}
 
function alert_ajax(xhr)
{ if (xhr.readyState==4) {
      var docXML = xhr.responseXML ;
      var auteurs = docXML.getElementsByTagName("auteur") ;
      var contenus = docXML.getElementsByTagName("contenu") ;
      document.getElementById("message").className="tumevoispas";
      for(i=0;i<auteurs.length;i++) {
        document.write(auteurs.item(i).firstChild.data) ;
        document.write(":") ;
        document.write(contenus.item(i).firstChild.data) ;
        if (i!=auteurs.length) {
          document.write("<br>") ;
          }
      }
   }   
}

et mon fichier HTML, encore plus classique:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
  <head>
    <title>
    Chat
    </title>
    <style>
    .tumevoispas
        {
          visibility: hidden;
        }
 
    .tumevois
        {
          visibility: visible;
          font-size : 200%; 
          background-color: #DAEDFC;
          width: 300px;
          height: 40px;
        }
    </style>
  </head>
  <body>
    <script type="text/javascript" src="ajax.js"></script>
    <?php
    echo "hello world" ;
    ?>
    <p>
      <a href="javascript:ajax();">Cliquez ici</a>
    <p>
    <div class="tumevoispas" id="message">Veuillez patienter...</div>
  </body>
</html>

Voilà, pourriez vous m'indiquer l'origine du problème?

PS: ça n'a rien à voir mais pourriez vous également m'expliquer comment *envoyer* des données avec AJAX, pour par exemple par la suite les traiter par un script PHP et les insérer dans une base de données? Si c'est avec xhr.send, comment récupère-t-on les données dans PHP par la suite? Merci.

**Bovino** · 19/07/2008, 08h17

1) Tu ferais mieux de passer par les styles que par les classes pour afficher/masquer ta div.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 <style type="text/css">
    #message
        {
          display: none;
        }
    </style>
    <script type="text/javascript" src="ajax.js"></script>
  </head>
  <body>

attention aussi aux types et il est préférable de mettre le script dans le head.
Coté js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function ajax()
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
    //on affiche le message d'acceuil
    document.getElementById("message").style.display="block";
    //on appelle le fichier reponse.txt
    xhr.open("GET", "http://amallric.free.fr/trench_warfare/chat_get.php", true);
    xhr.send(null);
 
}
 
function alert_ajax(xhr)
{ if (xhr.readyState==4) {
      var docXML = xhr.responseXML ;
      var auteurs = docXML.getElementsByTagName("auteur") ;
      var contenus = docXML.getElementsByTagName("contenu") ;
      document.getElementById("message").style.display="";
      for(i=0;i<auteurs.length;i++) {
        document.write(auteurs.item(i).firstChild.data) ;
        document.write(":") ;
        document.write(contenus.item(i).firstChild.data) ;
        if (i!=auteurs.length) {
          document.write("<br>") ;
          }
      }
   }   
}

Ensuite, pour passer des arguments, deux méthodes :
-> En GET, comme tu fais actuellement, par l'URL (fichier.php?arg1=val1&arg2=val2 ...) que tu récupères en php avec $_GET['arg1'] etc
-> En POST, en mettant dans le send les couples arg=val
ex : send(arg1=val1&arg2=val2...);
tu récupères le tout en php avec le tableau $_POST[]

**Amallric** · 19/07/2008, 12h11

Merci pour ces précisions. J'ai fait les changements requis. Toutefois:

-d'une part j'ai toujours le problème du chargement de la page qui ne se finit jamais

-d'autre part quand je passe la méthode de GET à POST plus rien ne marche, aucun effet ne se produit lorsque je clique sur le lien...vous pourriez me donner un exemple simple d'AJAX avec POST pour envoyer une variable quelconque pouvant être récupérée par PHP?

Merci.

Invité · 19/07/2008, 15h46

Bonjour,

Il semblerait que ce soit tes "document.write" la cause de ton pb.

J'ai fait une autre façon via le DOM

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head>
	<title>Exemple 3</title>
</head>
<body>
 
<script type="text/javascript" src="ajax3.js"></script>
 
<p>
<a href="javascript:ajax();">Cliquez-moi toujours !</a>
</p>
<p id="reponse"></p>
 
 
</body>
</html>

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function ajax() {
    var xhr=null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
    //on appelle le fichier reponse.txt
    xhr.open("GET", "data.php", true);
    xhr.send(null);
}
 
function alert_ajax(xhr) {
  if (xhr.readyState == 4) {
      var docXML = xhr.responseXML;
      var txtreponse = "";
      var auteurs = docXML.getElementsByTagName("auteur") ;
      var contenus = docXML.getElementsByTagName("contenu") ;
    	//on fait juste une boucle sur chaque élément "auteur" trouvé
    	for (i = 0; i < auteurs.length; i++) {
    	  txtreponse = auteurs.item(i).firstChild.data + " => " + contenus.item(i).firstChild.data;
    	  document.getElementById("reponse").appendChild( document.createTextNode( txtreponse ) );
    	  document.getElementById("reponse").appendChild( document.createElement("br") );
    	}
  }
}

PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
header('Content-Type: text/xml');
echo  '<exemple>'
  .'<message>'
    .'<auteur>Amallric</auteur>'
    .'<contenu>boroch</contenu>'
  .'</message>'
  .'<message>'
    .'<auteur>Taan</auteur>'
    .'<contenu>doh</contenu>'
  .'</message>'
  .'<message>'
    .'<auteur></auteur>'
    .'<contenu></contenu>'
  .'</message>'
.'</exemple>';
?>

Cependant via l'adresse que tu as mis dans ton exemple, cela me ressort une erreur

Erreur de sécurité*: le contenu situé à http://localhost/test_devcom/ajax/rep_1/ ne peut pas charger de données à partir de http://amallric.free.fr/trench_warfare/chat_get.php.

Cela vient peut-être du fait que je sois en local avec des réglages non compatibles...

A+

**Bovino** · 19/07/2008, 15h49

Il s'agit de la "same origin policy"... Tu ne peux pas traiter de scripts en cross domain.

Invité · 19/07/2008, 15h51

Bonjour Bovino,

Effectivement, j'ai vu des infos sur le cross dommaine avec XHR il y peu de temps.

A+

**Bovino** · 19/07/2008, 15h56

Envoyé par Amallric

vous pourriez me donner un exemple simple d'AJAX avec POST pour envoyer une variable quelconque pouvant être récupérée par PHP?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

send("variable=valeur");

Désolé, j'avais oublié de préciser qu'il s'agit d'une chaine...
En php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$variable = $_POST['variable']

[DOM] AJAX: le chargement de la page ne s'arrête jamais

JavaScript

Vue hybride

Discussions similaires

Partager

Partager