Se Connecter
Contact

Cours en Devlopement Informatique

  • JQuery

Ajax JQuery


AJAX  est intégré à JQuery, via la fonction :

$.ajax({parametres});

 

Cette fonction retourne l’objet XMLHttpRequest qu’il créer

Les principaux paramètres de cette fonction sont :

  • type ⇒ GET, POST, PUT, DELETE (GET par défaut)
  • url ⇒ url vers laquelle la requête sera envoyée data ⇒ données à envoyer
  • dataType ⇒ type de données attendu en retour du serveur (xml, html, script, json, jsonp, text). S’il n’est pas spécifié, JQuery essayera de le déduire en s’appuyant sur le type MIME de la réponse.
$.ajax({parametres});

 

  • success ⇒ traitements à effectuer en cas de succès de la requête (retours HTTP 2..)
  • error ⇒ traitements à effectuer en cas d’erreur de la requête (retours HTTP 4.. ou 5..)
  • complete ⇒ fonction appelée à la fin de la requête (après exécution des services de succès et de retours d’erreurs)
$.ajax({
type: 'get' ,
url : ' simulateur .php',
data: 'mode=xml',
dataType: ’xml’,
success : function (dataXml, textStatus , jqXHR){
//La reponse du serveur est contenue dans 'dataXml'
//Coder les traitements a lancer en cas de succes ...
traitementEtabs(dataXml);
},
error : function (jqXHR, textStatus, errorThrown){
//Une erreur s ’ est produite lors de la requete
alert ( ’ERREUR retour serveur’);
}
});

 

AJAX - Exemple complet ajaxExemple1 jquery.html

 

<!DOCTYPE html> <html>
<head>
<meta http−equiv=”Content−Type” content=”text/html; charset=UTF 
	−8”>
<script type=”text/ javascript ” src=”js/jquery−1.8.3. js ”></script> 
<script type=”text/ javascript ” src=”ajaxExemple1 jquery.js”></script
>
</head>
<body>
<form name=”ajax” method=”POST” action=””> 
	<p>
<input type=”button” value=”Submit” onclick=”submitForm();”> 
</p>
<div id=”zoneModif”> 
	Texte de depart
</div>
</form>
</body>
</html>

 

AJAX - Exemple complet ajaxExemple1 jquery.js

 

function  submitForm() 
{
$.ajax({
type : ’ get ’ , 
url : ’ tab.html’ , 
dataType: ’ html’ ,
success : function (dataXml, textStatus ,  jqXHR){ 
//La  rponse  du serveur  est contenue dans ’dataXml’
document.getElementById(”zoneModif”).innerHTML = dataXml; 
},
error :  function (jqXHR, textStatus, errorThrown){ 
	//Une erreur s ’ est  produite  lors  de la   requte
document.getElementById(”zoneModif”).innerHTML =”Erreur: 
	code d’etat ” + errorThrown + ” ” + textStatus;
}
}) ;
}

 

AJAX - Exemple complet tab.html

 

<h1>Test Ajax</h1> 
<table border=”1”>
<tr colspan=”2”>Tableau</tr> 
<tr>
<td>colonne 1</td> 
	<td>colonne 2</td> 
</tr>
<table>

 

AJAX - GET

 

Autre méthode pour charger une page avec la méthode GET :

$.get(url, [data], [function(data, textStatus, jqXHR)
       ], [dataType]);
  • url ⇒ (obligatoire) url de la page à charger
  • data ⇒ (optionnel ) données à envoyer au serveur avec la requête
$.get(url, [data], [function(data, textStatus, jqXHR)
], [dataType]);

 

function(data, textStatus, jqXHR) ⇒ (optionnel ) fonction à exécuter lorsque les données de retours du serveur sont chargées avec succès

  • data ⇒ contient les données résultat de la requête textStatus ⇒ contient le statut de la requête (’success’, ’notmodified’, ’error’, ’timeout’ ou ’parsererror’)
  • jqXHR ⇒ contient l’objet XMLHttpRequest
  • dataType ⇒ (optionnel ) spécifie le format des données renvoyées par le serveur à la fonction précédente (xml, html, script, json, jsonp, text)
$.get(url, [data], [function(data, textStatus, jqXHR) 
	], [dataType]);

 

Valeur de retour ⇒ XMLHttpRequest

Fonction raccourcis ne permettant que le traitement des requêtes

Si vous devez appeler des fonctions pour les retours
’success’ et ’error’, vous devez utiliser la fonction $.ajax

AJAX - GET, exemple : 

$.get(
’ simulateur . php’, ’ mode=xml’,
function (data,  textStatus ,  jqXHR){ 
	traitementEtabs(data) ;
},
’ xml’
);

 

AJAX - POST

 

Autre méthode pour charger une page avec la méthode POST :

$.post(url, [data], [function(data, textStatus, jqXHR
       )], [dataType]);

 

 

Ajouter un commentaire

Veuillez vous connecter pour ajouter un commentaire.

Pas encore de commentaires.

Tutoriels JQuery

Cours

Exercices

QCM Informatique