Version anglaiseVersion espagnoleVersion françaiseInscrivez-vous, c'est gratuit ! (mot de passe oublié)
- Mardi 18 novembre 2008 - 21:41:48
- inscrits : 1065323
- connectés : 65860
- questions/jour : 5071
- Taux de réponse : 74.47%
Plateformes d'assistanceDiscussions & Opinions des Communautés
|
|
|
|
Bonjour,
Je débute avec AJAX, et j'aimerais faire la chose suivante:
- récupérer des données dans une base lorsqu'on clique sur un lien.
- afficher ces données sur le navigateur.
J'ai créé deux fichiers:
- ajax.html qui affiche le lien à cliquer et lance la requête.
- sql.php qui récupère les données dans la base et les affiche.
Malheureusement ça ne marche pas, je reste bloquée au readyState=1...
Je sais qu'il manque des lignes pour le cas ou navigateur=IE, mais ça sera pour plus tard.
Si quelqu'un peut m'éclairer? Merci d'avance!
ajax.html:
sql.php:
Je débute avec AJAX, et j'aimerais faire la chose suivante:
- récupérer des données dans une base lorsqu'on clique sur un lien.
- afficher ces données sur le navigateur.
J'ai créé deux fichiers:
- ajax.html qui affiche le lien à cliquer et lance la requête.
- sql.php qui récupère les données dans la base et les affiche.
Malheureusement ça ne marche pas, je reste bloquée au readyState=1...
Je sais qu'il manque des lignes pour le cas ou navigateur=IE, mais ça sera pour plus tard.
Si quelqu'un peut m'éclairer? Merci d'avance!
ajax.html:
<html>
<head>
<title>My first XMLHttpRequest</title>
<script language="JavaScript">
function ajax() {
req = new XMLHttpRequest();
req.onreadystatechange = testRep;
req.open("GET", "sql.php", true);
req.send(null);
}
function testRep() {
if (req.readyState == 0) {
document.write("0");
}
if (req.readyState == 1) {
document.write("1");
}
if (req.readyState == 2) {
document.write("2");
}
if (req.readyState == 3) {
document.write("3");
}
if (req.readyState == 4) {
if (req.status ==200) {
document.write (req.responseText);
}
else {
alert("Problem: " + req.statusText);
}
}
}
</script>
</head>
<body>
<a href="javascript:ajax();">Click me</a>
</body>
</html>
sql.php:
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("test");
$reponse = mysql_query("SELECT * FROM membres WHERE id='2'");
$donnees = mysql_fetch_array($reponse);
echo "<script language='JavaScript'>document.write ('".$donnees['nom']."');</script>";
mysql_close();
?>Configuration: Windows XP Firefox 2.0.0.12
|
Salut! essaye en mettant false dans le open, si tu mets à true le traitement est asynchrone et la réponse n'a pas le temps d'être envoyée. Dans ton cas il faut que tu attendes la réponse de ta requête.
|
|
Bonjour,
Remplace tes fonctions par ceci (même chose, mais en définissant la 2e à l'intérieur de la première, ce qui confère une portée plus grande à req). <script language="JavaScript">
function ajax()
{
req = new XMLHttpRequest();
req.onreadystatechange = testRep;
req.open("GET", "sql.php", false);
req.send(null);
function testRep()
{
if (req.readyState == 0)
{
document.write("0");
}
if (req.readyState == 1)
{
document.write("1");
}
if (req.readyState == 2)
{
document.write("2");
}
if (req.readyState == 3)
{
document.write("3");
}
if (req.readyState == 4)
{
if (req.status ==200)
{
document.write (req.responseText);
}
else
{
alert("Problem: " + req.statusText);
}
}
}
}
</script>
|
|
C'est bien d'avoir vu par toi même comment faire.
Cela dit, et ça reste une appréciation personnelle ;), je trouve que ton code n'est pas très "propre". Définir la variable en global n'est pas terrible du fait que ça ne sert à rien (mise à part faire fonctionner ton script). Cela montre bien que ton code n'est pas "sympathiquement" écrit (le terme est un peu pourri je sais) J'ai dit variable globale pour te sauver, mais je te conseille plutôt de faire un mixte des deux fonctions en une. Reivax t'as montré la voix (bien qu'il ai fait une faute de recopie qui ne permet pas au code de fonctionner) Enfin bref, voilà le code de la fonction ajax que Reivax proposait :
function ajax() {
req = new XMLHttpRequest();
req.onreadystatechange = function ( ){
if (req.readyState == 4) {
if (req.status == 200) {
document.open(); //ceci ouvre un nouveau flux qui va permettre l'exécution des commandes qui suivent (ici document.write) s'exécute simultanément
document.write (req.responseText); // responseText contient la chaîne de caractères du tableau $donnees (dans le script php)
document.close(); // ceci ferme le flux et lance l'exécutions des commandes qui precèdent
}
else {
alert("Problem: " + req.statusText);
}
}
}
req.open("GET", "sql.php", true);
req.send(null);
}
Si tu veux par la suite automatiser ce procédé je te conseille de faire une fonction "type" qui appelle un script PHP en lui fournissant des paramètres. En voilà une que j'utilise régulièrement dans mes sites :
function callScript ( scriptName, args ){
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
xhr_object.open("POST", scriptName, true);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4) {
//alert(xhr_object.responseText); // DEBUG MODE
//document.write(xhr_object.responseText);
eval(xhr_object.responseText);
}
//alert(xhr_object.readyState);
return xhr_object.readyState;
}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr_object.send(args);
}
Exemple d'utilisation :
callScript("toto.php","id=2&mdp=blabla");
Ensuite l'intérêt principal de l'appel de tel script PHP depuis le javascript, c'est d'écrire dynamiquement sur ta page en fonction du code du script PHP appellé. Par exemple si tu ajoute la DIV suivante dans le body de ta page HTML 'ajax.html' : <body> <a href="javascript:ajax();">Click me to see the text</a> <div id="maDiv"></div> </body> Et puis dans ton script PHP modifier quelque peu comme ceci :
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("test");
$reponse = mysql_query("SELECT * FROM membres WHERE id='2'");
$donnees = mysql_fetch_array($reponse);
echo "var div = document.getElementById('maDiv');";
echo "div.innerHTML = ".$donnees['nom'].";"; // écrit le nom dans la div et l'affiche donc dynamiquement sans rafraichir la page
mysql_close();
?>
~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~
|
|
Questions auxquelles je répondrais après ma pause miam :)
A cet après midi. ~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~ |
|
Re,
Concernant tes questions : - à quoi ça sert de dire var req = null; est-ce qu'on peut pas mettre juste var req; ? -> Puisque tu as garder tes deux fonctions séparées et que dans chacune d'entre elles tu utilise la même variable (initialisée dans la première fonction, et utilisée dans la seconde), il faut que tu déclare ta variable en dehors de des deux fonctions (globalement donc) de manière à ce que cette variable soit visible depuis ces fonctions. Il faut savoir que lorsque tu déclare une variable, cette variable n'est visible que dans le bloc d'instruction où tu l'as déclare (et les blocs "fils"). Par exemple, si tu déclare une variable à l'intérieur d'un IF, elle ne sera pas visible à l'extérieur de ce IF (ainsi que dans toutes les instructions comprises dans ce IF : cf. succession de if inbriqués par exemple). Dans ton cas, lorsque tu déclare ta variable dans la première fonction, cette variable est visible dans ta première fonction, du coup lorsque tu y fais appel dans ta seconde fonction, comme elle n'est plus visible, une erreur est lançée, ce qui fait échoué le script. - à quoi sert le "return" après l'alerte "votre navigateur n'accepte pas..."? L'instruction return ici permet de "quitter" la fonction au lieu de continuer à faire les instructions. L'utilisation des objets XMLHttpRequest n'était au début disponible que sur certain navigateur (aujourd'hui je ne sais pas ce qu'il en est mais je pense que la majeur partie intègre la gestion de ces objets). Si le navigateur ne prends pas en compte leur utilisation, il est indispensable d'avertir l'utilisateur et de ne pas faire la suite des scripts (auquel cas de toute manière ça ne fonctionnera pas). C'est pour cela que je fais un return si le test n'est pas validé. Une autre façon de géré ce cas d'erreur serait de faire un IF ( ... ) { } ELSE { les autres instructions du script } sans mettre de return dans le bloc validé du IF. - quelle est la différence entre POST et GET? est ce que c'est juste la façon dont sont envoyées les variables? (dans l'url ou pas)? GET permet de passer des variables via l'url de manière visible. Donc les variables et leur valeurs sont visible dans la barre d'adresse, ce qui n'est pas top du tout. POST fais la même chose mais en cachant ces variables et leur valeur. A préconiser donc. Il faudrait donc que tu remplace GET par POST ici : req.open("GET", "sql.php", true);
Et que tu reprenne tes valeurs dans le script PHP via $_POST et non plus $_GET - à quoi sert le eval(xhr_object.responseText); -> eval permet d'évaluer une chaine de caractère comme étant du code. Conclusion, si dans ton script PHP au lieu d'afficher : echo "blabla"; tu affiche : echo "alert('blabla');"; Lors du retour du script, la partie en gars va être interprétée par l'instruction eval, et donc ton code sera exécuté. Je te conseille donc d'utiliser de cette manière le retour de ton script PHP, ainsi tu peux modifier dynamiquement tout élément de ta page sans rafraichir cette dernière. et le xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); -> Juste une formalité. ~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~ |
|
Merci énormément pour toutes ces précisions kij ! Je commence à y voir plus clair.
Bon je continue à réfléchir sur mon problème de variable qui ne se transmet pas au script php, mais si quelqu'un voit où ça pêche je suis preneuse! mille merci Quelques bases en javascript, débute en php/mySQL J'essaie de mettre en ligne mon arbre généalogique.
|
|
Oui c'est même déconseillé pour raison de sécurité de mettre register_global à on.
Je cite : Lorsqu'elle est activée, register_globals va injecter vos scripts avec toutes sortes de variables, comme les variables issues des formulaires HTML. Ceci, couplé au fait que PHP ne requiert pas d'initialisation de variable signifie que la programmation de script peu sûr est possible. Sinon au cas où (bien que désormais tu n'en ai plus vraiment besoin), je viens de tomber sur une page sympa concernant Ajax et XMLHttpRequest : http://siddh.developpez.com/articles/ajax/ ~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~
|
|
Juste pour préciser, si ça peut être utile, que je viens de comprendre le pourquoi de la ligne
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
Indispensable si on veut envoyer des données avec la méthode POST, elle permet changer le type MIME de la requête. Sans ça le serveur ne prendra pas en compte les données envoyées avec nom_de_la_requete.send(donnees) Les explications viennent de cette page, très claire pour comprendre le fonctionnement des requêtes: http://developer.mozilla.org/fr/docs/AJAX:Premiers_pas Quelques bases en javascript, débute en php/mySQL J'essaie de mettre en ligne mon arbre généalogique. |
Salut
J'ai essayé ton script finale , mais en cliquant sur un des liens , une autre page s'ouvre mais vide exemple, on a la page sql qui s'ouvre mais pas sur la meme page. A plus |
Salut
ok c'est bon , j'ai modifié tout ça et c'est ok ! A bientôt |
bonjour à tous,
j'ai essayé ton dernier code et je tombe sur une page vide, peux-tu m'aider stp merci
|
rebonjour,
j'ai créer une base de donnée avec une seule table afin d'excuterr le script. et maintenant ça marche une fois sur trois!!!! quand je lance mon fichier .php j'ai un résultat qui prouve que la connexion est bonne de la base que j'ai crée. par contre quand je lance le fichier ajax .html ça marche pas.
|
Merci pour ton aide!!!
le navigateur est IE6 le code ajax.html <head> <title>My first XMLHttpRequest</title> <script language="JavaScript"> function ajax(i) { var req = null; //défini l'objet req de façon globale, pour qu'il soit reconnu dans tout le script if(window.ActiveXObject) // Internet Explorer req = new ActiveXObject("Microsoft.XMLHTTP"); else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); return; } // ici on attribue la fonction à req.onreadystatechange, mais on ne l'exécute pas encore, donc ne pas mettre les () req.onreadystatechange = testRep; req.open("POST", "sql.php", true); req.send("i="+i); // je sais pas ce que ça veut dire mais c'est INDISPENSABLE pour transmettre des données au script php req.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); function testRep() { // cette fonction va lancer l'affichage des données reçues, une fois que la requête sera "complete" (readyState=4) if (req.readyState == 4) { if (req.status == 200) { document.open(); //ceci ouvre un nouveau flux qui va permettre l'exécution des commandes qui suivent (ici document.write) s'exécute simultanément document.write(req.responseText); // responseText contient la chaîne de caractères transmise par echo dans le script php document.close(); // ceci ferme le flux et lance l'exécutions des commandes qui precèdent } else { alert("Problem: " + req.statusText); } } } } </script> </head> <body> <a href="javascript:ajax(1);">1</a> <a href="javascript:ajax(2);">2</a> </body> </html> le code sql.php <?php $i = $_POST['i']; echo $i; mysql_connect("na", "root", "root"); mysql_select_db("test"); $reponse = mysql_query(" select * from nuke_links_links where pn_date = '2005-02-01' "); $donnees = mysql_fetch_array($reponse); echo "salut"; echo $donnees['titre']; echo "<br>"; echo $donnees['pn_title']; echo "<br>"; echo $donnees['pn_url']; mysql_close(); ?> |
merci beaucoup ça marche j'ai elevé le dcoument .open. et document.close
Boncourage a tout le monde |