ajax (asynchronous javascript and xml)

Click here to load reader

Post on 24-May-2015

1.316 views

Category:

Documents

3 download

Embed Size (px)

DESCRIPTION

Ajax (Asynchronous JavaScript and XML) est une technique permettant la communication asynchrone entre application et serveur. c'est une architecture qui permet de construire des applications Web et des sites web dynamiques interactifs sur le poste client en se servant de différentes technologies. Ajax combine JavaScript, les CSS, XML, le DOM et le XMLHttpRequest afin d'améliorer maniabilité et confort d'utilisation des Applications Internet Riches

TRANSCRIPT

  • AJAX

    ASYNCHRONOUS JAVASCRIPT AND XML

    Abdelouahed Sabri

    [email protected]

    2012/2013

  • INTRODUCTION

    Ajax:

    1. Communication asynchrone avec le serveur

    2. Rcupration de donnes (texte ou XML) partir du

    serveur

    3. Mise jours de la prsentation Web

    1 et 2 XMLHttpRequest

    3 DOM

    2

  • INTRODUCTION

    XMLHttpRequest

    XMLHttpRequest est un objet ActiveX ou JavaScript qui permetd'obtenir des donnes au format XML, JSON ou texte simple l'aidede requtes HTTP.

    Son rle est:

    1. Deffectuer des requtes HTTP internes, invisibles et asynchrones

    2. De traiter la rponse

    Historique

    1998: dvelopp par Microsoft, en tant qu'objet ActiveX pour InternetExplorer 5 IE 7 sous le nom MSXML

    Plusieurs versions ont ts proposes: Microsoft.XMLHTTP, MSXML2.XMLHTTP, MSXML2.XMLHTTP.3.0, MSXML2.XMLHTTP.4.0, MSXML2.XMLHTTP.5.0, MSXML2.XMLHTTP.6.0

    2002: implmentation sous Mozilla sous le nom XMLHttpRequest

    2004: implmentation sous Safari

    2005: implmentation sous Opra et Konqueror

    2007: Standardisation par W3C

    2008: Microsoft propose XDomainRequest depuis Internet Explorer 8

    3

  • XMLHTTPREQUEST

    Codage JavaScript

    Pour les versions dInternet Explorer antrieur 7, le

    constructeur est obtenu travers un composant ActiveX

    Microsoft.XMLHTTP ou Msxml2.XMLHTTP

    Pour les versions IE 7, Mozilla, Firefox, Safari, Opra, on

    utilise lobjet natif XMLHttpRequest

    il faut toujours faire un test sur la version de lexplorateur

    Web avant linstanciation

    4

  • XMLHTTPREQUEST

    Codage JavaScript

    Exemple: Tester quelle version est supporte par le

    navigateur

    5

    function TestXHR() {

    if (XMLHttpRequest) { // ou (window.XMLHttpRequest)

    alert("Il faut utiliser lobjet natif XMLHttpRequest");

    }

    else if (ActiveXObject) {// ou (window.ActiveXObject)

    alert("Il faut utiliser le composant ActiveX Microsoft.XMLHTTP ou Msxml2.XMLHTTP");

    }

    else {

    alert("Votre navigateur ne supporte pas XMLHTTPRequest");

    }

    }

  • XMLHTTPREQUEST

    Codage JavaScript

    Exemple: Instanciation de lobjet

    6

    function TestXHR() {

    if (window.XMLHttpRequest) {

    var xhr = new XMLHttpRequest();

    }

    else if (window.ActiveXObject) {

    try {

    var xhr = new ActiveXObject("Microsoft.XMLHTTP");

    }

    catch (e) {

    var xhr = new ActiveXObject("Msxml2.XMLHTTP");

    }

    }

    else {

    alert("Votre navigateur ne supporte pas XMLHTTPRequest");

    }

    }

  • XMLHTTPREQUEST

    Mthodes:

    Open(mthode, URL, async[, user, password]):

    Ouvre la connexion avec le serveur.

    mthode: GET ou POST

    async: TRUE si le dialogue sera asynchrone et FALSE dans le cas

    contraire

    send(data)

    Dans le cas douverture de connexion avec la mthode GET, data prend

    null send(null)

    Dans le cas douverture de connexion avec POST, data peut contenir les

    donnes envoyer send("param1=val2&param2=val2")

    7

  • XMLHTTPREQUEST

    Mthodes (suite):

    Exemples

    8

    xhr.open("GET","ajax.php",true);

    xhr.send(null);

    xhr.open("GET","ajax.php?param1=5",true);

    xhr.send(null);

    xhr.open("POST","ajax.php",true);

    xhr.send(null);

    xhr.open("POST","ajax.php",true);

    xhr.send("pram=5&param2=7&param3=Fes");

  • XMLHTTPREQUEST

    Mthodes (suite):

    setRequestHeader(name, value)

    Assigne un entte HTTP la requte. Trs utile lors de louverture de

    connexion avec la mthode POST

    name: nom du header

    value: la valeur du header

    Exemple:xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    abort()

    Annule la requte.

    9

  • XMLHTTPREQUEST

    Proprits:

    readyState: retourne ltat de la requte 0: La requte nest pas initialise

    1: Dbut de transfert des donnes

    2: Les donnes sont envoyes

    3: Les donnes sont en cours de rception (partiellement accessibles)

    4: Les donnes sont compltement reus (accessibles)

    status: renvoie le code de la rponse du serveur 200: la requte est excute avec succs

    403: accs interdit (refus)

    404: fichier non trouv

    500: erreur interne au serveur

    responseText: contient la rponse de la requte au formattexte (chane de caractres)

    responseXML: contient la rponse de la requte au formatXML

    10

  • XMLHTTPREQUEST

    Evnement:

    onreadystatechange: vnement (fonction) qui se dclenche

    pour chaque changement de ltat de la requte (readyState)

    Exemple

    11

    function TestXHR() {

    if (window.XMLHttpRequest) {

    var xhr = new XMLHttpRequest();

    }

    xhr.onreadystatechange = function() {

    if (xhr.readyState == 4) {

    alert("Fichier transmis");

    }

    }

    xhr.open("GET", "db.xml", true);

    xhr.send(null);

    }

  • XMLHTTPREQUEST

    Exercice 1:

    Modifier le code en bas pour afficher dans une balise

    DIV le changement de la proprit readyState de

    lobjet XMLHttpRequest

    12

    function TestXHR() {

    if (window.XMLHttpRequest) {

    var xhr = new XMLHttpRequest();

    }

    xhr.onreadystatechange = function() {

    if (xhr.readyState == 4) {

    alert("Fichier transmis");

    }

    }

    xhr.open("GET", "db.xml", true);

    xhr.send(null);

    }

  • 13

    function TestXHR() {

    if (window.XMLHttpRequest)

    var xhr = new XMLHttpRequest();

    else alert("Votre navigateur ne supporte pas XMLHTTPRequest");

    var monDiv = document.getElementById("IdDiv");

    xhr.onreadystatechange = function() {

    monDiv.innerHTML += xhr.readyState +"
    ";

    }

    xhr.open("GET", "db.xml", true);

    xhr.send(null);

    }

  • XMLHTTPREQUEST

    Exercice 2:

    Modifier le code pour afficher le statut (status) de la

    requte utilisant une zone de texte. Tester avec un

    fichier non existant

    Utiliser un tableau (Array) pour afficher un message

    comme suit:

    200: la requte est excute avec succs

    403: accs interdit (refus)

    404: fichier non trouv

    500: erreur interne au serveur

    14

  • 15

    function TestXHR() {

    var xhrstatus = new Array();

    xhrstatus["200"]="la requte est excute avec succs";

    xhrstatus["403"]="accs interdit (refus)";

    xhrstatus["404"]="fichier non trouv";

    xhrstatus["500"] = "erreur interne au serveur";

    if (window.XMLHttpRequest)

    var xhr = new XMLHttpRequest();

    else alert("Votre navigateur ne supporte pas XMLHTTPRequest");

    var monDiv = document.getElementById("IdDiv");

    var monTxt = document.getElementById("IdText");

    xhr.onreadystatechange = function() {

    monDiv.innerHTML += xhr.readyState +"
    ";

    monTxt.value = xhrstatus[xhr.status];

    }

    xhr.open("GET", "db.xml", true);

    xhr.send(null);

    }

  • XMLHTTPREQUEST

    Exercice 3:

    Modifier le code pour afficher en popup le contenu

    dun fichier texte (db.txt)

    Utiliser la proprit responseText

    16

  • 17

    function TestXHR() {

    var xhrstatus = new Array();

    xhrstatus["200"]="la requte est excute avec succs";

    xhrstatus["403"]="accs interdit (refus)";

    xhrstatus["404"]="fichier non trouv";

    xhrstatus["500"] = "erreur interne au serveur";

    if (window.XMLHttpRequest)

    var xhr = new XMLHttpRequest();

    else alert("Votre navigateur ne supporte pas XMLHTTPRequest");

    var monDiv = document.getElementById("IdDiv");

    var monTxt = document.getElementById("IdText");

    xhr.onreadystatechange = function() {

    monDiv.innerHTML += xhr.readyState +"
    ";

    monTxt.value = xhrstatus[xhr.status];

    if (xhr.readyState == 4 && xhr.status == 200) {

    alert(xhr.responseText);

    }

    xhr.open("GET", "db.txt", true);

    xhr.send(null);

    }

  • XMLHTTPREQUEST

    Exercice 4:

    Modifier le code pour afficher en pop-up le contenu

    dun fichier XML (db.xml)

    Utiliser la proprit responseXML

    18

  • 19

    function TestXHR() {

    var xhrstatus = new Array();

    xhrstatus["200"]="la requte est excute avec succs";

    xhrstatus["403"]="accs interdit (refus)";

    xhrstatus["404"]="fichier non trouv";

    xhrstatus["500"] = "erreur interne au serveur";

    if (window.XMLHttpRequest)

    var xhr = new XMLHttpRequest();

    else alert("Votre navigateur ne supporte pas XMLHTTPRequest");

    var monDiv = document.getElementById("IdDiv");

    var monTxt = document.getElementById("IdText");

    xhr.onreadystatechange = function() {

    monDiv.innerHTML += xhr.readyState +"
    ";

    monTxt.value = xhrstatus[xhr.status];

    if (xhr.readyState == 4 && xhr.status == 200) {

    alert(xhr.responseXML);

    }

    xhr.open("GET", "db.xml", true);

    xhr.send(null);

    }

  • XMLHTTPREQUEST

    Autres mthodes

    getAllResponseHeaders()

    Permet de rcuprer lentte HTTP de la rponse sous la forme

    dune chane de caractres

    On y trouve:

    Nom du serveur

    Taille du contenu

    Le type du contenu

    getResponseHeader("nom du paramtre dentte HTTP")

    Permet de rcuprer une valeur dun paramtre dentte HTTP

    prcis

    sxhr.getResponseHeader("Content-type")20

  • APPLICATIONS

    Fichier Texte Crer une page Web contenant un bouton et un lment div

    Sur le serveur, crer un fichier texte. Le fichier texte contient

    la phrase:

    S