[AJAX] Eclaircissement sur les syntaxes AJAX

Version imprimable

21/10/2014, 13h39
OurysBack

[AJAX] Eclaircissement sur les syntaxes AJAX

Salut tout le monde.....

Je sais que certain dirons que je suis une tête brûlée... mais bon c'est pas grave tant que je ne comprends pas je poserais quand même mon problème, Bref...

Alors j'ai lu des tutos sur l'AJAX mais je n'arrive toujours pas à assimiler certains points, alors je vais y entrer directement sachant que je comprends déjà ceux que je ne citerais pas:

***Est-ce que je peux utiliser sur une même page PHP ma fonction AJAX et mes requête PHP ??
*** Sachant que je voudrais à chaque moment interroger ma base de données comment je dois proceder pour récupérer les données et les exploiter aprés ??
***Supposons que je veuille utiliser des balises INPUT de types HIDDEN comment je dois faire pour récupérer les données dans la BD et les insèrrer dans ces balises ??

***En je veux comprendre comment se fais la liaisons entre AJAX et MySQL et bien sur avec PHP ??

Je donne un exemple d'un petit sujet :

J'ai une page page_un.php où je voudrais voir les données de la BD, Bon je veux utiliser AJAX pour que toutes les X secondes que celui-ci part interroger ma BD s'il y a de nouvelles données enregistrer, si c'est le cas alors ma page page_un.php se met à jour .

S'il vous plait soyez pas méchant avec moi, allez-y doucement, j'accepte les critiques et sachez que nous sommes là pour apprendre et rien d'autre, sinon chacun resterait chez soit traquillement.

PS : J'ai lu des tutos j'ai consulter les Forums mais il suffit juste de m'éclaircir certain point

Merci à tous pour votre éventulle aide .
22/10/2014, 21h30
Golgotha

Bonsoir OurysBack,

En fait l'ajax on en fait tout un plat mais c'est assez simple, j'espère que je pourrais éclaircir ta lanterne.

Je pars du principe que tu connais les notions de base en php/html.

Je vais essayer de reprendre ton exemple, et de rester le plus simple possible :
admettons, tu as une page profile.php qui ne fait rien d'autre qu'interroger ta base de données, et afficher "nom" et "prenom" qui sont dans une table "profile".

Si je vais changer les informations dans la base de donnée, je serais obligé de recharger la page profile.php pour voir apparaître les modifications.

Voyons maintenant le fonctionnement en ajax :

L'ajax n'est pas une technologie, ce n'est qu'une méthode qui va consister à découper le processus de tel sorte qu'on ne soit plus obligé de recharger entièrement la page pour voir des modifications.

Pour cela, on aura profile.php, et une autre page php : requete.php (par exemple).
On supprime le code php qui fait la requête vers la bdd pour récupérer les informations de la page profile.php, et ont met ça dans notre nouvelle page : requete.php
La subtilité ici consiste à ce que requete.php ne va pas nous retourner de l'HTML comme réponse, mais du texte simple, ou encore du json si tu en a entendu parlé.
Ensuite, dans la page profile.php, on aura simplement une fonction javascript, qui va appeler ce fichier : "requete.php" et qui nous retournera notre nom et prénom sous forme de texte.
Une fois récupérées ces informations, nous pouvons simplement changer un ou plusieurs éléments dans la page à l'aide de fonction javascript tel que document.getElementById("nom").innerHTML = newValue;

Une bibliothèque javascript est particulièrement utile dans tout ça : jQuery
Elle possède une fonction simple et puissante : $.ajax qui permet justement d'appeler une page serveur, et d'en retourner la réponse en javascript.

J'espère que ces explications sont assez claire.

Merci beaucoup je commence à comprendre un peu le fonctionnement, par contre là où je ne comprends rien c'est çà :

Citation:

Ensuite, dans la page profile.php, on aura simplement une fonction javascript, qui va appeler ce fichier : "requete.php" et qui nous retournera notre nom et prénom sous forme de texte.
Une fois récupérées ces informations, nous pouvons simplement changer un ou plusieurs éléments dans la page à l'aide de fonction javascript tel que document.getElementById("nom").innerHTML = newValue;

Et c'est mon principale problème, et voici un petit bout de code qui illustre ce que je viens de comprendre sur ta solution:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 //Ma page requete.php $serveur ="monServeur"; $username ="myName"; $passwdr ="passwd"; $dbname ="nameDB"; $connect_open = mysql_connect($serveur, $username, $passwdr) or die("Impossible de se connecter au serveur de bases de données."); if ($connect_open !== FALSE) { echo "Connexion au serveur réussie"; } else echo "Echec de connexion au serveur"; @$connexion = mysql_select_db($dbname); $requete = 'SELECT nom, prenom FROM membres'; $resultat = mysql_query($requete) or die ('La requête n\'a pas réussie'); ?>
Ici j'aimerais bien que tu m'explique comment je dois faire pour transférer les données dans profile.php
Continuons sur profile.php
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 //Ma page profile.php <?php session_start(); include_once 'requete.php'; ?> <!DOCTYPE html> <html lang="fr"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>AJAX et MySQL</title> </head> <body> <div id="page"> <h2>Afficher le profile de *****</h2> </div> </body> </html>
Mais ici le problème c'est que je ne sais pas comment implémenter l'AJAX pour récupérer les valeurs dont j'ai besoin à savoir le nom et le prenom

Merci pour ton éventuel eclaircissement

23/10/2014, 14h22
Golgotha
Pour information, je ne fait pas de php, donc vérifie bien la syntaxe des exemples que je te donne, de plus je n'utilise pas de javascript pure pour faire mes requêtes ajax, j'utilise jQuery.
Ceci étant dit :

Pour commencer, dans ton fichier requete.php tu aura besoin de retourner une valeur sous forme json, c'est le mieux pour dialoguer avec la partie javascript par la suite.

Donc à la fin de ton fichier requete.php tu aura quelques chose comme ça :

Code:

echo json_encode($resultat);

Ensuite dans le fichier profile.php tu aura besoin d'importer la bibliothèque jQuery :

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Alors, ensuite on va préparer ta page à recevoir les informations nom et prenom.
Pour cela on ajoute deux span par exemple, avec un id à chaque fois, comme ça ont pourra les sélectionner avec jQuery.
Code:

1 2 <div id="page"> <h2>Afficher le profile de <span id="nom"></span> <span id="prenom"></span></h2> </div>
Maintenant, il nous reste à faire la fonction javascript à l'aide de jQuery pour aller chercher les données sur la page requete.php :
Code:

1 2 3 4 5 6 7 8 $.ajax({ url: "requete.php", dataType: "json" }).done(function(data) { $("#nom").text(data.nom); $("#prenom").text(data.prenom); });
Tu n'as besoin de include_once 'requete.php';

Si tu as des questions n'hésite pas.

Alors j'ai essayer ta solution mais ya toujours un problème lors du transfert des données vers la page profil.php. Je ne sais pas si c'est au niveau de json_encode($resultat) oubien ??

Voici le dernier test que j'ai essayer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//Ma page requete.php
 
$serveur ="monServeur";
$username ="myName";
$passwdr ="passwd";
$dbname ="nameDB";
 
$connect_open = mysql_connect($serveur, $username, $passwdr)
or die("Impossible de se connecter au serveur de bases de données.");
 
if ($connect_open !== FALSE) {
	echo "Connexion au serveur réussie";
}
else echo "Echec de connexion au serveur";
@$connexion = mysql_select_db($dbname);
$requete = 'SELECT nom, prenom FROM membres';
$resultat = mysql_query($requete) or die ('La requête n\'a pas réussie');
$data = mysql_fetch_array($reultat))
echo json_encode($data['nom']).'<br>'. json_encode($data['prenom']);
//echo json_encode($resultat);

Je crois que c'est au niveau de l'encodage qui ne marche pas

et ma page profil.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
<?php 
        session_start();
        
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>AJAX et MySQL</title>
<script src="./jqueryV2.js"></script>
<script type="text/javascript">
    
   //l'AJAX permettant le déclenchement de la mise à jour 
   $(document).ready(function(){
        //alert("le jQuery est chargé");
                $("#btn_declenche").click(function(){
                        $.ajax({
            url:"requete.php",
            dataType:"json"
        }).done(function(data){
            $("#nom").text(data.nom);
            $("#prenom").text(data.prenom);
 
        }).fail(function(){
            alert('Les données ne sont pas envoyées');
        }); 
   });
</script>
 
</head>
<body>
<div id="page">
 
    <input type="text" id="nom">
    <input type="text" id="prenom">
    <input type="submit" id="btn_declenche">
 
</div>
</body>
</html>

Voilà en quelque sorte ce que j'ai testé mais au click du bouton c'est la methode fail qui se déclenche à savoir ("Les données ne sont pas envoyées").

Merci encore pour ton eventuel aide.

Bonsoir,

Voici le code de mon exemple. testé sur wamp.

index.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
<!doctype html><html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Tuto • Ajax</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
 
 
            $(function(){
 
 
                $("#recup_user").click(function(){
 
 
                        $.ajax({
                            url: "requete.php",
                            dataType: "json"
                            }).done(function(data) {
                                $("#nom").text(data.nom);
                                $("#prenom").text(data.prenom);
                        });
 
 
                });
 
 
            });
 
 
        </script>
 
 
         <div> Utilisateur : <span id="nom"></span> <span id="prenom"></span> </div>
 
 
         <button id="recup_user">Charger les données.</button>
 
 
    </body>
</html>

requete.php

Code:

1
2
3
4
5
6
7
 
<?php    require_once('bdd.php');
    $select = $connection->query("SELECT nom, prenom FROM utilisateur");
    $select->setFetchMode(PDO::FETCH_OBJ);    
    $user = $select->fetch();
    echo json_encode($user);        
 ?>

bdd.php

Code:

1
2
3
4
5
6
7
8
9
10
 
<?php 
 
// Connection au serveur
$dns = 'mysql:host=localhost;dbname=tutodb';
$utilisateur = '*****';
$motDePasse = '******';
$connection = new PDO( $dns, $utilisateur, $motDePasse );
 
 ?>

Si vous avez des questions, n'hésitez pas.

Merci beaucoup pour ton aide, j'ai réussie à le faire mais avec une autre solution et là voici pour ceux qui en auront besoin :

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
 
   window.addEventListener('load', function () {
    document.getElementById('btn_declenche').onclick = function () {
        var xhr = new XMLHttpRequest();
        xhr.onloadend = function () {
            if (xhr.status !== 200 || xhr.readyState !== 4)
                return alert("erreur de communication : la requête AJAX n'a pas abouti.");
 
            var response;
            try {
                response = JSON.parse(xhr.response);
                //response = xhr.response;
            } catch (e) {
                console.log(xhr.response);
                console.error(e);
                alert("La réponse du serveur n'est pas au format attendu");
                return;
            }
 
            Object.getOwnPropertyNames(response).forEach(function (id) {
                document.getElementById('prenom').innerText = response[0];
                document.getElementById('nom').innerText = response[1];
            });
        };
 
        xhr.open('GET', 'requete.php');
        xhr.send(null);
    };
});