Galactic Civilizations 3
Ajax et Php avec fichier texte

Ajax et Php avec fichier texte

Catégorie: Javascript.
Posté par le 14/02/2012.
Dernière mise à jour le 20/08/2012.

   Tutoriel suivant>>

Description

Ce tutoriel vous expliquera comment utiliser l’ajax afin de récupérer lorsque vous le désirez les données envoyées par votre script PHP sous forme d’un fichier texte.

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 de récupérer les données envoyées par le script PHP.

formulaire.html

<html><head>
<script language="javascript" src="Ajax_txt.js"></script>
</head><body>
<form action="">
   <input type="button" onclick="recupererDonnees()" value="ajax"/>
</form>
</body></html>

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

Script JavaScript

Nous allons maintenant créer un fichier du nom d’Ajax_txt.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 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 à envoye au serveur doivent être ici.
    • boolean: true (asynchrone) / false (synchrone).
  • send("chaine"): Envoie 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 teste les différentes versions */
      try{ return new ActiveXObject(names[i]); }
      catch(e){}
    }
    alert("Non supporte");
    return null; // non supporté
  }
};

Récupérer les données

Nous allons maintenant utiliser l’objet XMLHttpRequest afin de récupérer les données envoyées par le serveur. Pour ce faire, ajouter la fonction suivante :

Ajax.js

function recupererDonnees(){
  var req =  creerInstance();
  var donneeClient = null;
  req.onreadystatechange = function(){
  /* Si l'état = terminé */
  if(req.readyState == 4){
    /* Si le statut = OK */
    if(req.status == 200){
      /* On afficher la réponse */
      alert(req.responseText);
    }else{
      alert("Error: returned status code " + req.status + " " + req.statusText);
    }
  }
}
    
  req.open("GET", "serveur.php", true);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  /* On envoie les données */
   req.send(donneeClient);
}

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 récupérer la réponse du serveur en format texte, mais on peut également utiliser l'Ajax pour récupérer la réponse sous forme d'un fichier xml.

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";
?>

Tests

Le tutoriel arrive maintenant à sa fin, vous pouvez tester le fonctionnement du bouton « ajax » en cliquant dessus. Vous devriez voir apparaitre le message : « donnees ».

Ajax
 

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

   Tutoriel suivant>>

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 fichier texte html JavaScript php 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