  Introduction à JQuery
[10 mn de lecture - paru le 11/8/2006 5:18:53 PM - Public : Débutant]
|
|
Auteur
AJAX
Avec JQuery il est aussi possible de faire de l'AJAX.
Qu'est ce que l'AJAX ? L’AJAX ou "Asynchronous JavaScript And XML" n'est pas un nouveau langage de programmation ou une nouvelle technologie. C'est seulement une utilisation conjointe, de manière intelligente et complémentaire de technologie que l'ont utilise déjà depuis des années. Ce qui a rendu l'AJAX si populaire c'est l'appel XMLHttpRequest qui permet de générer des actions asynchrones. En d'autres termes, vous pouvez recharger seulement une partie de la page. Le gros inconvénient d'AJAX était qu'il était relativement difficile à mettre en place et surtout à maintenir. C'est la que JQuery nous intéresse. Grâce à cette librairie, l'AJAX est devenu extrêmement simple, je dirai même, amusant.
Reprenons l'exemple précédent du div avec les trois paragraphes. Imaginons que l'on veuille charger un texte dans l'un des paragraphes lorsque l'on clique dessus. Cela peut-être fait à l'aide de load() qui récupère du html et l'injecte directement dans l'objet DOM voulu.
Exemple :
#### index.html :
<html>
<head>
<title>Un autre exemple</title>
<script type="text/javascript" src="jquery.js">
</script>
<script language="Javascript">
$(document).ready(function(){
$("div > p").click(function() {
$(this).load("test.txt");
});
});
</script>
</head>
<body>
<div>
<p>Mon 1er paragraphe ici.</p>
<p>Mon 2ème paragraphe ici.</p>
<p>Mon 3ème paragraphe ici.</p>
</div>
</body>
</html>
#### test.txt :
<span style="background-color: red">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</span>
Cela va injecter un texte en latin avec un background rouge à la place du texte écrit dans le paragraphe sur lequel on a cliqué.
Mais JQuery sait aussi envoyer des informations au serveur. Pour cela, rien de plus simple, utilisez la fonction $.post(). Celle-ci accepte même une fonction de callback.
Exemple :
$.post("save.php", { name : "Mathieu", school : "SUPINFO Paris", promo : "IS1B" }, function() { alert("Les éléments ont bien été envoyés"); }); affichera une msgbox une fois que les éléments auront bien été envoyés au serveur.
|
18 Visites
Mathieu SEGUIN
[10 mn de lecture - paru le 11/8/2006 5:07:59 PM - Public : Débutant]
[25 mn de lecture - paru le 11/8/2006 4:57:49 PM - Public : Débutant]