Galactic Civilizations 3
Ajax et PHP envoi de données

Ajax et PHP envoi de données

Catégorie: Javascript.
Posté par le 20/08/2012.
Dernière mise à jour le 03/10/2013.

<<Tutoriel précédent 

Description

Ce tutoriel vous expliquera comment utiliser l’ajax afin d’envoyer des données en GET ou en POST à votre script PHP.

Introduction

Ce tutoriel peut être réalisé à l'aide d'un simple éditeur de texte. Il nécessite des connaissances de base en html, JavaScript et PHP.

Formulaire HTML

Pour commencer, nous allons créer un fichier du nom de formulaire.html. Ce fichier contiendra juste un bouton permettant d’envoyer des données au script PHP.

formulaire.html

<html><head>
<script
language="javascript" src="Ajax.js"></script>
</head><body>
<form
name="monFormulaire" action="">
   <input
type="text" name="donnees" value=" "/>
   <input
type="button" onclick="envoyerDonnees()" value="envoi"/>
</form>
</body></html>

Nous pouvons remarquer que lors du clic sur le bouton « envoi », la fonction « envoyerDonnees() » sera appelée. Cette fonction sera définie dans le fichier Ajax_send.js.

Script JavaScript

Nous allons maintenant créer un fichier du nom d’Ajax_send.js. Ce fichier contiendra la fonction permettant de créer une instance permettant d’envoyer une requête http vers le serveur et d’une fonction permettant d’envoyer les données et de récupérer la réponse du serveur.

L'objet XMLHttpRequest

La première fonction va permettre d’instancier l’objet XMLHttpRequest. Celui-ci va permettre d’interagir avec le serveur par le biais de ses méthodes et de ses attributs.

Liste des attributs :

  • readyState : représente l’état de la connexion.
    • 0 : connexion non initialisée.
    • 1 : connexion établie.
    • 2 : requête reçue.
    • 3 : réponse en cours.
    • 4 : terminé.
  • status : représente l’état de la page envoyée par le serveur.
    • 200 : OK.
    • 404 : page non trouvée.
  • responseText : contient les données sous forme de chaine de caractères.
  • responseXml : contient les données sous format XML.
  • onreadystatechange : propriété activée lors d’un changement d’état. On lui assigne une fonction.

Liste des méthodes :

  • open(mode, url, boolean) : Ouvre une connexion.
    • mode: type de requête, GET ou POST.
    • url: url du script PHP. Pour la commande GET les données se trouveront ici.
    • boolean: true (asynchrone) / false (synchrone).
  • send("chaine"): Envoi des données au serveur. Null pour la commande GET.

Pour créer l’instance de l’objet XMLHttpRequest, vous ajoutez la fonction suivante :

Ajax.js

function creerInstance(){
  if(window.XMLHttpRequest){
    /* Firefox, Opera, Google Chrome */
    return new XMLHttpRequest();
  }else if(window.ActiveXObject){
    /* Internet Explorer */
    var names = [
      "Msxml2.XMLHTTP.6.0",
      "Msxml2.XMLHTTP.3.0",
      "Msxml2.XMLHTTP",
      "Microsoft.XMLHTTP"
    ];
    for(var i in names){
      /* On test les différentes versions */
      try{ return new ActiveXObject(names[i]); }
      catch(e){}
    }
    alert("Non supporte");
    return null; // non supporté
  }
};

Envoi des données en GET

Nous allons maintenant utiliser l’objet XMLHttpRequest afin d’envoyer les données en GET et récupérer la réponse envoyées par le serveur. Pour ce faire, ajoutez la fonction suivante :

Ajax.js

function envoyerDonnees (){
  var req =  creerInstance();
 /* On récupère les données du formulaire */
  var donneeClient =document.monFormulaire.donnees.value;
  req.onreadystatechange = function(){
  /* Si l'état = terminé */
  if(req.readyState == 4){
    /* Si le statut = OK */
    if(req.status == 200){
      /* On affiche la réponse */
      alert(req.responseText);
    }else{
      alert("Error: returned status code " + req.status + " " + req.statusText);
    }
  }
}
    
  req.open("GET", "serveur.php?donnees="+donneeClient, true);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  /* On met à null car c’est une commande GET*/
   req.send(null);
}

Comme vous pouvez le constater, on vérifie si la connexion est terminée et si le statut des données envoyées par le serveur est ok.

Dans ce tutoriel, je vous explique comment utiliser l’ajax afin d’envoyer des données en GET ou en POST à votre script PHP, mais on peut également utiliser l'Ajax pour récupérer la réponse sous forme d'un fichier XML ou utiliser l'Ajax pour récupérer la réponse sous forme d'un fichier texte.

Script PHP

Nous allons maintenant nous occuper du script PHP coté serveur.  Vous allez voir, celui-ci est très simple. Le fichier PHP que nous allons créer, va se nommer : serveur.php.

serveur.php

<?php
  echo "donnees recues: ".$_GET["donnees"];
?>

Tests

Nous allons tester le fonctionnement du bouton « envoi » en cliquant dessus.

Ajax envoie de donnees en GET

Envoi des données en POST

Nous allons maintenant modifier le fichier Ajax.js et plus précisément la fonction envoyerDonnees pour envoyer les données en POST. Pour ce faire, modifiez le fichier de la sorte :

Ajax.js

...
/*On dit au serveur que les données du formulaire doivent se trouver dans la variable « donnees »*/
donneeClient = "donnees="+donneeClient ;
req.open("POST", "serveur.php", true);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  /* Pour la commande POST les données sont mises dans le corps du message
      et donc passées en argument dans la fonction send */

   req.send(donneeClient);
...

Si l’on désire utiliser plus d’une variable poste, il faut séparer les noms des variables par le caractère « & ». Voici un exemple : donnees = "d1="+ d1+"&d2="+d2 ;

Script PHP

Nous allons maintenant nous occuper du script PHP coté serveur.  Vous allez voir, il n’y a qu’une petite chose à changer :

serveur.php

<?php
  echo "donnees recues: ".$_POST["donnees"];
?>

Tests

Nous allons tester le fonctionnement du bouton « envoi » en cliquant dessus.

Ajax envoie de Donnees en POST

Tu as aimé ce tutoriel ?
Aide nous à améliorer le site ! Deviens partenaire officiel ou suis nous sur facebook !

<<Tutoriel précédent 

Commentaires[0]

Tu as aimé ce tutoriel ? Alors partage-le avec tes amis !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo Voir le flux rss

Mots Clés: ajax GET html JavaScript php POST web XMLHttpRequest

Veve :
(11/04/2013 - 17:19:44)
il faut juste mettre "sudo" à la place de "su" pour exécuter la commande en root

Veve :
(11/04/2013 - 17:18:56)
Salut tu peux aller lire ce tutoriel: http://www.tutorielsenfolie.com/tutoriels-63-installation-configuration-opennebula.html Il fonctionne aussi sous ubuntu

safa.souissi4 :
(10/04/2013 - 20:58:13)
s'il vous plait c urgent :(

safa.souissi4 :
(10/04/2013 - 20:56:25)
bonsoir,je cherche un tutos pour installer opennebula.org sous ubuntu 12.

Veve :
(18/03/2013 - 20:07:49)
oui, j'essaye de voir d'ou viens le problème.

sonde :
(18/03/2013 - 13:29:57)
re merci (j apprend un peu plus) je crois que j ai trouver pourquoi je peu pas poster si il y a ligne code impossible de poster lol

Veve :
(17/03/2013 - 21:34:49)
Salut, j'espère que ça t'a aidé.

sonde :
(17/03/2013 - 09:59:02)
pour ton aide

sonde :
(17/03/2013 - 09:57:36)
slt Veve impossible de laisser com

sonde :
(17/03/2013 - 09:56:55)
??

Demi-dieu :
(15/03/2013 - 18:41:13)
salut ^^

sonde :
(13/03/2013 - 14:49:35)
un petit coucou

Tanamoureuse :
(29/09/2011 - 06:11:08)
Je t'aime

Faire un don

Ma Publicité ici


Faire un don