Etant un grand fan du Framework jQuery, je ferais de temps en temps quelques petits écarts avec des tutoriaux à son sujet.
Aujourd’hui, on va débuter très très light avec un bout de code expliquant comment envoyer des données en POST à un serveur PHP et récupérer une réponse au format XML (pour le traitement avec JSON je vous laisse parcourir la documentation très bien faite). L’exemple ci dessous envoie une requête au chargement de la page, puis, récupère et parse la réponse au format XML renvoyé epar le serveur. Apres, libre à vous d’effectuer les traitements que vous voulez.

Voici le code Javascript :

<script src="jquery.js"></script>
<script type="text/javascript">

// Lorsque la totalité de la page est chargée

$(document).ready(function() {

$.ajax({ // Requete ajax
type: "POST", // envoie en POST
url: "test.php", // url cible du script PHP
async: true, // mode asynchrone
data: "param1=test1&param2=test2", // données envoyées

success: function(xml){ // Lorsque le PHP à renovyé une réponse
alert("Retour du PHP : " + $(xml).find('message').text());
}

});

});
</script>

Et le code PHP correspondant :

header ("content-type: text/xml");
echo "<root><message>Bonjour de PHP</message></root>";

Voila, c’est tout ce qu’il y a à faire. A partir d’un bout de code simple comme celui là, on peut facilement imaginer énormement de fonctionnalités. Par exemple, des requêtes synchrones qui effectuent des requêtes en base permettant d’afficher un champ d’autocompletion (style google suggest). Ce tutorial, c’est vraiment la base et la vision la plus simple d’un appel ajax.

Partager sur :
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Twitter

Article(s) sur le même sujet :

  1. Autocompletion en jQuery
  2. Explorateur de fichier en AJAX
  3. Manipuler les sessions avec le framework de typo3
  4. Générer des urls « propres » avec typo3
  5. Lecteur tous formats en flash