XMLHttpRequest (XHR)

L'introduction de XMLHttpRequest (XHR) dans les navigateurs au milieu des années 2000 a été une énorme victoire pour la plate-forme Web. Voyons voir comment ça fonctionne.

introduction

L'introduction de XMLHttpRequest (XHR) dans les navigateurs au milieu des années 2000 a été une énorme victoire pour la plate-forme Web. Voyons voir comment ça fonctionne.

Les choses qui semblaient maintenant normales, à l'époque, semblaient venir du futur. Je parle de GMail ou de Google Maps, par exemple, qui étaient tous basés en grande partie sur XHR.

XHR a été inventé chez Microsoft dans les années 90 et est devenu une norme de facto car tous les navigateurs l'ont implémenté dans la période 2002-2006. Le XMLHttpRequest normalisé du W3C en 2006.

Comme cela peut parfois arriver dans la plate-forme Web, il y avait au départ quelques incohérences qui rendaient le travail avec XHR assez différent entre les navigateurs.

Les bibliothèques comme jQuery ont gagné en popularité en fournissant une abstraction facile à utiliser pour les développeurs, ce qui a contribué à diffuser l'utilisation de cette technologie.

Un exemple de requête XHR

Le code suivant crée un objet de requête XMLHttpRequest (XHR) et attache une fonction de rappel qui répond sur leonreadystatechangeun événement.

La connexion xhr est configurée pour exécuter une requête GET pourhttps://yoursite.com, et cela a commencé avec lesend()méthode:

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    xhr.status === 200 ? console.log(xhr.responseText) : console.error('error')
  }
}
xhr.open('GET', 'https://yoursite.com')
xhr.send()

Paramètres open () supplémentaires

Dans l'exemple ci-dessus, nous venons de transmettre la méthode et l'URL à la requête.

Nous pouvons également spécifier les autres méthodes HTTP - (get,post,head,put,delete,options).

D'autres paramètres vous permettent de spécifier un indicateur pour rendre la demande synchrone si elle est définie sur false, et un ensemble d'informations d'identification pour l'authentification HTTP:

open(method, url, asynchronous, username, password)

onreadystatechange

Leonreadystatechangeest appelé plusieurs fois lors d'une demande XHR. Nous ignorons explicitement tous les états autres quereadyState === 4, ce qui signifie que la demande est terminée.

Les états sont

  • 1 (OUVERT): la requête démarre
  • 2 (HEADERS_RECEIVED): les en-têtes HTTP ont été reçus
  • 3 (LOADING): la réponse commence à se télécharger
  • 4 (DONE): la réponse a été téléchargée

Annulation d'une demande XHR

Une demande XHR peut être abandonnée en appelant leabort()méthode sur lexhrobjet.

Comparaison avec jQuery

Avec jQuery, ces lignes peuvent être traduites en:

$.get('https://yoursite.com', data => {
  console.log(data)
}).fail(err => {
  console.error(err)
})

Comparaison avec Fetch

Avec leRécupérer l'APIc'est le code équivalent:

fetch('https://yoursite.com')
  .then(data => {
    console.log(data)
  })
  .catch(err => {
    console.error(err)
  })

Demandes inter-domaines

Notez qu'une connexion XMLHttpRequest est soumise à des limites spécifiques qui sont appliquées pour des raisons de sécurité.

L'une des plus évidentes est l'application de la même politique d'origine.

Vous ne pouvez pas accéder aux ressources sur un autre serveur,à moins quele serveur prend explicitement en charge cela en utilisantCORS (partage de ressources inter-origines).

Téléchargement de fichiers à l'aide de XHR

Consultez mon tutoriel surcomment télécharger des fichiers à l'aide de XHR.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de didacticiels sur le navigateur:


Tech Wiki en ligne!