jQuery AJAX la méthode load() charge les données d'un serveur à l'aide d'une requête AJAX

Définition et Usage la méthode load()

jQuery cours tutorial

Laméthode load() charge les données d'un serveur à l'aide d'une requête AJAX et place les données retournées dans l'élément sélectionné.

Note : Il existe aussi une méthode d'événement appelé load() de jQuery mais elle est désapprouvée ou dépréciée dans la version 1.8 de jQuery.

Syntaxe

$(selector).load(url,données,function(réponse,statut,xhr))

 

Paramètre

Description

URL

Obligatoire. Une chaîne contenant l'URL à laquelle la demande est envoyée.

données

Facultatif. Spécifie les données à envoyer au serveur avec la demande

function(réponse,Statut,xhr)

Facultatif. Spécifie la fonction à exécuter lorsque la demande se termine

Paramètres supplémentaires :

  • réponse - contient les données de résultat de la demande
  • statut - contient l'état de la demande ("success", "notmodified", " error", "timeout", or " parsererror")
  • xhr - contient l'objet XMLHttpRequest

La méthode load()  à peu près équivalent à $.get(url, data, success) sauf que c'est une méthode plutôt qu'une fonction globale, et elle a une fonction de rappel implicite. Lorsqu'une intervention réussie est détectée (c.-à-d. quand textStatus est ("success", "notmodified"), la méthode .load() définit les données retournées comme contenu HTML de l'élément correspondant. Cela signifie que la plupart des utilisations de la méthode peuvent être très simples comme suit:

$('sélecteur').load('test.html');

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

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
<title>Demo ajax</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
 
  $("button").click(function(){
   
  $("div").load('demo_ajax_load.txt');
 
  });
});
</script>
</head>
<body>
<h2>Laiser ajax faire le travail</h2>
<div></div>
<button>Executer</button>
</body>
</html>
  
 

 

Exemple Faire une requête AJAX et envoyer des données.

Comment utiliser le paramètre de données pour envoyer des données avec la requête AJAX

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
   
  <title>jQuery demo ajax post et ajax get </title>
<script type="text/javascript" src=
  "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
  </script>
<script>
$(document).ready(function(){
 
  $("input").keyup(function(){
   
  txt=$("input").val();
   
  $("span").load("demo_ajax_post.php",{suggest:txt});
 
  });
});
</script>
</head>
<body>
<p>Commencer
  à saisir le nom d'un animal dans la zone de texte suivante:</p>
Nom
  d'animal : <input type="text"/>
<p>Suggestions :
  <span></span></p>
<p>le
  fichier  "demo_ajax_load.php"
  utilisé dans cet exemple se trouve ici: (<a href="demo_ajax_post.txt"
  target="_blank">demo_ajax_load</a>) </p>
</body>
</html>
  
 

 

Dans les exemples qui suivent nous aurons besoin du fichier suivant :

livres cliquer pour le télécharger

Exemple Faire une requête  AJAX  et utiliser une fonction de rappel.

Comment utiliser le paramètre de fonction pour travailler avec le résultat de données de la requête AJAX.

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
   
  <title>jQuery demo ajax load</title>
<script type="text/javascript" src=
  "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
  </script>
<script>
$(document).ready(function(){
 
  $("button").click(function(){
   
  $("div").load("livres.xml",function(response,status){
     if (status=="success")
     {
     $("div").html("<ol></ol>");
    
  $(response).find("titre").each(function(){
       var txt1 =
  $(this).text();
 var txt2 = $(response).find("lien").text();
 var text = '<a href="'+txt2+'"
  target="_blank">'+txt1+'</a>'
       $('<li></li>').html(text).appendTo('ol');
       });
     alert("Il y a 
  "+$(response).find("titre").size()+"
  livres.\n Cliquez  sur le nom du livre
  pour voir l'offre le concernant.") 
     }
   
  });
 
  });
});
</script>
</head>
<body>
<h2>Des livres</h2>
<div></div>
<button>Execute</button>
<p><b>le
  fichier xml utilisé pour cet exemple est ici <a href="livres.xml" target="_blank">livres</a></b></p>
</body>
</html>
  
 

 

Exemple Faire une requête AJAX avec une erreur

Comment utiliser le paramètre de fonction pour traiter les erreurs dans une requête AJAX (en utilisant le paramètre XMLHttpRequest)..

Pour cela nous allons reprendre l’exemple ci-dessus et on va changer le script en faisant glisser une erreur dan le nom du fichier xml comme suit :

Sélectionner le code

<script>
$(document).ready(function(){
 
  $("button").click(function(){
   
  $("div").load("livre.xml",function(response,status,xhr){
     if (status=="success")
     {
     $("div").html("<ol></ol>");
    
  $(response).find("titre").each(function(){
       var txt1 =
  $(this).text();
var txt2 = $(response).find("lien").text();
var text = '<a href="'+txt2+'"
  target="_blank">'+txt1+'</a>'
       $('<li></li>').html(text).appendTo('ol');
       });
     alert("Il y a 
  "+$(response).find("titre").size()+"
  livres.\nCliquez sur le nom du livre pour voir l'ofre le concernant.\nMerci!")
     }else
     {
     $("div").html("An error occured: <br/>" + xhr.status + " " + xhr.statusText)
     }
   });
 });
});
</script>
  
 



Par gerywa 25 juillet 2014