Discussion :

[Niki59]

Bonjour,

Je me suis directement inspiré de la documentation suivante pour faire mes essais (mais sans aucun succès).
http://gael-donat.developpez.com/web/intro-ajax/

J'ai de une lourde requête SQL à effectuer, et pour rendre cela plus agréable j'ai décidé de m'aider de l'Ajax.

En effet,
- L'utilisateur clique sur le mot 'Calculer' et un bloc div apparait alors avec le message 'Veuillez patienter'.
-Une fois la requête SQL terminé le bloc div affiche le résultat.

Voici ce que j'ai fait :
Page index.php : (sans les header, body & co)

Code :

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

1
2
3
<div class="tumevoispas" id="message">Veuillez patienter...</div>
<a href="javascript:ajax();">Calculer</a>
<script type="text/javascript" src="js/ajax.js"></script>

Fichier ajax.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
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() { show_ajax(xhr); };
 
    //on affiche le message d'acceuil
    document.getElementById("message").className="tumevois";
 
    //on appelle le fichier reponse.txt
    xhr.open("GET", "http://pipeul.com/betaEmailing/Nico/frequence1.php", true);
    xhr.send(null);
}
 
function show_ajax(xhr)
{
    if (xhr.readyState==4) 
    {
    	var docXML= xhr.responseXML;
    	var items = document.getElementsByTagName("donnee")
    	document.getElementById("message").className="tumevoispas";
		document.innerHTML=items;
    }
}

Fichier reponse.php

Code :

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

1
2
3
/* Connexion BDD et ma requête SQL*/
$resultat = $data[0];
echo '<DIV id="donnee">'.$resultat.'</DIV>';

Quand je clique sur 'Calculer', la bloc 'Veuillez patienter' apparait bien mais le résultat ne vient point.

Merci de votre aide, ca doit être tout bête.

[andry.aime]

Salut,
ça se joue sur l'etat du readyState (relire le tutoriel)

* 0 non initialisée
* 1 en chargement
* 2 chargée
* 3 en cours de traitement
* 4 terminée

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function show_ajax(xhr)
{
if (xhr.readyState!=4) 
    {
	document.innerHTML="Veuillez patienter";
    }    
if (xhr.readyState==4) 
    {
    	var docXML= xhr.responseXML;
    	var items = document.getElementsByTagName("donnee")
    	document.getElementById("message").className="tumevoispas";
		document.innerHTML=items;
    }
}

[Niki59]

Salut andry.aime

Merci pour la petite précision, maleuresement le résultat n'apparait toujours pas.
Quand je clique sur calculer le div passe bien avec la classe 'tu me vois pas' (donc disparait) mais le div avec l'id "donnee" n'apparait pas.

Je pense personnellement que c'est un soucis au moment d'inserer mon bloc div "donnee", peut etre qu'il y a une erreur à ce niveau

Code :

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

1
2
3
4
    	var docXML= xhr.responseXML;
    	var items = document.getElementsByTagName("donnee")
    	document.getElementById("message").className="tumevoispas";
	document.innerHTML=items;

merci.

[RomainVALERI]

Code :

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

1
2
3
// ...
var items = document.getElementsByTagName("donnee")
// ...

Bizarre, ça ^^

Tu as des balises <donnee></donnee> dans ta page ? (je dis bien dans la page, pas dans la réponse XML)

Tu ne te serais pas emmelé les pinceaux avec document.getElementById ?

[andry.aime]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function show_ajax(xhr)
{
if (xhr.readyState!=4) 
    {
	document.getElementById('donnee').innerHTML="Veuillez patienter";
    }    
if (xhr.readyState==4) 
    {
    	var items = xhr.responseText;
    	document.getElementById("message").className="tumevoispas";
	document.getElementById('donnee').innerHTML=items;
    }
}

[Niki59]

Exact! Merci pour votre aide!