Entspricht $.fn.load ohne jQuery

Question 1

Ich möchte einige Jade-Inhalte auf Knopfdruck in ein bestimmtes div laden. Ich habe herausgefunden, wie man das mit jQuery macht, es gibt mehrere Beiträge dazu, und im Wesentlichen möchte ich Folgendes tun

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

Ich kann jQuery jedoch nicht in meinem Projekt verwenden. Gibt es eine entsprechende Funktion in Vanilla JavaScript?

Question 2

Ich denke, Sie können dies mit dem Folgenden tun;

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

Übrigens können Sie dies auch mit der Abruf-API tun.

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

Übrigens kann man lesen diesen Blogbeitrag um etwas über die Abruf-API zu lernen.

Question 3

Während ich versuchte, das gleiche Problem zu lösen, habe ich dies gemacht, das auf Ali BARINs Antwort basiert und großartig zu funktionieren scheint, aber eine etwas explizitere Version ist, fügt hinzu init Informationen und hat eine gewisse Logik zu verwenden document.getElementById anstatt 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

Sie können es so machen, aber es gibt etwas, worauf Sie dabei achten müssen.

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

Ich möchte, dass Sie darauf achten, wenn Sie eine URL zu einer Seite hinzufügen, von der sie zurückgegeben wird <html> Zu </html> als String, ich denke, es gibt keine Möglichkeit, sich davon wie eine Methode zu trennen .load() in jQuery.