Discussion :

[gtraxx]

Bonjour j'aimerai faire une requete asynchrone avec ajax via un script php plutot simple.
pour l'instant ce script est pas tres optimisé faut dire et c'est pour cela qu'ajax me semble très bien.
Le problème c'est que je n'arrive pas a comprendre le fonctionnement.
Voici mon script php simple:

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
<?php
  error_reporting(0);
  $id_email = 0;
  $email = '';
  se_connecter();
  if(isset($_POST['new_contact']))
  {
    $id_email = isset($_POST['id'])?($_POST['id']):0;
    $email = isset($_POST['email'])?($_POST['email']):'';
    if (empty($email)) 
    {  
        echo '<span class="reponse_newsletters">Vous devez remplir le champ</span>'; 
        $erreur = true;
    } 
    else
    {
        if (!eregi('^[0-9a-z]([-_.]?[0-9a-z])*@[0-9a-z]([-_.]?[0-9a-z])*\\.[a-z]{2,4}$',$email))
        { 
            echo '<span class="reponse_newsletters">L\'adresse e-mail n\'est pas correcte&nbsp;:('.$email.')</span>'; 
            $erreur = true;
        } 
    }
 
    if($erreur == false)
    {
        // On vérifie si c'est une modification d'adresse ou pas
        if ($id_email == 0)
        {
            // Ce n'est pas une modification, on crée une nouvelle entrée dans la table
            query("INSERT INTO membernews VALUE ('','" . mysql_real_escape_string($email) . "')");
        }
 
        echo '<span class="reponse_newsletters">merci pour votre inscription</span>';
        echo '<span class="reponse_newsletters">'.$email.'</span><br/>';
    }
  }
?>

Comment doit je faire pour que ceci communique avec Ajax ???
j'ai essayer ceci:

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
65
66
67
68
var requete = null;
try {
  requete = new XMLHttpRequest();
} catch (essaimicrosoft) {
  try {
    requete = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (autremicrosoft) {
    try {
      requete = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (echec) {
      requete = null;
    }
  }
}
 
if (requete == null)
  alert("Impossible de créer l'objet requête!");
 
function actualiserPage() {
  if (requete.readyState == 4) {
    if (requete.status == 200) {
      /* Obtenir la réponse du serveur */
      var adresseMail = requete.responseText;
 
      /* Mettre à jour le HTML du formulaire web */
      document.getElementById("email").value =
        adresseMail;
    } else
      alert("Erreur ! Le statut de la requête est " + requete.status);
  }
}
 
function soumettreEmail() {
  var email = document.getElementById("email").value;
  var url = "verif_mail.php";
  requete.open("POST", url, true);
  requete.onreadystatechange = afficherConfirmation;
  requete.setRequestHeader("Content-Type",
                           "application/x-www-form-urlencoded");
  requete.send("email=" + escape(mail));
}
 
function afficherConfirmation() {
  if (requete.readyState == 4) {
    if (requete.status == 200) {
      var reponse = requete.responseText;
      // Localiser le formulaire dans la page
      var divPrincipal = document.getElementById("principale");
      var formulaireCde = document.getElementById("formulaire");
 
      // Créer un texte de confirmation
      pElement = document.createElement("p");
      textNode = document.createTextNode("Votre adresse mail est " +
        reponse);
      pElement.appendChild(textNode);
 
      // Remplacer le formulaire par la confirmation
      divPrincipal.replaceChild(pElement, formulaireCde);
    } else {
      var message = requete.getResponseHeader("Statut");
      if ((message == null) || (message.length <= 0)) {
        alert("Erreur ! Le statut de la requête est " + requete.status);
      } else {
        alert(message);
      }
    }
  }
}

Mon script php est pas mal sans ajax mais j'aimerai vraiment afficher mes messages d'erreur ou de réussite via reponseTexte

Code :

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

1
2
3
4
5
6
7
8
 
[<div id="principale">
<form id="formulaire"/>
			<input type="text" name="email"  ?>" maxlength="30" id="email" />
			<input type="hidden" name="id" id="id" /><br />
			<input type="bouton" name="new_contact" value="Envoi" onClick="soumettreEmail();" />
			<input type="reset" value="Reset" />
</div>

Comment arranger tout ceci pour que cela fonctionne je suis un peut perdu ma déjà fallu du temps pour écrire sa

[Ricou13]

Salut,

La première chose à faire est de bien lire les excellents tutos qui se trouvent ici

Je me suis mis à Ajax et Dom, il y a 1 semaine, après avoir lu ces tutos, et maintenant, j'ai presque fini le back office d'un site avec une gestion quasi full ajax.



PS à l'attention des rédacteurs des tutos : vos exemples montrent 1 appel vers 1 fichier unique php. Ce serait bien de montrer, ne serait-ce qu'en exemple, le cas où une page doit faire plusieurs traitements différents (ajouter, modifier, supprimer, créer, raffraichir...).
Parce que, on a tendance à croire qu'il faudrait faire un fichier php pour chaque traitement

[Matthieu2000]

Parce que, on a tendance à croire qu'il faudrait faire un fichier php pour chaque traitement

c'est le cas ou tu passe par les paramètres.

gtraxx -> Quel est le message d'erreur?

[Ricou13]

c'est le cas ou tu passe par les paramètres.

Ok. Ca tombe bien c'est ce que j'ai fait.
A chaque fonction Javascript qui lance un appel serveur, j'ai ajouté un paramètre systématique et dans le fichier php unique, un simple switch sur ce paramètre pour savoir quel traitement effectuer.

J'ai bon, alors ?

gtraxx : un petit truc très efficace pour le débuggage : sur chacune de tes fonctions de gestion du fichier de réponse d'Ajax, tu ajoutes :

Code :

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

1
2
3
4
5
function afficherConfirmation() {
  if (requete.readyState == 4) {
    // alert(requete.responseText);
    if (requete.status == 200) {
       ...

Comme ton fichier de reponse (texte ou XML) ne sera jamais directement affiché à l'écran, tu ne sauras pas si tu as, par exemple, une erreur dans ta requête. Par contre, l'erreur affichée par php sera bien présente dans "responseText".

Tu n'as plus qu'à enlever les slash de commentaire et tu sauras si tu as une erreur au niveau de ton php
Ce qui répondra à la question de Matthieu2000

[gtraxx]

merci pour vos reponse
je viens de tester mais le bouton d'envoi de fais rien comme si j'envoyais dans le vide peut etre ai je oublier un truc tout simple :

Code :

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

1
2
3
4
5
6
7
<div id="principale">
			<form id="formulaire"/>
			<input type="text" name="email" maxlength="30" id="email" />
			<input type="hidden" name="id" id="id" /><br />
			<input type="button" name="new_contact" value="Envoi" onclick="soumettreEmail();" /><br />
			<input type="reset" value="Reset" />
			</div>

A mon avis j'ai mélanger un peux mes truc lol
pour ce qui est de la reponseText faut il changer un truc dans mon script php car la c'est toujours les messages direct via le script
Mon debbuger ajax me dit qu'il y as souçis avec ceci:

Code :

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

requete.send("email=" + escape(mail));

[E.Bzz]

peut etre ai je oublier un truc tout simple

Comme le </form>, par exemple

... sans préjuger de l'intérêt de mettre un form lorsqu'il n'y en a pas besoin ...

A+

[Ricou13]

Comme le </form>, par exemple

Ben oui et non puisque sa balise "form" est directement fermée par un "<form ... />"
Ce qui soulève quelques questions :
- Peut-on utiliser cette écriture pour des balises qui sont normallement en 2 parties ?
- Si oui, ce formulaire ne sert à rien puisqu'il est vide (sauf à le remplir dinamyquement via DOM)
- A part la propreté du code, les règles du "bien coder" et les risques d'affichage altéré, est-ce que cela peut vraiment empêcher le fonctionnement du bouton ? (j'en doute mais j'ai la flemme de tester)

... sans préjuger de l'intérêt de mettre un form lorsqu'il n'y en a pas besoin ...

Intéressante comme remarque :
- Est-il vraiment utile de mettre un "form" s'il ne sera jamais lancé (traitement Ajax par exemple) ?
- peut-on "proprement" mettre des input sans form ?

...

Ah ! Au fait, gtraxx, ajoutes régulièrement des "alert()" (avant l'appel de la fonction dans le onclick, comme première instruction de la fonction, etc). Tu sauras ainsi à quel endroit cela ne passe pas. Verifies également l'orthographe du nom de ta fonction, on sait jamais.

[E.Bzz]

Ben oui et non puisque sa balise "form" est directement fermée par un "<form ... />"
Ce qui soulève quelques questions :
- Peut-on utiliser cette écriture pour des balises qui sont normallement en 2 parties ?

De sa haute bienveillance, le W3C dire : "Pas glop !!"

- Si oui, ce formulaire ne sert à rien puisqu'il est vide (sauf à le remplir dinamyquement via DOM)

Loin de moi l'idée de remettre en cause l'immense puissance du DOM, mais il sait remplir un seau qui a perdu son fond ?

- A part la propreté du code, les règles du "bien coder" et les risques d'affichage altéré, est-ce que cela peut vraiment empêcher le fonctionnement du bouton ? (j'en doute mais j'ai la flemme de tester)

Idem, mais je serais à la place de gtraxx, je prendrais le temps.
Bonne proba, je dirais

- Est-il vraiment utile de mettre un "form" s'il ne sera jamais lancé (traitement Ajax par exemple) ?

J'ai pas de réponse catégorique, évidemment, mais en posant la question à l'envers, ça donne des éléments : "Qu'est-ce qu'on perd, dans ces cas là (AJAX etc.) à ne pas mettre de <form> ?"

- peut-on "proprement" mettre des input sans form ?

Dans mon contexte un peu particulier, ça m'arrive souvent (AJAX etc.), mais tout dépend bien sûr, de qui juge la "propreté"
Alors : A fond le <form> ??

Hum ... désolé

A+

[Ricou13]

De sa haute bienveillance, le W3C dire : "Pas glop !!"

Alors, on va dire comme le grans W3C : "gtraxx, c'est pas glop !"

Loin de moi l'idée de remettre en cause l'immense puissance du DOM, mais il sait remplir un seau qui a perdu son fond ?

La question est : Est-ce que le "/>" est un pur formalisme à la sauce XML ou est-il interprété comme un "</tag>" ? Question qui ne se pose pas d'ailleurs (voir point précédent). Mais sur le fond, je pense effectivement qu'on ne peut ajouter des noeuds à une balise simple. On ne peut lui adjoindre (comment je cause bien ! ) que des attributs.
Au fait ! Si on ajoute des noeud de type en-tête (header), on ajoute, en fait, des "têtes de noeud" [ttttrrrrrrrr ding] roulement de tambour

"Qu'est-ce qu'on perd, dans ces cas là (AJAX etc.) à ne pas mettre de <form> ?"

Je pense que c'est plus une question de formalisme et de sémantique qu'une question de fonctionalité, effectivement.

Alors : A fond le <form> ??

Bon, pour en revenir à des choses plus sérieuses : gtraxx, t'es toujours là ?

[E.Bzz]

Au fait ! Si on ajoute des noeud de type en-tête (header), on ajoute, en fait, des "têtes de noeud" [ttttrrrrrrrr ding] roulement de tambour

A+

[gtraxx]

Merci pour vos réponses , pour ce qui est du <form> je me pencherai la dessus plutard faut dire que j'essaie de rendre mes documents les plus valides possible (question de conscience )
mais ce qui n'est pas facile pour moi c'est de passer de simple traitement php a du asynchrone avec ajax sans pour autant être sur de ce que j'écris .
faut dire bon nombre de bouquin fabuleux existe mais sont peut être un peut incompréhensible dans l'immédiat vu mon état d'esprit quand je regarde tout ce code qui me parait au premier coup d'oeil "bizarre" lol.
Ce qui est sur c'est que je m'efforce de comprendre pour que je puisse l'exploiter un max et m'amuser comme un fous a allier ajax , php et d'autre truc histoire de repousser les limites
Pour le moment je n'y suis pas encore donc faudrai décortiquer tout cela et essayer de faire un code php ajax qui tourne .
Cela m'aiderai mais bien sur pas mal de personne serai intéresser d'utiliser ce genre de procéder a ajouter au tutorial
Je pense que ricou13 sera d'accord avec moi

[Ricou13]

Merci pour vos réponses , pour ce qui est du <form> je me pencherai la dessus plutard faut dire que j'essaie de rendre mes documents les plus valides possible (question de conscience )

Faut pas se pencher longtemp. la balise form s'écrit

Code :

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

1
2
3
4
<form name="...>
   <input... />
   <input... />
</form>

Et ça, c'est valide.

Cela m'aiderai mais bien sur pas mal de personne serai intéresser d'utiliser ce genre de procéder a ajouter au tutorial
Je pense que ricou13 sera d'accord avec moi

j'aimerais bien être d'accord avec toi mais j'avoue que je ne comprend pas bien le sens de ta phrase

[E.Bzz]

Merci pour vos réponses , pour ce qui est du <form> je me pencherai la dessus plutard faut dire que j'essaie de rendre mes documents les plus valides possible (question de conscience )

Alors ne te pose pas de faux pb : aucune nécessité de la présence d'un <form> dans la page pour qu'elle soit valide.
Au contraire, vouloir le laisser à tout prix rend la page "incohérente" (les " " pour le bémol : on est dans le coupage de cheveux en 4, mais puisque tu veux bien faire ...)

A+

[gtraxx]

Penser vous qu'il faudrai que je change le code php pour qu'il fonctionne avec ajax ???
je suis larguer de ce coté , si j'utilise ce code sans ajax il fonctionne mais n'est pas tres pratique par exemple pour vérifier l'existence d'une adresse mail.
mon but ici est de faire une requete asynchrone via ajax pour que l'utilisateur n'est pas a recharger toute la page mais simplement le module newsletter histoire qu'il n'attende pas des heures
ps: rico13 désolé je me suis mal fais comprendre (faiblesse de français lol)