CM12 AJAX

Posté le 09/02/2025

Chargé de TD/CM : M. Zneika.

9 min de lecture

Pages : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

Page 1 : Mussab Zneika CY Cergy Paris Université 1Programmation WebAJAX

Page 2 : 2AJAX AJAX AJAX = Asynchronous JavaScript And XML Extensible Markup Language/langage de balisage extensible Différences entre XML et HTMLLe code HTML est spécifiquement fait pour concevoir des pages web à afficher dans les navigateurs. Le XML est destiné uniquement au transport et au stockage des données. Bien qu'il soit lisible par l'homme, il n'est pas destiné à être vu par le front-end.

Page 3 : 3AJAX AJAX Architecture informatique pour mettre à jour une page web côté client navigateur à partir d’informations du serveur sans la recharge de la page.Le terme "Asynchronous", signifie que l'exécution de JavaScript continue sans attendre la réponse du serveur qui sera traitée quand elle arrivera. Tandis qu'en mode synchrone, le navigateur serait gelé en attendant la réponse du serveur.

Page 4 : 4AJAX AJAX AJAX n'est pas un langage de programmation.AJAX utilise une combinaison de:HTML pour l'interface.CSS pour la présentation de la page.JavaScript pour les traitements locaux.DOM qui accède aux éléments de la page, du formulaire ou aux éléments d'un fichier XML chargé sur le serveur.PHP ou un autre langage de script peut être utilisé coté serveur.L'objet XMLHttpRequest lit les données ou les fichiers sur le serveur de façon asynchrone.

Page 5 : 5AJAX AJAX

Page 6 : 6AJAX AJAX 1.Un événement se produit2.Créer un objet XMLHttpRequest3.Envoyer HttpRequest4. Traiter la demande5. Créer une réponse et renvoyer les données vers la page Web4. Traiter la demande5. Créer une réponse et renvoyer les données vers la page Web6. Traiter les données retournées par JavaScript7. Mettre à jour le contenu de la page6. Traiter les données retournées par JavaScript7. Mettre à jour le contenu de la pageNavigateurNavigateurServeurComment fonctionne AJAX

Page 7 : 7AJAX AJAX L'objet XMLHttpRequest:La clé d'AJAX est l'objet XMLHttpRequest.Tous les navigateurs modernes prennent en charge l'objet XMLHttpRequest.Syntaxe pour créer un objet XMLHttpRequest: variable = new XMLHttpRequest; Exemple : var x = new XMLHttpRequest; Les anciennes versions d'Internet Explorer IE5 et IE6 utilisent un objet ActiveX. Syntaxe pour créer un objet ActiveXObjectvariable = new ActiveXObject"Microsoft.XMLHTTP";

Page 8 : 8AJAX AJAX L'objet XMLHttpRequest:if window.XMLHttpRequest xhr = new XMLHttpRequest; else xhr = new ActiveXObject"Microsoft.XMLHTTP";

Page 9 : 9AJAX AJAX XMLHttpRequest Propriétés:PropriétéDescriptionreadyStateLe code d'état passe successivement de 0 à 40: non initialisé1: connexion établie2: requête reçue3: réponse en cours 4: demande terminée et la réponse est prête statusRenvoie le numéro de statut d'une requête200: "OK"403: "Interdit"404: "introuvable"statusTextRenvoie le texte d'état par exemple, "OK" ou "Introuvable"

Page 10 : 10AJAX AJAX XMLHttpRequest Propriétés:PropriétéDescriptionresponseTextRenvoie les données de réponse sous forme de chaîne de caractèresresponseXMLRenvoie les données de réponse au format XMLonreadystatechangeDéfinit une fonction à appeler lorsque la propriété readyState est modifiée

Page 11 : 11AJAX AJAX Méthodes d'objet XMLHttpRequest :MéthodeDescriptionnew XMLHttpRequestCrée un nouvel objet XMLHttpRequestabortAnnule la demande en coursgetAllResponseHeadersRenvoie les informations d'en-têtegetResponseHeaderRenvoie des informations d'en-tête spécifiques

Page 12 : 12AJAX AJAX Méthodes d'objet XMLHttpRequest :MéthodeDescriptionopenmethod,url,async,user,pswmethod : type de requête, GET ou POSTurl : l'endroit où trouver les données, un fichier avec son chemin sur le disqueasync : true asynchrone / false synchroneEn option on peut ajouter un login user et un mot de passe pswsend"chaine" null pour une commande GETsetRequestHeaderAjoute une paire label/valeur à l'en-tête à envoyer

Page 13 : 13AJAX AJAX Envoyer une demande à un serveur:Pour envoyer une demande à un serveur, nous utilisons les méthodes open et send de l'objet XMLHttpRequest:xhr = new XMLHttpRequest;xhr.open"GET", "file.txt", true;xhr.send;GET ou POST ?En général, GET est plus simple et plus rapide que POST et peut être utilisé dans la plupart des cas. Toutefois, utilisez toujours les requêtes POST plus robuste et sécurisé lorsque vous voulez :mettre à jour un fichier ou une base de données sur le serveur.envoyer une grande quantité de données au serveur.envoyer une entrée d’utilisateur.

Page 14 : 14AJAX AJAX Envoyer une demande à un serveur:Exemple avec GET:xhr.open "GET", "page1.asp? nom = Zneika& prenom= Mussab", true;xhr.send ;Exemple avec POST:xhr.open "POST", "page1.asp ", true;xhr.send "nom = Zneika& prenom= Mussab";

Page 15 : 15AJAX AJAX Le traitement de la réponse et les traitements qui suivent sont inclus dans une fonction, et la valeur de retour de cette fonction sera assignée à l'attribut onreadystatechange.xhr.onreadystatechange = function if xhr.readyState == 4 // Reçu, OK // instructions de traitement de la réponseelse // Attendre...;

Page 16 : 16AJAX AJAX AJAX - Réponse du serveur:La propriété responseText renvoie la réponse du serveur sous forme de chaîne JavaScript et vous pouvez l'utiliser en conséquence :document.getElementById"elt1".innerHTML = xhr.responseText;La propriété responseXML renvoie la réponse du serveur sous forme d'objet XML DOM.xmlDom = xhr.responseXML;La fonction onreadystatechange est appelée chaque fois que le readyState est modifié.

Page 17 : 17AJAX AJAX Première étape : créer une instanceVar xhr;if window.XMLHttpRequest xhr = new XMLHttpRequest; else if window.ActiveXObject xhr = new ActiveXObject"Microsoft.XMLHTTP";Seconde étape : attendre la réponsefunction loadDoc xhr.onreadystatechange = function if this.readyState == 4 && this.status == 200 document.getElementById"demo".innerHTML =this.responseText; ;Troisième étape : faire la requête elle-mêmexhr.open"GET", "file1.txt", true; xhr.send;

Page 18 : 18AJAX AJAX Exemple 1 :html body div id="div1" h1 XMLHttpRequest Object/h1 button type="button" onclick="loadDoc"Changer le contenu/button /div script function loadDoc var xhr = new XMLHttpRequest; xhr.onreadystatechange = function if this.readyState == 4 && this.status == 200 document.getElementById"div1".innerHTML = this.responseText; ; xhr.open"GET", "file1.txt", true; xhr.send; /script /body /html

Page 19 : 19AJAX AJAX Exemple 2 :html body div id="div1" h1 XMLHttpRequest Object/h1 button type="button" onclick="loadDoc"Changer le contenu/button /div script function loadDoc var xhr = new XMLHttpRequest; xhr.onreadystatechange = function if this.readyState == 4 && this.status == 200 document.getElementById"div1".innerHTML = this.getAllResponseHeaders; ; xhr.open"GET", "file1.txt", true; xhr.send; /script /body /html

Page 20 : 20AJAX AJAX Exemple 3:Autre exemple Ajax. Lorsque vous déplacez la souris sur l'une de ces images, l'application affiche le texte décrivant cette image à l'aide de Ajax.

Page 21 : 21AJAX AJAX html body div id="div1" img src="img1.png" onmouseover="loadData'img1.txt'"/ img src="img2.png" onmouseover="loadData'img2.txt'"/ img src="img3.png "onmouseover="loadData'img3.txt'"/ /div script function loadDatafilename var xhr = new XMLHttpRequest; xhr.onreadystatechange = function if this.readyState == 4 && this.status == 200 document.getElementById"div1".innerHTML = this.responseText; ; xhr.open"GET", filename, true; xhr.send; /script /body /html

Page 22 : Mussab Zneika Université de Cergy Pontoise LP WS-322AJAX AJAX Formats de donnéesXML:produit code="AZ320" nomOrdinateur/nomprix750/prix/produitHTML h1Vos produits/h1ulli AZ320 /lili Ordinateur /li/ulJSON JavaScript Object Notation" code " : "AZ320"," nom " : " Ordinateur"," prix " : " 750 "

Page 23 : 23AJAX AJAX AJAX XML:inventaireproduit code="AZ320"nomOrdinateur/nomprix750/prix/produitproduit code="LM208"nomChaise/nomprix63/prix/produit /inventaire

Page 24 : 24AJAX AJAX var xhr = new XMLHttpRequest;xmlDoc = xhr.responseXML; txt = ""; x = xmlDoc.getElementsByTagName"nom"; for i = 0; i x.length; i++ txt += xi.childNodes0.nodeValue + "br"; document.getElementById"demo".innerHTML = txt; xhr.open"GET", "file.xml", true;xhr.send;

Page 25 : 25AJAX AJAX AJAX JSON :Extraire de l'objet JSON depuis la réponse à la requête AJAXVar reponse = JSON.parsexhr.responseText; "produits": "code": "AZ320", "nom": "Ordinateur", "prix": "750" , "code": "LM208", "nom": "Chaise", "prix": "63"

Page 26 : 26AJAX AJAX AJAX JSON :var xhr = new XMLHttpRequest; xhr.onreadystatechange = function if this.readyState == 4 && this.status == 200 var reponse = JSON.parsexhttp.responseText; var txt=""; for var i in reponse.produits txt=txt+reponse.produitsi.nom; document.getElementById"demo".innerHTML =txt; ; xhttp.open"GET", "file1.json", true; xhttp.send;

Page 27 : 27AJAX AJAX AJAX Avec PHP : GETform action="" Votre nom:input type="text" id="txt1"button type="button" onclick="loadDoc"Envoyer/button/form p: div id="div1"/div/p script function loadDoc var str= document.getElementById"txt1".value;var xhr = new XMLHttpRequest; xhr.onreadystatechange = function if this.readyState == 4 && this.status == 200 document.getElementById"div1".innerHTML = this. responseText;; xhr.open"GET", "file1.php?q="+str, true; xhr.send; /script ?php s=GET"q"; echo "Bonjour s"; ?

Page 28 : 28AJAX AJAX AJAX Avec PHP : POSTform action="" Votr nom:input type="text" id="txt1"button type="button" onclick="loadDoc"Envoyer/button/form p: div id="div1"/div/p script function loadDoc var str= document.getElementById"txt1".value;var xhr = new XMLHttpRequest; xhr.onreadystatechange = function if this.readyState == 4 && this.status == 200 document.getElementById"div1".innerHTML = this. responseText;; xhr.open"POST", "file2.php", true; s="nom="+str;xhr.setRequestHeader"Content-Type", "application/x-www-form-urlencoded"; xhr.sends; /script ?php var1 = POST"nom"; echo "Bonjour var1"; ?

Page 29 : 29AJAX AJAX AJAX avec PHP :Exemple: comment une page Web peut communiquer avec un serveur Web pendant qu'un utilisateur tape des caractères dans un champ de saisie.

Page 30 : 30AJAX AJAX AJAX avec PHP :Exemple : Partie HTMLform action="" Pays:input type="text" id="txt1“ onkeyup="Suggestionsthis.value"/form pSuggestions: div id="div1"/div/p

Page 31 : 31AJAX AJAX AJAX avec PHP: Exemple : Partie Javascriptfunction Suggestionsstr var xhttp; if str.length == 0 document.getElementById"div1".innerHTML = ""; return; xhttp = new XMLHttpRequest; xhttp.onreadystatechange = function if this.readyState == 4 && this.status == 200 document.getElementById"div1".innerHTML =this.responseText ; ; xhttp.open"GET", "pays.php?q="+str, true;xhttp.send;

Page 32 : 32AJAX AJAX AJAX avec PHP: Exemple: Partie PHPcountries = "Afghanistan","Albania","Algeria", …;q = REQUEST"q";res = "";if q !== "" q = strtolowerq;len=strlenq; foreachcountries as name if stristrq, substrname, 0, len if res === "" res = name; else res .= ", name"; echo res === "" ? "no suggestion" : res;

Page 33 : 33AJAX AJAX AJAX avec ASPnet : Votr nom: input type="text" id="txt1" button type="button" onclick="loadDoc"Envoyer/button p: div id="div1"/div/p script function loadDoc var str= document.getElementById"txt1".value; var xhr = new XMLHttpRequest; xhr.onreadystatechange = function if this.readyState == 4 && this.status == 200 document.getElementById"div1".innerHTML = this.responseText; ; xhr.open"GET", "page1.aspx?q="+str,true; xhr.send; /script

Page 34 : 34AJAX AJAX AJAX avec ASPnet: Page1.aspxhtml xmlns="http://www.w3.org/1999/xhtml" head runat="server" meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ title Titre /title /head body string nom = Request.QueryString"q"; Response.Write"Bonjour" + nom; /body /html

Page 35 : 35AJAX AJAX AJAX avec ASPnet : Exemple:

Page 36 : 36AJAX AJAX AJAX avec ASPnet : htmlbody h1 Somme de trois nombres /h1 N1= input type="text" id="txt1"br / N2= input type="text" id="txt2"br / N3= input type="text" id="txt3"br / button type="button" onclick="loadDoc"Envoyer/button p: div id="div1"/div/p script function loadDoc var str1 = document.getElementById"txt1".value; var str2 = document.getElementById"txt2".value; var str3 = document.getElementById"txt3".value; var xhr = new XMLHttpRequest; xhr.onreadystatechange = function if this.readyState == 4 && this.status == 200 document.getElementById"div1".innerHTML = this.responseText; ; xhr.open"GET", "page1.aspx?val1="+ str1+"&val2="+str2+"&val3="+str3, true; xhr.send; /script/body/html

Page 37 : 37AJAX AJAX AJAX avec ASPnet : Page1.aspx string var1 = Request.QueryString"val1"; string var2 = Request.QueryString"val2"; string var3 = Request.QueryString"val3"; int a1 = Int16.Parsevar1; int a2 = Int16.Parsevar2; int a3 = Int16.Parsevar3; int x = a1 + a2 + a3; Response.Write"somme= " +x;

Page 38 : SourcesPremiers pas avec AJAX https://openclassrooms.com/fr/courses/1631636-simplifiez-vos-developpements-javascript-avec-jquery/1636305-premiers-pas-avec-ajaxAJAX Introductionhttps://www.w3schools.com/xml/ajaxintro.asp38