URL API

Der Großteil des URL-Standards befasst sich mit der Definition einer URL und wie diese strukturiert und geparst wird. Ebenfalls abgedeckt sind Definitionen verschiedener Begriffe in Bezug auf die Adressierung von Computern in einem Netzwerk, und die Algorithmen zum Parsen von IP-Adressen und DOM-Adressen sind spezifiziert. Für die meisten Entwickler interessanter ist die API selbst.

Das Erstellen eines URL-Objekts für eine gegebene URL parst die URL und ermöglicht den schnellen Zugriff auf ihre Bestandteile durch ihre Eigenschaften.

let addr = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL_API");
let host = addr.host;
let path = addr.pathname;

Der obige Ausschnitt erstellt ein URL-Objekt für den Artikel, den Sie gerade lesen, und ruft dann die host- und pathname-Eigenschaften ab. In diesem Fall sind diese Zeichenfolgen developer.mozilla.org und /de/docs/Web/API/URL_API.

Die meisten Eigenschaften von URL sind veränderbar; Sie können ihnen neue Werte zuweisen, um die von dem Objekt dargestellte URL zu ändern. Zum Beispiel, um eine URL zu erstellen und ihren Benutzernamen zu setzen:

let myUsername = "some-guy";
let addr = new URL("https://example.com/login");
addr.username = myUsername;

Das Setzen des Wertes der username-Eigenschaft aktualisiert nicht nur den Wert dieser Eigenschaft, sondern auch die gesamte URL. Nach der Ausführung des obigen Codeschnipsels ist der von href zurückgegebene Wert https://some-guy@example.com/login. Dies gilt für alle veränderbaren Eigenschaften.

Die search-Eigenschaft einer URL enthält den Abfragezeichenfolgen-Teil der URL. Wenn die URL beispielsweise https://example.com/login?user=some-guy&page=news lautet, dann ist der Wert der search-Eigenschaft ?user=some-guy&page=news. Sie können auch die Werte einzelner Parameter mit der Methode get() des URLSearchParams-Objekts abrufen:

let addr = new URL("https://example.com/login?user=some-guy&page=news");
try {
  loginUser(addr.searchParams.get("user"));
  gotoPage(addr.searchParams.get("page"));
} catch (err) {
  showErrorMessage(err);
}

In dem obigen Ausschnitt werden beispielsweise der Benutzername und die Zielseite aus der Abfrage entnommen und an entsprechende Funktionen übergeben, die vom Code der Website verwendet werden, um den Benutzer einzuloggen und zu seiner gewünschten Zielseite innerhalb der Website weiterzuleiten.

Andere Funktionen innerhalb von URLSearchParams ermöglichen es Ihnen, die Werte von Schlüsseln zu ändern, Schlüssel und ihre Werte hinzuzufügen und zu löschen und die Liste der Parameter sogar zu sortieren.

Die URL-API ist eine einfache API mit nur wenigen Schnittstellen:

URL

Kann verwendet werden, um URLs zu parsen, zu konstruieren, zu normalisieren und zu kodieren.

URLSearchParams

Definiert Hilfsmethoden zum Arbeiten mit der Abfragezeichenfolge einer URL.

Wenn Sie die in einer URL enthaltenen Parameter verarbeiten möchten, könnten Sie dies manuell tun, aber es ist viel einfacher, ein URL-Objekt zu erstellen, das dies für Sie erledigt. Die folgende Funktion fillTableWithParameters() nimmt als Eingabe ein HTMLTableElement-Objekt entgegen, das ein <table> darstellt. Der Tabelle werden Zeilen hinzugefügt, eine für jeden in den Parametern gefundenen Schlüssel, wobei die erste Spalte den Namen des Schlüssels enthält und die zweite Spalte den Wert enthält.

Beachten Sie den Aufruf von URLSearchParams.sort(), um die Parameterliste vor der Erzeugung der Tabelle zu sortieren.

function fillTableWithParameters(tbl) {
  const url = new URL(document.location.href);
  url.searchParams.sort();
  const keys = url.searchParams.keys();

  for (const key of keys) {
    const val = url.searchParams.get(key);
    const row = document.createElement("tr");
    const cell1 = document.createElement("td");
    cell1.innerText = key;
    row.appendChild(cell1);
    const cell2 = document.createElement("td");
    cell2.innerText = val;
    row.appendChild(cell2);
    tbl.appendChild(row);
  }
}

Eine funktionierende Version dieses Beispiels finden Sie auf Glitch. Fügen Sie der URL beim Laden der Seite einfach Parameter hinzu, um diese in der Tabelle anzuzeigen. Versuchen Sie beispielsweise https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable.

• Fetch API
• CSS <url> type
• encodeURI()
• encodeURIComponent()