oujood.com

jQuery AJAX

Query possède une riche bibliothèque de méthodes (fonctions) pour le développement d’AJAX
jQuery possède une riche bibliothèque de méthodes (fonctions) pour le développement d’AJAX.

chercher |

jQuery AJAX

Les différents navigateurs mettent en œuvre Ajax différemment, ce qui signifie que si vous adoptez la méthode typique de JavaScript pour mettre en œuvre Ajax, vous devez écrire un code différent pour les différents navigateurs afin de vous assurer que Ajax fonctionne sur tous les navigateurs.
Mais, heureusement, jQuery simplifie le processus de mise en œuvre d'Ajax en prenant soin de ces différences de navigateur. Il propose des méthodes simples telles que load(), $.get(), $.post(), etc. pour mettre en œuvre un Ajax qui fonctionne de manière transparente sur tous les navigateurs.
Dans les prochains chapitres, vous apprendrez à charger des données depuis le serveur ainsi qu'à envoyer et recevoir des données à l'aide des méthodes HTTP GET et POST via jQuery Ajax.

Remarque : Les requêtes Ajax sont déclenchées par le code JavaScript ; votre code envoie une requête à une URL, et lorsque la requête est terminée, une fonction de rappel peut être déclenchée pour traiter la réponse. De plus, comme la demande est asynchrone, le reste de votre code continue à s'exécuter pendant que la demande est traitée.

jQuery la méthode load()

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 ()

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 :

Code

  Copier le code

  AJAX n'est pas un langage de programmation.<br>
C'est juste une technique pour créer de<br /> meilleurs applications web  et plus interactif.

Placer le fichier texte dans votre serveur dans le même dossier que le fichier html de l'exemple suivant:

Avertissement: Il faut que les deux fichiers soit placés dans un serveur web, si non ajax ne fonctionne pas!

Sélectionner le code


<!DOCTYPE html> 
 <html lang="en">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX</title>
<script src = " http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js " ></script>
<script>
$(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>

 

En outre, la fonction de rappel peut avoir trois paramètres différents :

responseTxt - Contient le contenu résultant si la demande aboutit.
statusTxt - Contient l'état de la demande (succès ou erreur).
jqXHR - Contient l'objet XMLHttpRequest.

Voici la version modifiée de l'exemple précédent qui affichera le message de réussite ou d'erreur à l'utilisateur en fonction de l'état de la demande.

Code

  Copier le code

<!DOCTYPE html> 
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div.teste").load('test1.txt', function(responseTxt, statusTxt, jqXHR){
            if(statusTxt == "success"){
                alert("Votre nouveau contenu chargé avec succès!");
            }
            if(statusTxt == "error"){
                alert("Erreur: " + jqXHR.status + " " + jqXHR.statusText);
            }
       });
  });
});
</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>

jQuery la méthode .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="fr">
<head>
<meta charset="utf-8">
    <title>jQuery la méthode .ajax()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script>
  $(document).ready(function(){
  $("button").click(function(){
    $.ajax({url:"test1.txt", success:function(result){
      $("div h2").html(result);
    }});
  });});
  </script>
  </head>
  <body>
  <h2>Ce texte ne sera pas changé</h2>
  <div><h2>Laissez AJAX changer ce
  texte</h2></div>
  <button>Changer le texle</button>
  </body>
  </html>

 

Remarque : Pour tester cet exemple Ajax, vous devez placer les fichiers HTML sur un serveur web. Vous pouvez mettre en place un serveur web local sur votre PC en installant WampServer ou XAMPP. Vous devez ouvrir le fichier de démonstration en utilisant "http://" car Ajax fait des requêtes HTTP.

Note : Les requêtes Ajax ne peuvent être faites que vers les fichiers qui existent sur le même serveur web que celui qui héberge la page à partir de laquelle la requête Ajax est envoyée, pas vers des serveurs externes ou distants pour des raisons de sécurité. C'est ce qu'on appelle la politique same-origin.

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

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web