Equivalente a $.fn.load sin jQuery

Question 1

Quiero cargar algo de contenido de Jade en un cierto div al hacer clic en el botón. Encontré cómo hacer esto con jQuery, hay varias publicaciones al respecto, y esencialmente lo que quiero hacer es

$('#div').load('/somePage');

Sin embargo, no puedo usar jQuery en mi proyecto. ¿Existe una función equivalente en Vanilla JavaScript?

Question 2

Creo que puedes hacer esto con lo siguiente;

var request = new XMLHttpRequest();

request.open('GET', '/somepage', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var resp = request.responseText;

    document.querySelector('#div').innerHTML = resp;
  }
};

request.send();

Por cierto, también puedes hacer esto con fetch API.

fetch('/somepage')
  .then(function(response) {
    return response.text();
  })
  .then(function(body) {
    document.querySelector('#div').innerHTML = body;
  });

Por cierto, puedes leer esta entrada de blog por aprender algo sobre la API de búsqueda.

Question 3

Mientras intentaba resolver el mismo problema, hice esto, que se basa en la respuesta de Ali BARIN, y parece funcionar muy bien, pero es una versión un poco más explícita, agregando init información, y tiene algo de lógica para usar document.getElementById en lugar de querySelector.

/*
 * Replicates the functionality of jQuery's `load` function, 
 * used to load some HTML from another file into the current one.
 * 
 * Based on this Stack Overflow answer:
 * https://stackoverflow.com/a/38132775/3626537
 * And `fetch` documentation:
 * https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
 * 
 * @param {string} parentElementId - The ID of the DOM element to load into
 * @param {string} htmlFilePath - The path of the HTML file to load
 */
const loadHtml = function(parentElementId, filePath) {
    const init = {
        method : "GET",
        headers : { "Content-Type" : "text/html" },
        mode : "cors",
        cache : "default"
    };
    const req = new Request(filePath, init);
    fetch(req)
        .then(function(response) {
            return response.text();
        })
        .then(function(body) {
            // Replace `#` char in case the function gets called `querySelector` or jQuery style
            if (parentElementId.startsWith("#")) {
                parentElementId.replace("#", "");
            }
            document.getElementById(parentElementId).innerHTML = body;

        });
};

Question 4

Puedes hacerlo así, pero hay algo a lo que tendrás que prestarle atención.

const getData = (url) => {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = function () {
      if (this.readyState === 4 && this.status === 200) {
        resolve(this.responseText);
      } else {
        reject(this.responseText);
      }
    };
    request.open("get", url, true);
    request.send();
  });
};

getData("Your URL")
  .then((resolve) => {
    console.log(resolve);
  })
  .catch((reject) => {
    console.error(reject);
  });

A lo que quiero que prestes atención es que si pones URL en una página, la devolverá <html> a </html> como cadena, supongo que no hay forma de separarse de él como método .load() en jQuery.

¿Ha sido útil esta solución?