Xhr.js | ThierryPOINOT.COM

Navigation

Archives for xhr.js

script javascript : Les objets XMLHttpRequest

31 12 2007

Quoi ???? Mais c’est quoi ça ????
Les objets XMLHttpRequest sont des objets javascript qui permettent d’envoyer une serie de requête à un serveur.
Bon en clair, c’est la base de L’Ajax. Non non pas la lessive (on me l’a déjà faite…c’est triste je sais)
AJAX signifie en langage Web : Asynchronuous Javascript and XML

Bon bref, je vous fais part de mes connaissances et réalisations : Un petit javascript avec 2 fonctions. Une qui créé un objet XMLHttpRequest en fonction du navigateur utilisé. Oui parce c’est comme toujours, IE et FF ne se comportent jamais pareil !
Et une autre fonction qui se charge de tout. Vous lui passez en argument, l’identifiant d’une balise, le script vers lequel envoyer la requête, la méthode de la requête (GET ou POST) et les données à envoyer.

En gros, si vous utiliser un script PHP, vous envoyez des variables GET ou POST ($_GET ou $_POST) à un script PHP, et le résultat de ce script php est affiché dans la balise contenant l’identifiant que vous avez spécifié.

Un exemple en live pour mieux comprendre :
un script time.php situé à la racine de votre serveur :

<?php
if ( isset($_POST[‘timestamp’]) AND $_POST[‘timestamp’] == ‘true’ ) {
echo time();
} elseif ( isset($_POST[‘date_format’] ) {
echo "<span style=\"color: red;\">".time( rawurldecode(stripslashes($_POST["date_format"])) )."</span>";
}
?>

Maintenant la page html (également à la racine du serveur) simple basique non valide parce que sinon ça prend de la place :

<html>
<head>
<script type="text/javascript" src="http://www.thierrypoinot.com/wp-content/uploads/2007/12/xhr.js"></script>
</head>
<body>
<form>
<!– Div qui contiendra le résultat du script –>
<div id="result"></div>
<input type="text" name="date" value="d/m/Y H:i:s" />
<input type="button" value="envoyer" onmouseup="xhr_send (’result’, ‘time.php’, ‘POST’, ‘date_format=’+escape(this.date));" />
</form>
</body>
</html>

Bon voilà, j’ai pas testé parce que j’ai écrit le code en direct dans l’éditeur d’articles de wordpress, alors si ça marche je suis trop fort, si ça marche pas c’est normal. En tout cas le .js fonctionne puisque je l’utilise dans le formulaire de contact.
Après c’est pas un tuto non plus, c’est juste un exemple d’utilisation, de présentation.
Pour plus de détails, il y a OpenWeb, ou ça, ou encore toutjavascript.com, ou l’incontournable Wikipédia.

Voici le lien vers le .js : xhr.js - xmlhttprequest javascript
Le script xhr.js utilise une petite image sympa pour montrer que la page charge des infos : Mettez l’image dans le même dossier que le fichier xhr.js.

Voici un petit site sympa qui vous permettra de générer votre “AjaxLoader”… http://www.ajaxload.info/