[DOM] Interroger en temp réel mysql

Version imprimable

01/04/2008, 18h51
guigui69

[DOM] Interroger en temp réel mysql

Bonjour à tous,

Je voudrait savoir si c'est possible en temps réel d'interroger ma base mysql et d'afficher les informations récolter sur ma page web.

En fait la personne arrive sur la page web et rentre le code client et je voudrait qu'en javascript il interroge ma base (mysql)en temps réel et récupérer les informations et les affiches dans ma page web (nom prénom numéros etc...).

Je recherche un exemple un tuto pour m'aiguiller sur la bonne voix.

Merci d'avance

guigui69
01/04/2008, 21h41
DoubleU

C'est tout à fait possible et on appelle ca l'Ajax ^^

Ya pas mal de tutoriels sur le site que tu peux consulter pour commencer, par exemple celui la ou celui la
02/04/2008, 10h06
guigui69

Merci pour ces exemples.

est quelqu'un aurait deja réaliser ceci et me donner une piste.

Merci

guigui69
02/04/2008, 10h13
E.Bzz

Bonjour,

Citation:

Envoyé par guigui69

Merci pour ces exemples.

est quelqu'un aurait deja réaliser ceci et me donner une piste.

DoubleU vient de t'en donner 2.

Y a qu'à suivre les liens ;)

A+
02/04/2008, 10h14
SpaceFrog

le tuto de siddh est très abordable ...

en plus ce que tu cherches à faire est moins complexe.

il te suffit d'ouvrir une insatnce d'axaj et de la faire pointer sur une page php qui fera la requete.
cette page de traitement est indentique à une page de traitement de formulaire
il suffit juste qu'elle retourne le resultat de la requete sous forme de texte
voire utiliser un séparateur dans le texte si tu veux ensuite splitter les infos en javascript ...
Coté javascript tu récupères le responseText..
que tu splitte ou non ... et ensuite tu affiches les infos dasn un value ou un innerHMLT ....

Voilà c'est tout

Merci

Je vient te commencer a adapter le code pour ma page

Page web

Code:

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
55
56
57
58
59
60
61
62
 
<html>
	<head>
		<title></title>
		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('information').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				idauteur = document.getElementById('code_client').value;
				xhr.send(idauteur);
			}
		</script>
	</head>
	<body>
<input type="text" name="code_client" id="code_client" value="" maxlength="11" onKeyUp=go()></td>
 
 
<div id='information' style='display:inline'>
ICI la réponse:
</div>
<?php
print_r($_POST)
?>
	</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<?php
        
        if(isset($_POST["idauteur"])){
                mysql_connect("localhost","root","*****");
                mysql_select_db("qualite");
                $res = mysql_query("SELECT nom_client, tel_client, fax_client, contact_client FROM client WHERE code_client=".$_POST["idauteur"]." ORDER BY nom_client");
                while($row = mysql_fetch_assoc($res)){
                ?>
		ENCORE UN TEST
<input type="text" name="nom_client" id="nom_client" value="<?echo $row["nom_client"];?>" maxlength="32"></td>
<input type="text" name="contact_client" id= "contact_client"value="<?echo $row["contact_client"];?>" maxlength="32"></td>
<input type="text" name="tel_client" id ="tel_client"value="<?echo $row["tel_client"];?>" maxlength="32"></td>
<input type="text" name="fax_client" id="fax_client" value="<?echo $row["faxs_client"];?>" maxlength="32"></td>
				<?php
                                }
        }
 
?>

Pourriez vous me dire si j'ai compris: (#1#)

La personne tape le code client en question dans le champ input, après avoir taper le code ça appelle la fonction go(). En premier il regarde si notre navigateur est compatible si oui il configurer ,puis

xhr.onreadystatechange... Je n'ai pas compris?? si quelqu'un pourrait m'éclairer?

après on stocks les réponses dans un format text si toutes les données sont envoyées et que le serveur est ok.... Et après on insérer les données stocker dans la page web dans l'ID "information"

On ouvre la connexion avec le serveur , avec la méthode "post", la page.
On assigne un header pour que le serveur l'interprète correctement.
Et en dernier on récupérer la valeur du code client qu'on rentre dans idauteur et on l'envoie avec xlr.send(idauteur)

Que me manque-t-il- pour que mes champs s'affiche avec les informations de ma base?

Car actuellement quand je tape le numéros d'un client les champs n'apparaissent pas ( par contre le "ICI la réponse" disparait).

Quel sont mes erreurs?
Pourrait-on mettre un certain temps (une pause) avant d'aller d'effectuer la fonction?

Merci d'avance pour votre aide

guigui69

Je pense avoir trouver mon erreur, mais j'ai encore quelque question :)

voici mon code:
ajax.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?php
        
        if(isset($_POST["idauteur"])){
                mysql_connect("localhost","root","*******");
                mysql_select_db("qualite");
                $test= $_POST["idauteur"];
                $res = mysql_query("SELECT nom_client, tel_client, fax_client, contact_client FROM client WHERE code_client='$test' ORDER BY nom_client");
                while($row = mysql_fetch_assoc($res)){
                ?>
		<br>
		ENCORE UN TEST
<input type="text" name="nom_client" id="nom_client" value="<?echo $row["nom_client"];?>" maxlength="32"></td>
<input type="text" name="contact_client" id= "contact_client"value="<?echo $row["contact_client"];?>" maxlength="32"></td>
<input type="text" name="tel_client" id ="tel_client"value="<?echo $row["tel_client"];?>" maxlength="32"></td>
<input type="text" name="fax_client" id="fax_client" value="<?echo $row["faxs_client"];?>" maxlength="32"></td>
<br>			
			<?php
                                }
        }
 
?>

mapage.php

Code:

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
55
56
57
58
59
60
61
62
63
64
 
<html>
	<head>
		<title></title>
		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('information').innerHTML = leselect;
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				idauteur = document.getElementById('code_client').value;
				alert(idauteur);
				xhr.send("idauteur="+idauteur);
			}
		</script>
	</head>
	<body>
<input type="text" name="code_client" id="code_client" value="" maxlength="11" onKeyUp="go()"></td>
 
 
<div id='information' style='display:inline'>
ICI la réponse:
</div>
<?php
print_r($_POST)
?>
	</body>
</html>

Pour moi sa a l'air de marcher, mais pourriez-vous regarder mon code pour voir si il y a des erreurs a eviter.

J'ai remarquer aussi qu'il envoie 2 requêtes POST, je pense c'est le fait que j'ai mis onkeyup. Peut-on mettre en place une pause de 1 ou 2 secondes (pour être sur que la personne a taper est taper le code client entier)?

Merci d'avance

guigui69

02/04/2008, 15h54
E.Bzz
Citation:

Envoyé par guigui69

J'ai remarquer aussi qu'il envoie 2 requêtes POST, je pense c'est le fait que j'ai mis onkeyup. Peut-on mettre en place une pause de 1 ou 2 secondes (pour être sur que la personne a taper est taper le code client entier)?

Mieux vaudrait dans ce cas déclencher ton appel sur onchange (ou onkeyup mais en testant qu'un nombre minimum de caractères soient présents).

Sinon, pour modifier un select via Ajax, mieux vaut utiliser le DOM.
Un exemple
Ou
Code:

1 2 3 var objListe=document.getElementById('id_liste'); Ajout = new Option("text", "value"); objListe.options[objListe.length]=Ajout;
A+

Bon , pas mal de gens l'ont dit au dessus , il faut que tu utilises l'ajax.

Je te donne un code d'exemple qui marche seulement sous firefox pour recupérer le contenu d'une des pages de ton site (seulement ton site , si tu fais ca vers une autre page d'un autre site cela ne marchera pas ) et l'afficher sur ta page , tout en "temp réel".
Code:

1 2 3 4 5 6 7 8 9 10 11 12 var req = new XMLHttpRequest; //création de la requête var url = "mapage.php"; // on paramètre la variable de l url req.open("GET",url,true); //get : méthode utilisée , true : requête asynchrome ou pas req.onreadystatechange = function () { document.getElementById('monid').innerHTML = req.reponseText } // on fait que quand le ready state change (4 est quand la requête est finie et réussie) , on réalise une fonction qui change l'innerhtml de monid par le contenu HTML de la page affichée lors de la requête GET req.send(null); // ce qu'on envoie a la page , si on utilise la méthode get on met null , si la méthode est post on met les données sous forme de : "data1=lala&data2=lolol&data3=lili"
voilà :) j'ai mis des commentaires pour bien expliquer clairement

Citation:
Envoyé par KawaJVC
Bon , pas mal de gens l'ont dit au dessus , il faut que tu utilises l'ajax.

Je te donne un code d'exemple qui marche seulement sous firefox pour recupérer le contenu d'une des pages de ton site (seulement ton site , si tu fais ca vers une autre page d'un autre site cela ne marchera pas ) et l'afficher sur ta page , tout en "temp réel".
Code:

1 2 3 4 5 6 7 8 9 10 11 12 var req = new XMLHttpRequest; //création de la requête var url = "mapage.php"; // on paramètre la variable de l url req.open("GET",url,true); //get : méthode utilisée , true : requête asynchrome ou pas req.onreadystatechange = function () { document.getElementById('monid').innerHTML = req.reponseText } // on fait que quand le ready state change (4 est quand la requête est finie et réussie) , on réalise une fonction qui change l'innerhtml de monid par le contenu HTML de la page affichée lors de la requête GET req.send(null); // ce qu'on envoie a la page , si on utilise la méthode get on met null , si la méthode est post on met les données sous forme de : "data1=lala&data2=lolol&data3=lili"
voilà :) j'ai mis des commentaires pour bien expliquer clairement
Ca on avait déjà :mrgreen:
En plus détaillé, faut suivre les liens ;)

A+

03/04/2008, 08h49
guigui69

Merci pour vos réponses.

Le code que j'ai rajouté plus haut n'est pas de l'ajax??

(Le site doit marcher sous internet explorer ou firefox).

guigui69
03/04/2008, 09h02
guigui69

Pour l'envoie de la fonction, les personnes peuvent avoir comme code 1 ou 123456 donc je peut pas faire en fonction du caractère.

Est-il possible de faire appel a la fonction au bout de x secondes?

Ou bien en fonction du dernier caractère? ( elle tape le dernier caractère si une seconde après elle na pas rentré de nouveau caractère cela signifie que c'est le code définitif)

Merci d'avance

guigui69