devstory

Le Tutoriel de Javascript XMLHttpRequest

1- XMLHttpRequest

L'iInterface XMLHttpRequest en Javascript est conçu pour lire la source de données d'une URL. Son nom peut prêter à confusion car il ne peut lire que des sources de données texte/xml. En fait, il peut tout lire à partir d'une URL.
XMLHttpRequest est conçu pour lire la source de données de l'URL de manière synchrone (synchronous) ou asynchrone (asynchronous). La lecture asynchrone des données permet aux utilisateurs d'être toujours en mesure de manipuler le navigateur pendant que XMLHttpRequest lit à distance la source de données.
Si vous voulez lire des fichiers sur l'ordinateur de l'utilisateur, le FileReader est la chose dont vous avez besoin. Il est conçu de la même façon que XMLHttpRequest.

Constructor


// Create a XMLHttpRequest object:
 
var xhr = new XMLHttpRequest();
 

Properties

PropriétéDescription
readyStateRenvoie un numéro, décrit l'état d'avancement de la requête (request).
timeoutDéfinie la durée timeout maximale accordée à une requête pour quelle s'effectue complètement, si elle n’est pas reçue dans ce délai, elle est considérée comme un échec et se termine automatiquement.
withCredentialsSa valeur est true ou false (valeur par défaut est false). Si true signifie que cette requête peut utiliser des cookies, des authorization headers mais qu'elle doit toujours respecter la même politique d'origine.
responseTypeDéfinie la valeur que vous voulez recevoir. La valeur par défaut est "text". (Voir les valeurs possibles de cette propriété ci-dessous)
responseRenvoie un objet ArrayBuffer, Blob, Document, ou DOM String, selon la valeur de XMLHttpRequest.responseType qui contient la valeur de response.
responseTextRenvoie une DOM String qui contient le contenu de la réponse (response) sous forme de texte ou null nếu yêu cầu (request) si la demande a été rejetée ou n’a pas encore été envoyée.
responseURLRenvoie une serialized URL de la réponse (response) la chaîne vide si l’URL est nulle.
responseXMLRenvoie un objet Document contenant la réponse à la demande, ou null si la demande a échoué, n’a pas encore été envoyé, ou ne peut pas être analysé (parse) comme XML ou HTML.

statusRenvoie un numéro indiquant l’état de la réponse à la demande.
statusTextRenvoie une DOM String contenant la chaîne de réponse retournée par le serveur Http Server. Par exemple "200 OK".
readyState
Les valeurs possibles de readyState :
ÉtatValeurDescription
UNSENT0XMLHttpRequest a été créé mais open() n'a pas encore été appelé.
OPENED1open() a été appelé.
HEADERS_RECEIVED2send() a été appelé et headers & status sont disponibles.
LOADING3Téléchargement; responseText contient des données partielles.
DONE4L'opération est complète.
responseType
Les valeurs possibles de responseType :
ValeurDescription
""Si aucune valeur n’est spécifiée pour le responseType, ou la valeur vide, elle est traitée comme "texte".
"arraybuffer"La réponse (response) est un ArrayBuffer contenant des données binaires (binary data).
"blob"La réponse est un objet Blob contenant des données binaires.
"document"La réponse est un HTML Document ou XMLDocument, selon le type MIME (MIME type) des données reçues.
"json"La réponse est un objet JavaScript créé en analysant le contenu des données reçues en JSON.
"text"La réponse est du texte dans un objet DOMString.

Events

Lors de l'envoi d'une demande de lecture d'une source de données à partir d'une URL, XMLHttpRequest déclenche (fire) des événements décrits dans l'interface ProgressEvent.
Remarque : Les événements marqués par (?) sont standards de test, qui ne sont pas pris en charge par la plupart des navigateurs.

ÉvénementDescription
?loadstartIndique que le processus de chargement (load) des données a commencé. Cet événement se déclenche toujours en premier.

progressL’événement se déclenche plusieurs fois lorsque les données sont chargées, ce qui donne accès aux données intermédiaires.
?errorL’événement se déclenche lorsque le chargement est échoué.
?abortL'événement se déclenche lorsque le chargement des données a été annulé en appelant la méthode abort() (méthode disponible sur XMLHttpRequest & FileReader).

loadL'événement ne se déclenche que lorsque toutes les données ont été chargées avec succès.
?loadendL'événement se déclenche lorsque l'objet a terminé le transfert des données. L'événement se déclenche toujours après l'événement error, abort, ou load.
  • TODO Link!

Handlers

Remarque : Les gestionnaires (handler) marqués par (?) sont un standard de test, qui n'est pas supporté par la plupart des navigateurs.

Gestionnaire Description

onreadystatechange(event)Un gestionnaires (Handler), il est appelé lors que la propriété (property) readyState change.



?onloadstart(progressEvt)Un gestionnaire (handler) pour l'événement loadstart.

onprogress(progressEvt)Un gestionnaire (handler) pour l'événement progress.
?onerror(progressEvt)Un gestionnaire (handler) pour l'événement error.
?onabort(progressEvt)Un gestionnaire (handler) pour l'événement abort.

onload(progressEvt)Un gestionnaire (handler) pour l'événement load.
?onloadend(progressEvt)Un gestionnaire (handler) pour l'événement loadend.

Étapes à suivre pour travailler avec  XMLHttpRequest

2- Exemples avec XMLHttpRequest

Exemple d’utilisation de XMLHttpResponse pour lire une source de données XML donnée par une URL.
xhr-example.html
<!DOCTYPE html>
<html>

<head>
    <title>XMLHttpRequest Example</title>
    <meta charset="UTF-8">

    <script src="xhr-example.js"></script>

</head>

<body>

    <h3>XMLHttpRequest example</h3>
    <a href="">Reset</a> <br><br>

    <button onclick = "clickHandler(event)">Click Me</button>
    <br><br>

    <textarea id="textarea-log" cols="50" rows="15"></textarea>

</body>

</html>
 
xhr-example.js
function clickHandler(evt) {


    var URL= "https://rawgit.com/o7planning/webexamples/master/_testdatas_/simple-xml-data.xml";
    // var URL= "https://rawgit.com/o7planning/webexamples/master/_testdatas_/triceratops.png";

    resetLog();

    // Create XMLHttpRequest.
    let xhr = new XMLHttpRequest();


    appendLog("URL: " + URL);
    appendLog("\n\n");

    xhr.onprogress = function(progressEvent) {
        appendLog("onprogress! " + progressEvent);
    }

    // readyState (State of request):
    // 0 - XMLHttpRequest.UNSENT
    // 1 - XMLHttpRequest.OPENED
    // 2 - XMLHttpRequest.HEADERS_RECEIVED
    // 3 - XMLHttpRequest.LOADING
    // 4 - XMLHttpRequest.DONE
    xhr.onreadystatechange = function(event)  {
        appendLog("onreadystatechange! readyState = " + xhr.readyState);
        appendLog(" status = " + xhr.status);
        appendLog(" statusText = " + xhr.statusText);
    }

    xhr.onload = function(progressEvent) {
        appendLog("onload!");
        appendLog(" status = " + xhr.status);
        appendLog(" statusText = " + xhr.statusText);
        
        appendLog(" ------ xhr.responseText ------: ");
        appendLog(xhr.responseText);

        appendLog(" ------ xhr.responseXML -------: ");
        appendLog(xhr.responseXML); // [object XMLDocument]

        // Convert XMLDocument to String.
        var xmlString = (new XMLSerializer()).serializeToString(xhr.responseXML);
        appendLog(xmlString);

    }

    xhr.onerror = function(progressEvent) {
        appendLog("onerror!");
        appendLog("Has Error!");
    }

    let async = true;
    // Initialize It.
    xhr.open("GET", URL, async);

    // Send it (Without body data)
    xhr.send();
}

function resetLog() {
    document.getElementById('textarea-log').value = "";
}

function appendLog(msg) {
    document.getElementById('textarea-log').value += "\n" + msg;
}

 
Dans l'exemple ci-dessus, je ne mentionne pas la façon d'analyser le contenu XML (XMLDocument). Si vous êtes intéressé, veuillez vous référer aux autres articles ci-dessous : 
-
Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.