oujood.com

jQuery AJAX La méthode ajax() exécuter une requête AJAX (HTTP asynchrone)

La méthode ajax() est la méthode la plus utilisée en jQuery, elle sert à exécuter une requête AJAX (HTTP asynchrone)

search |

Définition et Usage La méthode ajax()

jQuery cours tutorial

La méthode ajax() est utilisée pour exécuter une requête AJAX (HTTP asynchrone).
Cette fonction est sans doute celle que l'on  utilise le plus avec jQuery.
Toutes les méthodes de jQuery AJAX utilisent la méthode ajax(). Cette méthode est principalement utilisée pour les requêtes où les autres méthodes ne peuvent pas être utilisés.

Syntaxe

$.ajax({nom/valeur, nom/valeur, ... })

Les paramètres spécifie un ou plusieurs des paires nom/valeur de la requête AJAX.
Vous trouvez les noms et valeurs possibles dans le tableau ci-dessous :

Nom Valeur/Description
async Une valeur booléenne qui indique si la demande devrait être gérée asynchrone ou non. Valeur par défaut est true
beforeSend(xhr) Une fonction à exécuter avant d'envoyer la demande(la requête). Fonction appelée avant la requête.
cache Une valeur Booléen indiquant si le navigateur doit mettre en cache les pages demandées. Valeur par défaut est true
complete(xhr,status) Une fonction à exécuter lorsque la demande est terminée, peu importe le succès ou non.
contentType Le type de contenu utilisé lors de l'envoi de données vers le serveur. Valeur par défaut est: « application/x-www-form-urlencoded »
context Spécifie  la valeur de « this » pour toutes les fonctions de rappel AJAX liées
data Spécifie les données à envoyer au serveur . Données envoyées en GET.
dataFilter(data,type) Fonction utilisée pour gérer les données de réponse brut du XMLHttpRequest
dataType Le type de données attendu de la réponse du serveur.
  • xml: Retourne un document "eXtensible Markup Language"XML pouvant être réutilisé via jQuery.
  • html: Retourne un document "Hyper Text Markup Language"HTML comme du text sans mise en formee où les scripts sont interprétrés.
  • script: Retourne une réponse "JavaScript"JS comme du texte sans mise en forme.
  • json: Interpréte une réponse "JavaScript Object Notation"JSON et retourne un objet Javascript.
error(xhr,status,error) Une fonction à exécuter si la demande échoue (c'est-à-dire une Fonction appelée en cas d’erreur ).
Global Une valeur booléenne spécifiant ou non l'utilisation automatique des déclencheurs d’événements (vqleur  par défaut est true).
ifModified Autorise la réponse si et seulement si la réponse  a changé depuis la dernière requête (false par défaut).
jsonp Une chaîne de substitution de la fonction de rappel dans une requête jsonp
jsonpCallback Spécifie un nom pour la fonction de rappel dans une requête jsonp
password Spécifie un mot de passe à utiliser dans une requête HTTP d'authentification des accès.
processData Une valeur booléenne spécifiant si les données envoyées avec la demande devrait être transformée en une chaîne de requête. Valeur par défaut est true Option à passer en false si vous souhaitez envoyer des DOMDocuments
scriptCharset Spécifie le jeu de caractères de la demande
success(result,status,xhr) Une fonction à exécuter lorsque la demande réussit
timeout Redéfini le temps de réponse maximum.
 Le délai d'attente locale (en millisecondes) pour la requête
traditional Une valeur booléenne spécifiant ou non d'utiliser le style traditionnel de la sérialisation de param
type Le type de requête POST ou GET (GET par défaut).
url Spécifie l'URL pour envoyer la demande. Valeur par défaut est la page en cours
username Spécifie un nom d'utilisateur à utiliser dans une requête HTTP d'authentification des accès
xhr Fonction utilisée pour la création de l'objet XMLHttpRequest

Lors de l'utilisation de la méthode .Ajax() on aura à déterminez les trois paramètres de base :
 la méthode utilisée (POST ou GET), l’URL de la page appelée et l’action à effectuer comme suit:

Code

  Copier le code

<!DOCTYPE html> 
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX la méthode ajax()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body style="text-align:center;">

	<h1 style="color:green">www.oujood.com</h1>
	
	<h2>jQuery la méthode ajax()</h2>
	<script>
		$(document).ready(function(){
			$.ajax({
        type: "POST",
        url: "test1.txt",
        success:
    function(retour){
               alert("Données retournées : " + retour );
        }
});
		});
	</script>
</body>

</html>

Dans l'exemple suivant, lorsque vous cliquez sur le lien qui a la classe CSS "teste", le code HTML de la page liée à ce lien s’affiche dans la balise qui a l’id "content".

Code

  Copier le code

<!DOCTYPE html> 
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX la méthode ajax()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body style="text-align:center;">

	<h1 style="color:green">www.oujood.com</h1>
	
	<h2>jQuery la méthode ajax()</h2>
	<a href="test1.txt" class="teste">cliquer ici</a>
	<p id="content"></p>
	<script>
		$(document).ready(function(){
			$("a.teste").click(function() {
        $.ajax({
               type: "POST",
               url: $(this).attr("href"),
               success: function(retour){
                       $("#content").empty().append(retour);
               }
        });
        return false;
});
		});
	</script>
</body>

</html>

Récupérer les données envoyer par un formulaire

On peut aussi envoyer des données saisie dans un formulaire en AJAX lors de sa soumission.
Pour cela il faut créer une page php qui va récupérer et traiter les données envoyées par le formulaire et qu'on nomme "test1.php".

Voici le cde de la page test.php

  Copier le code

<?php
$name = htmlspecialchars($_POST["name"]);
$comment = htmlspecialchars($_POST["comment"]);
echo "Bonjour, $name. 
Votre commentaire a été reçu avec succès." . "<br>"; echo "Voici le commentaire que vous avez écrit : $comment"; ?>

Et le code de notre page qui contient le formulaire, dans notre cas les deux pages se trouve dans le même dossier:

Code

  Copier le code

<!DOCTYPE html> 
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery AJAX la méthode ajax()</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body style="text-align:center;">

	<h1 style="color:green">www.oujood.com</h1>
	
	<h2>jQuery la méthode ajax()</h2>
	<form class="test" action="test1.php">
	<label>Nom: <input type="text" name="name"></label>
        <label>Commentaire: <textarea cols="50" name="comment"></textarea></label>
        <input type="submit" value="Send">
	</form>
	<p id="content" style="border:solid 1px #000"></p>
	<script>
		$(document).ready(function(){
			$("form.test").submit(function() {
s = $("form.test").serialize();
$.ajax({
               type: "POST",
               data: s,
               url: $(this).attr("action"),
               success: function(retour){
                       $("#content").empty().append(retour);
               }
        });
return false;
 });
		});
	</script>
</body>

</html>

Note:  pour un formulaire, il faut le sérialiser comme le montre la seconde linge du code – cad récupérer tous les valeurs du formulaire – et passer ses données dans le paramètre data.

Voir La méthode serialize() pour en savoir plus

Voir aussi notre tutoriel Manipulation des Formulaires en PHP

Exemple Modifier le texte d'un élément div à l'aide d'une requête AJAX :

Dans cet exemple nous allons remplacer le contenu de l’élément div par le contenu d’un fichier texte.
Pour cela créez un fichier texte que vous placez sur votre serveur (local ou distant) , mettez y ce que vous voulez comme texte, nommez ce fichier « test.txt »
Puis et toujours sur votre serveur créez un fichier HTML nommez le « test.html » et mettez y le code suivant :

Sélectionner le code

  <!DOCTYPE html>
   <html lang="fr">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo </title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("div").load('test.txt');
    });
  });
  </script>
  </head>
  <body>
  <div><h2>Laissez AJAX changer ce
  texte</h2></div>
  <button>Changer le Contenu</button>
  </body>
  </html>

 



Par gerywa 25 juillet 2014 - mis à jour le 01 Mars 2022

Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

envoyer des mails en php

Envoyer des mails

la propriété border-top-left-radius

Définit la forme du coin supérieur gauche de la frontière

Les operateurs de javascript

Les opérateurs de js : Cours sur les opérateurs de js :Définition, utilisation et emploie.



Rentabilisez efficacement votre site

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