URL API

Der größte Teil des URL-Standards besteht aus der Definition einer URL und deren Strukturierung und Parsen. Auch Definitionen verschiedener Begriffe im Zusammenhang mit der Adressierung von Computern in einem Netzwerk werden behandelt, und die Algorithmen zum Parsen von IP-Adressen und DOM-Adressen sind spezifiziert. Für die meisten Entwickler ist die API selbst am interessantesten.

Das Erstellen eines URL-Objekts für eine gegebene URL parst die URL und bietet schnellen Zugriff auf ihre enthaltenen Teile über 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;

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

Die meisten Eigenschaften der URL sind veränderbar; Sie können neue Werte zu ihnen schreiben, um die von dem Objekt dargestellte URL zu ändern. Zum Beispiel, um eine URL zu erstellen und deren Benutzername festzulegen:

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

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

Die search-Eigenschaft einer URL enthält den Abfragezeichenfolgen-Teil der URL. Wenn die URL zum Beispiel https://example.com/login?user=some-guy&page=news ist, ist der Wert der search-Eigenschaft ?user=some-guy&page=news. Sie können auch die Werte einzelner Parameter mit der get()-Methode 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);
}

Zum Beispiel im obigen Snippet werden der Benutzername und die Zielseite aus der Abfrage entnommen und an die entsprechenden Funktionen weitergegeben, die vom Code der Website verwendet werden, um den Benutzer anzumelden und zu seiner gewünschten Zielseite innerhalb der Website zu leiten.

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

Die URL-API ist eine einfache mit nur ein paar Schnittstellen:

URL

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

URLSearchParams

Definiert Hilfsmethoden zur Arbeit mit der Abfragezeichenfolge einer URL.

Wenn Sie die in einer URL enthaltenden Parameter verarbeiten möchten, könnten Sie dies manuell tun, doch es ist viel einfacher, ein URL-Objekt dafür zu erstellen. Die Funktion fillTableWithParameters() unten nimmt ein HTMLTableElement-Objekt, das ein <table> darstellt, als Eingabe. 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 hat.

Beachten Sie den Aufruf von URLSearchParams.sort(), um die Parameterliste zu sortieren, bevor die Tabelle generiert wird.

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 einfach Parameter zur URL hinzu, wenn Sie die Seite laden, um diese in der Tabelle zu sehen. Versuchen Sie zum Beispiel https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable.

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