Obtener HTML de URL en JavaScript

1. Utilice XMLHttpRequest() para obtener código HTML con una URL
2. Use jQuery para obtener código HTML con una URL

Uno puede ver fácilmente el código fuente de la página web utilizando las herramientas de desarrollo del navegador.

Pero la característica interesante que nos brinda JavaScript es que podemos obtener el código fuente de una página web diferente en nuestra página sin tener que visitar esa página. Esta publicación muestra varios métodos para lograr esto.

Utilice XMLHttpRequest() para obtener código HTML con una URL

La solicitud XML HTTP (XHR) sirve principalmente para recuperar datos de una URL sin actualizar la página. Por lo tanto, se pueden usar para obtener el código HTML de una página diferente.

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

En el ejemplo anterior, primero convertimos el objeto HTTP en una solicitud HTTP.

Luego inicializamos y enviamos la solicitud de obtención usando los métodos open() y send(). Imprimimos el código HTML cuando la respuesta está disponible.

Use jQuery para obtener código HTML con una URL

jQuery.ajax() se usa para realizar solicitudes HTTP asíncronas. Toma como argumento la URL para enviar solicitudes y settings (un conjunto de pares clave-valor).

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

En el ejemplo anterior, pasamos la URL para la solicitud HTTP y, si la solicitud es exitosa, imprimimos los datos devueltos (es decir, el código HTML de la página web).