jQuery AJAX

jQuery cours tutorial

Exemple : Changer le contenu d’un élément par le contenu d’un fichier.

Pour cela créer un fichier texte « test1.txt » avec le contenu suivant :

AJAX n'est pas un langage de programmation.<br />

C'est juste une technique pour créer de meilleurs applications web et plus interactif.

Placer le fichier texte dans le même dossier que le fichier html suivant de la demo.



<!DOCTYPE html> 
 <html lang="en">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX</title>
<script type="text/javascript" src = " http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js " ></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div.teste").load('test1.txt');
  });
});
</script>
</head>
<body>
<div class="teste"><h2>AJAX va changer le texte dans cet élément div si vous cliquez sur le bouton Changer</h2></div>
<button>Changer </button>
</body>
</html>

Ce qui est AJAX ?

AJAX = Asynchronous JavaScript and XML.

AJAX est une technique permettant de créer des pages web rapide et dynamique.

AJAX permet de mettre à jour des pages web asynchrone en échangeant de petites quantités de données avec le serveur dans les coulisses. Cela signifie qu'il est possible de mettre à jour certaines parties d'une page web, sans recharger la page entière.

Vous pouvez en apprendre plus sur AJAX dans notre tutoriel AJAX.

AJAX et jQuery

jQuery fournit un riche ensemble de méthodes pour le développement de web AJAX.

Avec AJAX jQuery, vous pouvez demander des données TXT, HTML, XML ou JSON d'un serveur distant en utilisant HTTP Get et HTTP Post.

Et vous pouvez charger des données distantes directement dans certains éléments HTML de votre page web !

Écrire moins, faire plus

La méthode load() jQuery est une fonction d'AJAX simple (mais très puissante). Elle possède la syntaxe suivante :

$(sélecteur) .load (url ,donnees, rappel )

Utilisez le sélecteur pour définir le ou les éléments HTML pour changer le contenu

et le paramètre url pour spécifier une adresse web pour vos données.

Voir l’exemple en haut.

Les deux autres paramètres donnees et rappel ne sont utilisés que dans les cas suivants :

Si vous voulez envoyer des données vers le serveur, vous devez utiliser le paramètre donnees .

Si vous avez besoin déclencher une fonction après achèvement, utilisez le paramètre de rappel . Le paramètre rappel ou callback est une fonction qui doit être exécutée après l'achèvement de la fonction load ()

jQuery.ajax ()

$.Ajax(options) est la syntaxe de la fonction d'AJAX de bas niveau.

$.ajax offre plus de fonctionnalités que des fonctions de niveau supérieures comme load, get et post, mais il est aussi plus difficile à utiliser.

L'option paramètre prend les paires name|value définissant les données de l'url, mots de passe, les types de données, filtres, jeux de caractères, fonctions timeout et erreur.

Exemple :

Sélectionner le code


  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo </title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  $("button").click(function(){
    $.ajax({url:"test1.txt", success:function(result){
      $("div").html(result);
    }});
  });});
  </script>
  </head>
  <body>
  <div><h2>Laissez AJAX changer ce
  texte</h2></div>
  <button>Changer le Contenu</button>
  </body>
  </html>

Pour une référence complète AJAX jQuery, s'il vous plaît aller à notre référence jQuery AJAX Méthodes .

Cours precedent:

jQuery manipulation css

Sommaire de :
JQuery

Par gerywa 25 juillet 2014