Développement web il3

HTTP & AJAX

HyperText Transfer Protocol

Codes de réponse

Méthodes HTTP (verbes)

idempotentes
sûres

Echanges HTTP

GET / HTTP/1.1[CRLF]
Host: www.cff.ch[CRLF]
Connection: close[CRLF]
User-Agent: Opera/9.20 (Windows NT 6.0; U; en)[CRLF]
Accept-Encoding: gzip[CRLF]
Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7[CRLF]
Cache-Control: no[CRLF]
Accept-Language: de,en;q=0.7,en-us;q=0.3[CRLF]
Referer: http://web-sniffer.net/[CRLF]
[CRLF]
HTTP Status Code:   HTTP/1.1 302 Found
Date:           Mon, 16 Nov 2009 08:01:35 GMT   
Server:         Apache  
Location:       http://www.sbb.ch/fr/   
Content-Length:     205 
Connection:     close   
Content-Type:       text/html; charset=iso-8859-1

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head><title>302 Found</title>
</head><body>
<h1>Found</h1>
<p>The document has moved <a href="http://www.sbb.ch/fr/">here</a>.</p>
</body></html>

HTTP

POST /login.jsp HTTP/1.1
Host: www.mysite.com
User-Agent: Mozilla/4.0
Content-Length: 27
Content-Type: application/x-www-form-urlencoded

userid=joe&password=guessme

AJAX : Historique

AJAX

L’objet XMLHttpRequest

XHR en JS

var xhr;
function createXMLHttpRequest() 
{
    if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) 
    {
        xhr = new XMLHttpRequest();
    }
}

XHR en jQuery avec load()

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("demo_test.txt");
  });
});
</script>
</head>

<body>
  <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
  <button>Get External Content</button>
</body>
</html>

XHR : propriétés et méthodes

Envoi de données

Envoi de données

MyXhr.open("GET", "fichier.xml", true);
MyXhr.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate, 
            post-check=0, pre-check=0");
MyXhr.setRequestHeader("Pragma", "no-cache");
MyXhr.setRequestHeader("Expires", "Wed, 09 Aug 2000 08:21:57 GMT");

Préférer GET, sauf

“GETorPOST”

Détails

Réponse en texte

Réponse en XML

<?xml version="1.0" ?>
<liste>
     <personne>
         <nom>Berger</nom>
         <prenom>Laurent</prenom>
     </personne>
     <personne>
         <nom>Borgo</nom>
         <prenom>Sébastien</prenom>
     </personne>
     <personne>
         <nom>Bux</nom>
         <prenom>Rémy</prenom>
     </personne>
</liste>

Réponse en JSON

{"nom": "Berger", "prénom": "Laurent"}
["zéro", 1, 2, 3]
[
  {"nom": "Berger", "prénom": "Laurent"},
  {"nom": "Borgo",  "prénom": "Sébastien"},
  {"nom": "Bux",    "prénom": "Rémy"}
]

« eval is Evil »

var users = JSON.parse(myXHR.responseText);
var myString = JSON.stringify(users);
var obj = jQuery.parseJSON('{"nom":"Berger"}');
alert(obj.nom);

Fetch API

fetch("https://api.site.com/data")
    .then(function(response) {
        return response.json()
    })
    .then(function(json) {
        console.log(json);
    })
    .catch(function(error) {
        console.error("erreur", error)
    })
async function getData() {
  try {
    const response = await fetch("https://api.site.com/data");
    const data = await response.json();
    console.log("Données reçues :", data);
  } catch (erreur) {
    console.error("Erreur :", erreur);
  }
}

Autres alternatives AJAX

Same Origin Policy (SOP)

Cross-Origin Resource Sharing (CORS)

Traitement d’erreurs

header("Status: Message d'erreur explicite", true, 400);
myXHR.getResponseHeader("Status");

Penser à l’utilisateur !

Bonnes pratiques d’utilisabilité

Sources