HTML von URL abrufen in JavaScript

Mit Browser-Entwicklungstools kann man den Quellcode der Webseite leicht einsehen.

Aber das interessante Feature, das uns JavaScript bietet, ist, dass wir den Quellcode einer anderen Webseite auf unserer Seite erhalten können, ohne diese Seite besuchen zu müssen. Dieser Beitrag zeigt verschiedene Methoden, um dies zu erreichen.

Verwendung von XMLHttpRequest() um HTML Code mit einer URL zu erhalten

XML HTTP Request (XHR) dient hauptsächlich dazu, Daten von einer URL abzurufen, ohne die Seite zu aktualisieren. Sie können also verwendet werden, um den HTML-Code von einer anderen Seite zu erhalten.

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);
};

Im obigen Beispiel machen wir das HTTP-Objekt zuerst zu einem HTTP-Request.

Dann initialisieren und senden wir die Abfrage mit den Methoden open() und send(). Wir drucken den HTML-Code, sobald die Antwort verfügbar ist.

Verwendung von jQuery zum Abrufen von HTML-Code mit einer URL

jQuery.ajax() wird verwendet, um asynchrone HTTP-Anfragen auszuführen. Es nimmt als Argument die URL zum Senden von Anfragen und Einstellungen (eine Reihe von Schlüssel-Wert-Paaren).

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

Im obigen Beispiel übergeben wir die URL für die HTTP-Anfrage, und wenn die Anfrage erfolgreich ist, drucken wir die zurückgegebenen Daten (d. h. den HTML-Code für die Webseite).