|
|
|
|
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:
<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>
<?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
Répondre à mike_d
|
Bonjour,
<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.
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 :) ~
|
Re,
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.
|
Oui c'est même déconseillé pour raison de sécurité de mettre register_global à on.
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. |
Rebonjour,
|
Merci pour ton aide!!!
|
