[DOM] faire une requete asynchrone

**gtraxx** · 28/01/2007, 03h09

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** · 28/01/2007, 12h58

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** · 29/01/2007, 15h57

Envoyé par Ricou13

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** · 29/01/2007, 17h43

Envoyé par Matthieu2000

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** · 29/01/2007, 18h47

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