Obtenir le HTML à partir de l'URL en JavaScript

1. Utilisez XMLHttpRequest() pour obtenir le code HTML avec une URL
2. Utilisez jQuery pour obtenir le code HTML avec une URL

On peut facilement voir le code source de la page Web à l’aide des outils de développement du navigateur.

Mais la fonctionnalité intéressante que JavaScript nous offre est que nous pouvons obtenir le code source d’une page Web différente sur notre page sans avoir à visiter cette page. Cet article montre différentes méthodes pour y parvenir.

Utilisez XMLHttpRequest() pour obtenir le code HTML avec une URL

XML HTTP Request (XHR) sert principalement à récupérer des données à partir d’une URL sans rafraîchir la page. Ils peuvent donc être utilisés pour obtenir le code HTML d’une autre page.

function makeHttpObject() {
  if ('XMLHttpRequest' in window)
    return new XMLHttpRequest();
  else if ('ActiveXObject' in window)
    return new ActiveXObject('Msxml2.XMLHTTP');
}

var request = makeHttpObject();
request.open('GET', '/', true);
request.send(null);
request.onreadystatechange = function() {
  if (request.readyState == 4) console.log(request.responseText);
};

Dans l’exemple ci-dessus, nous faisons d’abord de l’objet HTTP une requête HTTP.

Ensuite, nous initialisons et envoyons la requête get en utilisant les méthodes open() et send(). Nous imprimons le code HTML lorsque la réponse devient disponible.

Utilisez jQuery pour obtenir le code HTML avec une URL

jQuery.ajax() est utilisé pour effectuer des requêtes HTTP asynchrones. Il prend comme argument l’URL pour envoyer les requêtes et les settings (un ensemble de paires clé-valeur).

$.ajax({
  url: '/',
  success: function(data) {
    console.log(data);
  }
});

Dans l’exemple ci-dessus, nous passons le URL pour la requête HTTP, et si la requête aboutit, nous imprimons les données renvoyées (c’est-à-dire le code HTML de la page Web).