API URL

API URL — это компонент стандарта URL, который определяет, что представляет собой допустимый указатель ресурса, и API, который предоставляет доступ к URL-адресам и позволяет их изменять. Стандарт URL также определяет понятия, такие как домены, хосты и IP-адреса, а также пытается описать стандартным способом устаревший application/x-www-form-urlencoded тип MIME, используемый для отправки содержимого веб-форм в виде набора пар ключ/значение.

Большая часть стандарта URL посвящена определению URL и его структуре и разбору. Также рассматриваются определения различных терминов, связанных с адресацией компьютеров в сети, и указаны алгоритмы разбора IP-адресов и адресов DOM. Большинство разработчиков больше интересует сам API.

Создание объекта URL для заданного URL-адреса анализирует URL и предоставляет быстрый доступ к его составным частям через его свойства.

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

В приведенном выше фрагменте кода создается объект URL для статьи, которую вы сейчас читаете, а затем извлекаются свойства host и pathname. В этом случае эти строки равны соответственно developer.mozilla.org и /en-US/docs/Web/API/URL_API.

Большинство свойств URL могут быть изменены; вы можете записать новые значения в них, чтобы изменить URL, представленный объектом. Например, чтобы создать URL и установить его имя пользователя:

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

Установка значения свойства username не только устанавливает значение этого свойства, но и обновляет весь URL. После выполнения приведенного выше фрагмента кода значение, возвращаемое href, равно https://some-guy@example.com/login. Это верно для любого из изменяемых свойств.

Свойство search объекта URL содержит часть строки запроса URL. Например, если URL-адрес равен https://example.com/login?user=some-guy&page=news, то значение свойства search равно ?user=some-guy&page=news. Вы также можете найти значения отдельных параметров с помощью метода get() объекта URLSearchParams:

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

Например, в приведенном выше фрагменте имя пользователя и целевая страница извлекаются из запроса и передаются соответствующим функциям, которые используются кодом сайта для входа в систему и перенаправления пользователя к желаемому месту назначения на сайте.

Другие функции в URLSearchParams позволяют изменить значения ключей, добавить и удалить ключи и их значения, а также отсортировать список параметров.

API URL — это простой API, с несколькими интерфейсами:

URL

Можно использовать для анализа, построения, нормализации и кодирования URL-адресов.

URLSearchParams

Определяет вспомогательные методы для работы со строкой запроса URL.

Если вы хотите обработать параметры, включенные в URL-адрес, вы можете сделать это вручную, но намного проще создать объект URL, чтобы он сделал это за вас. Функция fillTableWithParameters() ниже принимает в качестве входного значения объект HTMLTableElement, представляющий таблицу. Строки добавляются в таблицу, по одной на каждый ключ, найденный в параметрах; первый столбец содержит имя ключа, а второй столбец — значение.

Обратите внимание на вызов URLSearchParams.sort() для сортировки списка параметров перед генерацией таблицы.

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

Рабочая версия этого примера доступна на Glitch. Просто добавьте параметры в URL при загрузке страницы, чтобы увидеть их в таблице. Например, попробуйте https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable.

• Fetch API
• CSS тип значения URL
• encodeURI()
• encodeURIComponent()