Successfully reported this slideshow.
Your SlideShare is downloading. ×

ajax.pdf

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Présentation d'AJAX
AJAX est le rêve d'un développeur, car vous pouvez :
• Lire les données d'un serveur Web - après le ch...
Qu'est-ce qu'AJAX ?
AJAX = Un J avaScript A synchrone et X ML.
AJAX n'est pas un langage de programmation.
AJAX utilise si...
Comment fonctionne AJAX
Formateur Jaouad Assabbour
Advertisement
Advertisement
Advertisement
Upcoming SlideShare
test-formulaire-angular.pdf
test-formulaire-angular.pdf
Loading in …3
×

Check these out next

1 of 15 Ad
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

ajax.pdf

  1. 1. Présentation d'AJAX AJAX est le rêve d'un développeur, car vous pouvez : • Lire les données d'un serveur Web - après le chargement de la page • Mettre à jour une page Web sans recharger la page • Envoyer des données à un serveur Web - en arrière-plan Exemple AJAX expliqué La page HTML contient une section <div> et un <bouton>. La section <div> est utilisée pour afficher les informations d'un serveur. Le <bouton> appelle une fonction (s'il est cliqué). La fonction demande des données à un serveur Web et les affiche : Formateur Jaouad Assabbour
  2. 2. Qu'est-ce qu'AJAX ? AJAX = Un J avaScript A synchrone et X ML. AJAX n'est pas un langage de programmation. AJAX utilise simplement une combinaison de : • Un objet intégré au navigateur XMLHttpRequest (pour demander des données à un serveur Web) • JavaScript et HTML DOM (pour afficher ou utiliser les données) AJAX permet aux pages Web d'être mises à jour de manière asynchrone en échangeant des données avec un serveur Web en arrière-plan. Cela signifie qu'il est possible de mettre à jour des parties d'une page Web, sans recharger toute la page. Formateur Jaouad Assabbour
  3. 3. Comment fonctionne AJAX Formateur Jaouad Assabbour
  4. 4. Navigateurs modernes (Fetch API) Les navigateurs modernes peuvent utiliser l'API Fetch au lieu de l'objet XMLHttpRequest. L'interface Fetch API permet au navigateur Web de faire des requêtes HTTP aux serveurs Web. Si vous utilisez l'objet XMLHttpRequest, Fetch peut faire la même chose de manière plus simple. AJAX - L'objet XMLHttpRequest La clé de voûte d'AJAX est l'objet XMLHttpRequest. 1. Créer un objet XMLHttpRequest 2. Définir une fonction de rappel 3. Ouvrez l'objet XMLHttpRequest 4. Envoyer une requête à un serveur L'objet XMLHttpRequest Tous les navigateurs modernes prennent en charge l' objet XMLHttpRequest. L' objet XMLHttpRequest peut être utilisé pour échanger des données avec un serveur Web en arrière-plan. Cela signifie qu'il est possible de mettre à jour des parties d'une page Web, sans recharger toute la page. Créer un objet XMLHttpRequest Tous les navigateurs modernes (Chrome, Firefox, IE, Edge, Safari, Opera) ont un objet XMLHttpRequest intégré. Syntaxe pour créer un objet XMLHttpRequest : Formateur Jaouad Assabbour
  5. 5. Définir une fonction de rappel Une fonction de rappel est une fonction passée en paramètre à une autre fonction. Dans ce cas, la fonction de rappel doit contenir le code à exécuter lorsque la réponse est prête. Envoyer une demande Pour envoyer une requête à un serveur, vous pouvez utiliser les méthodes open() et send() de l'objet XMLHttpRequest : Exemple : Formateur Jaouad Assabbour
  6. 6. Accès à travers les domaines Pour des raisons de sécurité, les navigateurs modernes n'autorisent pas l'accès entre les domaines. Cela signifie que la page Web et le fichier XML qu'elle tente de charger doivent se trouver sur le même serveur. La propriété onload Avec l' objet XMLHttpRequest, vous pouvez définir une fonction de rappel à exécuter lorsque la demande reçoit une réponse. La fonction est définie dans la propriété onload de l'objet XMLHttpRequest: Fonctions de rappel multiples Si vous avez plusieurs tâches AJAX dans un site Web, vous devez créer une fonction pour exécuter l' objet XMLHttpRequest et une fonction de rappel pour chaque tâche AJAX. L'appel de fonction doit contenir l'URL et la fonction à appeler lorsque la réponse est prête. Formateur Jaouad Assabbour
  7. 7. La propriété onreadystatechange La propriété readyState contient le statut de XMLHttpRequest. La propriété onreadystatechange définit une fonction de rappel à exécuter lorsque le readyState change. La propriété status et les propriétés statusText contiennent le statut de l'objet XMLHttpRequest. Formateur Jaouad Assabbour
  8. 8. La fonction onreadystatechange est appelée chaque fois que readyState change. Lorsque readyState est égal à 4 et que l'état est égal à 200, la réponse est prête : Formateur Jaouad Assabbour
  9. 9. AJAX - XMLHttpRequest L'objet XMLHttpRequest est utilisé pour demander des données à un serveur. Envoyer une requête à un serveur Pour envoyer une requête à un serveur, on utilise les méthodes open() et send() de l' objet XMLHttpRequest : L'url - Un fichier sur un serveur Le paramètre url de la méthode open() est une adresse vers un fichier sur un serveur : Formateur Jaouad Assabbour
  10. 10. Le fichier peut être n'importe quel type de fichier, comme .txt et .xml, ou des fichiers de script de serveur comme .asp et .php (qui peuvent effectuer des actions sur le serveur avant de renvoyer la réponse). Asynchrone - Vrai ou Faux ? Les requêtes du serveur doivent être envoyées de manière asynchrone. Le paramètre async de la méthode open() doit être défini sur true : En envoyant de manière asynchrone, le JavaScript n'a pas à attendre la réponse du serveur, mais peut à la place : • exécuter d'autres scripts en attendant la réponse du serveur • traiter la réponse une fois que la réponse est prête OBTENIR ou POSTER ? GET est plus simple et plus rapide que POST, et peut être utilisé dans la plupart des cas. Cependant, utilisez toujours les requêtes POST lorsque : • Un fichier en cache n'est pas une option (mettre à jour un fichier ou une base de données sur le serveur). • Envoi d'une grande quantité de données au serveur (POST n'a pas de limitation de taille). Formateur Jaouad Assabbour
  11. 11. • En envoyant des entrées utilisateur (qui peuvent contenir des caractères inconnus), POST est plus robuste et sécurisé que GET. Requêtes GET Une simple demande GET : Dans l'exemple ci-dessus, vous pouvez obtenir un résultat mis en cache. Pour éviter cela, ajoutez un identifiant unique à l'URL : Si vous souhaitez envoyer des informations avec la méthode GET, ajoutez les informations à l'URL : La manière dont le serveur utilise l'entrée et la manière dont le serveur répond à une requête est expliquée dans un chapitre ultérieur. Demandes POST Une simple demande POST : Formateur Jaouad Assabbour
  12. 12. Pour POSTER des données comme un formulaire HTML, ajoutez un en-tête HTTP avec setRequestHeader(). Spécifiez les données que vous souhaitez envoyer dans la méthode send() : Requête synchrone Pour exécuter une requête synchrone, changez le troisième paramètre de la méthode open() en false: Parfois async = false sont utilisés pour des tests rapides. Vous trouverez également des requêtes synchrones dans l'ancien code JavaScript. Formateur Jaouad Assabbour
  13. 13. Étant donné que le code attendra la fin du serveur, aucune fonction onreadystatechange n'est nécessaire : AJAX - Réponse du serveur Propriétés de la réponse du serveur La propriété responseText La propriété responseText renvoie la réponse du serveur sous forme de chaîne JavaScript et vous pouvez l'utiliser en conséquence : Formateur Jaouad Assabbour
  14. 14. La propriété responseXML L'objet XMLHttpRequest a un analyseur XML intégré. La propriété responseXML renvoie la réponse du serveur sous la forme d'un objet DOM XML. À l'aide de cette propriété, vous pouvez analyser la réponse en tant qu'objet DOM XML : Méthodes de réponse du serveur La méthode getAllResponseHeaders() La méthode getAllResponseHeaders() renvoie toutes les informations d'en- tête de la réponse du serveur. Formateur Jaouad Assabbour
  15. 15. La méthode getResponseHeader() La méthode getResponseHeader() renvoie des informations d'en-tête spécifiques à partir de la réponse du serveur. Exemple XMLAJAX Formateur Jaouad Assabbour

×