[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']

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

Envoyé par jlmag

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

Bonjour,
ce n'est pas uniquement lié à xhr, c'est une règle de sécurité javascript : tu ne peux pas récupérer de données hors du domaine où a été chargé ton script.

**Bovino** · 19/07/2008, 16h06

Grrr... j'avais pas vu ça :

Code :

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

document.write(auteurs.item(i).firstChild.data) ;

et la suite !
Attention, selon la manière dont ton xml est formé (en gros, sauf si tu le crées sans espaces ni retour à la ligne !), firstChild est différent selon que tu es sous IE ou FF.
De plus, comme le dit souvent un grand connaisseur de javascript :
document.write

**Amallric** · 19/07/2008, 16h12

Ok en tout cas la solution donnée par jlmag résoud mon premier problème, merci!

Maintenant 2 questions:

-comment faire pour que le code fonctionne de la même manière sous IE et Firefox(je viens de tester et il n'ya pas de problème dans mon cas précis mais si vous avez des astuces à ce sujet je suis preneur quand même

)

-pourquoi document.write est mauvais?

Merci!

**Bovino** · 19/07/2008, 16h21

Pour les noeuds, il suffit de vérifier si le firstChild (ou le previousSibling par exemple) est un retour chariot :

Code :

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

if(element.firstChild.nodeValue == '\n')

Pour le document.write, c'est plus une question de séparation des couches : (x)html pour le contenu, css pour la mise en forme, js pour le comportement. Si l'on prend en compte que toutes les précautions ont été prises pour que le résultat soit 'bien formé' au sens html...

Invité · 19/07/2008, 16h22

En ajout à Amallric,

Si on termine le

Code :

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

document.write()

par un

Code :

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

document.close()

C'est ok?

**Amallric** · 19/07/2008, 17h49

Bon le problème du chargement est résolu, par contre je n'arrive toujours pas à envoyer des données...

Apparamment ça vient de mon fichier javascript, voici sa version actuelle:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// JavaScript Document
var reqtype = 0 ;
function sendajax() {
var reqtype = 1 ;
ajax() ;
}
 
function ajax()
{
    var reqtype = 0 ;
    var xhr=null;
    var test_auteur="" ;
    var test_contenu="" ;
 
    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 contenant les infos(2 possiblités en fonction du type de requête souhaité: juste chercher les infos ou en envoyer)
    if (reqtype!=0) {
        xhr.open("POST", "http://amallric.free.fr/trench_warfare/chat_get.php", true);
        //ligne nécessaire pour que les informations envoyées par POST soient traitées
        httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send("test_auteur=amallric&test_contenu=graoroch");
 
} else { 
        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++) {
        txtreponse = auteurs.item(i).firstChild.data + " => " + contenus.item(i).firstChild.data;
    	  document.getElementById("reponse").appendChild( document.createTextNode( txtreponse ) );
        if (i!=auteurs.length) {
          document.getElementById("reponse").appendChild( document.createElement("br") );
          }
      }
   }   
}

Je voulais qu'il y ait 2 fonctions: ajax() pour simplement chercher les infos sur le serveur et les charger, sendajax() pour faire la même chose et en plus, envoyer des informations supplémentaires. Seulement voilà avec le "if" que j'ai codé, que je déclenche ajax() ou sendajax() aucune information n'est envoyée, je reçois seulement les informations qui sont déjà contenues dans le fichier(apparamment c'est la requête qui n'envoie rien qui s'éxécute à chaque fois)...et si je retire la condition en laissant seulement la requête POST(càd celle qui est sensée envoyer les infos), j'obtiens juste le message "Veuillez patienter"...

Le fichier cible c'est ça, un simple fichier 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
18
19
20
21
22
23
24
25
26
27
28
29
<?php
header('Content-Type: text/xml'); 
echo "<exemple>\n";
 
 
$test_auteur = $_POST['test_auteur'] ;
$test_contenu = $_POST['test_contenu'] ;
 
$dbid = mysql_connect($base,$dbuser,$dbpass) ;
mysql_select_db("amallric",$dbid) ;
 
$query = "SELECT * FROM chat" ;
$result = mysql_query($query,$dbid) or die(mysql_error($dbid)) ;
sleep(5) ;
 
while ($row = mysql_fetch_array($result)) {
  echo "<message>\n" ;
  echo "<auteur>".$row[1]."</auteur>\n" ;
  echo "<contenu>".$row[2]."</contenu>\n" ;
  echo "</message>\n" ;
}
 
echo "<message>\n" ;
echo "<auteur>".$test_auteur."</auteur>\n" ;
echo "<contenu>".$test_contenu."</contenu>\n" ;
echo "</message>" ;
 
echo "</exemple>\n" ;
?>

Voilà, merci d'avance si vous pouvez m'indiquer mes erreurs.

**Bovino** · 19/07/2008, 18h06

Code :

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

1
2
3
4
5
function ajax()
{
    var reqtype = 0 ;
...
xhr.open("GET", "http://amallric.free.fr/trench_warfare/chat_get.php", true);

Effectivement, je te confirmes qu'aucune variable n'est transmise !

Code :

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

xhr.open("GET", "http://amallric.free.fr/trench_warfare/chat_get.php?test_auteur=amallric&test_contenu=graoroch", true);

et en php

Code :

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

1
2
<?php
$test = $_GET['test_auteur'] ;

**Amallric** · 19/07/2008, 18h38

Mais c'est le but! J'ai deux requêtes, la première avec GET sert juste à recevoir les informations, l'autre avec POST doit en théorie envoyer des variables...or le problème c'est qu'elle n'a pas l'air de marcher...

**Bovino** · 19/07/2008, 18h45

Mais dans le code que tu donnes, reqtype est toujours à 0 puisque c'est la 1re instruction de ta fonction ajax() (et je ne te parles pas du fait que var reqtype est déclaré en global et en local, c'est pas top) donc ton post n'est jamais exécuté.
Cependant tu peux aussi envoyer les variables avec get via l'url et send(null).

**Amallric** · 19/07/2008, 18h59

Merci, en effet je n'avais pas remarqué ce problème, c'est corrigé. Néanmoins quand je lance sendajax(pour la requête en POST donc) ça m'affiche juste Veuillez patienter et rien d'autre...Il y a bien un problème quelque part avec la requête POST, non?

EDIT: j'ai fait comme tu m'as dit avec GET et ça marche mais pq pas avec POST je comprends pas.

Invité · 19/07/2008, 22h42

Amallric,

Dans ton script JS, je pense que ta méthode (ou logique) est lourde.
Je me serais plutôt concentrer sur une méthode "POST" en y ajoutant une variable.

Exemple:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// données à transmettre si nécessaire
data2send = "test_auteur=amallric&test_contenu=graoroch";
reqtype = 1; //ou 0
 
// une seulement gestion de méthode pour XHR, ça simplifie les casses-têtes
xhr.open("POST", "http://amallric.free.fr/trench_warfare/chat_get.php", true);
//ligne nécessaire pour que les informations envoyées par POST soient traitées
/*
httpRequest n'héxiste pas il me semble
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr oui
*/
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send("reqtype=" + ((reqtype == 0) ? "0" : ("1&" + data2send)));

Edit: je viens de voir une chose étrange, je corrige le code ci-dessus

Donc chat_get.php recevra:

Pas d'info particulières à traiter:

Code :

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

adr_http?reqtype=0

Des info particulières à traiter:

Code :

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

adr_http?reqtype=1&test_auteur=amallric&test_contenu=graoroch

Ainsi côté PHP que du "$_POST" à traiter. Enfin, c'est ma façon de voir les choses

A+

PS: Préfère l'adressage relatif ( "./chat_get.php" ) plutôt que de l'absolu ( "http://amallric.free.fr/trench_warfare/chat_get.php" )

**Amallric** · 20/07/2008, 11h05

Je voulais surtout tester les deux méthodes c'est pour ça que j'ai mis les deux. Ta façon de faire est bien meilleure, merci beaucoup.

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

JavaScript

Discussions similaires

Partager

Partager