[DOM] Interroger en temp réel mysql

**guigui69** · 01/04/2008, 18h51

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

**DoubleU** · 01/04/2008, 21h41

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

**guigui69** · 02/04/2008, 10h06

Merci pour ces exemples.

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

Merci

guigui69

**E.Bzz** · 02/04/2008, 10h13

Bonjour,

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+

**SpaceFrog** · 02/04/2008, 10h14

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

**guigui69** · 02/04/2008, 12h39

Merci

Je vient te commencer a adapter le code pour ma page

Page web

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
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 :

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
 
<?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

**guigui69** · 02/04/2008, 15h40

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

voici mon code:
ajax.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
 
<?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 :

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
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

**E.Bzz** · 02/04/2008, 15h54

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 :

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

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

A+

**KawaJVC** · 02/04/2008, 17h02

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 :

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

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

**E.Bzz** · 02/04/2008, 17h08

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 :

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

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à

En plus détaillé, faut suivre les liens

A+

**guigui69** · 03/04/2008, 08h49

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

**guigui69** · 03/04/2008, 09h02

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

[DOM] Interroger en temp réel mysql

JavaScript

Discussions similaires

Partager

Partager