cpp

Классы URL и URLSearchParams

Класс URL описывает URL-адреса. Создать экземпляр класса позволяет следующий конструктор:

<Объект> = new URL(<URL-адрес>[, <Base>])

В первом параметре указывается абсолютный или относительный путь в виде строки:

let url = new URL('http://localhost/index.php');
console.log( url.toString() );
// "http://localhost/index.php"

Если в первом параметре указан относительный путь, то во втором параметре нужно задать абсолютный базовый путь, на основе которого будет создан полный путь:

let url = new URL('/index.php', 'http://localhost/test.php');
console.log( url.toString() );
// "http://localhost/index.php"

Во втором параметре вместо строки можно указать объект URL:

let base = new URL('http://localhost/test.php');
let url = new URL('/index.php', base);
console.log( url.toString() );
// "http://localhost/index.php"

Если создать объект не удалось, то генерируется исключение TypeError. Например, указать только относительный путь нельзя, нужно обязательно задать базовый путь:

let url = new URL('/index.php');
// TypeError: /index.php is not a valid URL.

Класс URL содержит следующие свойства:

  • href — полный путь в виде строки:
let url = 
    new URL('http://localhost:8080/index.php?x=5&y=3#metka');
console.log(url.href);
// "http://localhost:8080/index.php?x=5&y=3#metka"

Можно также воспользоваться методом toString():

console.log( url.toString() );
// "http://localhost:8080/index.php?x=5&y=3#metka"
  • origin — идентификатор протокола и имя хоста, вместе с номером порта (свойство доступно только для чтения):
console.log(url.origin); // "http://localhost:8080"
  • protocol — идентификатор протокола, включая символ двоеточие:
console.log(url.protocol); // "http:"
  • host — имя хоста, вместе с номером порта:
console.log(url.host); // localhost:8080
  • hostname — имя домена:
console.log(url.hostname); // localhost
  • port — номер порта:
console.log(url.port); // 8080
  • pathname — путь и имя файла:
console.log(url.pathname); // /index.php
  • search — строка параметров, указанная после знака "?" (включая этот знак):
console.log(url.search); // ?x=5&y=3
  • searchParams — содержит объект URLSearchParams, который позволяет получить доступ к строке параметров:
console.log( url.searchParams.toString() );
// x=5&y=3
  • hash — имя «якоря» (закладки) в документе, указанное после знака "#" (включая этот знак):
console.log(url.hash); // #metka
  • username — имя пользователя;
  • password — пароль пользователя:
let ftp = 
    new URL('ftp://user:123@localhost:21/index.php');
console.log(ftp.username); // user
console.log(ftp.password); // 123

Почти все свойства (кроме origin) доступны как для чтения, так и для записи:

let url = new URL('http://localhost');
console.log( url.toString() ); // "http://localhost/"
url.protocol = 'https:';
url.hostname = 'test.ru';
url.port = '8080';
url.pathname = '/index.php';
url.search = '?x=5&y=3';
url.hash = '#metka';
console.log( url.toString() );
// "https://test.ru:8080/index.php?x=5&y=3#metka"
url.host = 'localhost:8080';
console.log( url.toString() );
// "https://localhost:8080/index.php?x=5&y=3#metka"

Объект URLSearchParams, позволяющий получить доступ к строке параметров, содержит следующие методы:

  • toString() — возвращает все параметры в виде закодированной строки:
let url = new URL('http://localhost/index.php?x=5&y=3');
console.log( url.searchParams.toString() );
// x=5&y=3

Способы создания объекта URLSearchParams:

let url = new URL('http://localhost/index.php?x=5&y=3');
let params = new URLSearchParams(url.search);
console.log( params.toString() );              // x=5&y=3
let params2 = new URLSearchParams('?x=5&y=3');
console.log( params2.toString() );             // x=5&y=3
let params3 = new URLSearchParams('x=5&y=3');
console.log( params3.toString() );             // x=5&y=3
let params4 = new URLSearchParams();
console.log( params4.toString() );             // 
  • get(<Ключ>) — возвращает значение параметра с указанным именем. Если параметр не найден, то возвращается значение null:
let params = new URLSearchParams('x=5&y=3');
console.log( params.get('x') );              // 5
console.log( params.get('y') );              // 3
console.log( params.get('z') );              // null

Если параметров с указанным именем несколько, то вернет только первое значение:

let params = new URLSearchParams('x=5&x=3');
console.log( params.get('x') );              // 5
  • getAll(<Ключ>) — возвращает все значения параметра с указанным именем в виде массива. Если параметр не найден, то возвращается пустой массив:
let params = new URLSearchParams('x=5&x=3');
console.log( params.getAll('x') );          // Array [ "5", "3" ]
console.log( params.getAll('y') );          // Array [  ]
  • keys() — возвращает итератор, позволяющий перебрать все названия параметров:
let params = new URLSearchParams('x=5&y=3');
for ( let key of params.keys() ) {
   console.log( key + ' => ' + params.get(key) );
}
// x => 5
// y => 3
  • values() — возвращает итератор, позволяющий перебрать все значения параметров:
let params = new URLSearchParams('x=5&y=3');
for ( let value of params.values() ) {
   console.log( value );
}
// 5
// 3
  • entries() — возвращает итератор, позволяющий перебрать все названия и значения параметров:
let params = new URLSearchParams('x=5&y=3');
for ( let pair of params.entries() ) {
   console.log( pair[0] + ' => ' + pair[1] );
}
// x => 5
// y => 3

При использовании цикла for...of мы можем опустить вызов метода entries():

let params = new URLSearchParams('x=5&y=3');
for ( let pair of params ) {
   console.log( pair );
   console.log( pair[0] + ' => ' + pair[1] );
}
// Array [ "x", "5" ]
// x => 5
// Array [ "y", "3" ]
// y => 3
for ( let [key, value] of params ) {
   console.log( key + ' => ' + value );
}
  • forEach(<Функция>) — вызывает функцию для каждого параметра. Через первый параметр доступно значение, а через второй — название:
let params = new URLSearchParams('x=5&y=3');
params.forEach( function(value, key) {
   console.log( key + ' => ' + value );
});
// x => 5
// y => 3
  • has(<Ключ>) — возвращает значение true, если параметр с указанным именем существует, и false — в противном случае:
let params = new URLSearchParams('x=5&y=3');
console.log( params.has('x') );  // true
console.log( params.has('n') );  // false
  • set(<Ключ>, <Значение>) — задает новое значение для указанного параметра. Если параметр существует, то его значение будет заменено. Если параметр отсутствует, то он будет добавлен. Все специальные символы будут закодированы:
let params = new URLSearchParams('x=5&y=3');
params.set('x', '12');
params.set('txt', 'строка');
console.log( params.toString() );
// x=12&y=3&txt=%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B0
console.log( params.get('txt') );
// строка
  • append(<Ключ>, <Значение>) — добавляет параметр с указанным значением не изменяя значение одноименного существующего параметра. Если параметр отсутствует, то он будет добавлен. Все специальные символы будут закодированы:
let params = new URLSearchParams('x=5&y=3');
params.append('x', '12');
params.append('txt', 'строка');
console.log( params.toString() );
// x=5&y=3&x=12&txt=%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B0
console.log( params.get('txt') );
// строка
console.log( params.getAll('x') );
// Array [ "5", "12" ]
  • delete(<Ключ>) — удаляет все параметры с указанным именем:
let params = new URLSearchParams('x=5&y=3&y=10');
params.delete('y');
console.log( params.toString() );  // x=5

В листинге 3.14 мы создавали путь со строкой параметров следующим образом:

let txt1 = document.getElementById('txt1').value;
let txt2 = document.getElementById('txt2').value;
// ...
let url = '/ajax.php?txt1=' + encodeURIComponent(txt1);
url += '&txt2=' + encodeURIComponent(txt2);

Вместо передачи строки с URL, в первом параметре функции fetch() мы можем указать объект URL:

let txt1 = document.getElementById('txt1').value;
let txt2 = document.getElementById('txt2').value;
// ...
let url = new URL('/ajax.php', window.location.href);
url.searchParams.set('txt1', txt1);
url.searchParams.set('txt2', txt2);
// ...
let response = await fetch(url);

Использовать функцию encodeURIComponent() при этом не нужно. Все специальные символы будут закодированы. Например, если в первое поле ввести значение "12", а во второе — значение "тест", то путь будет выглядеть так (при базовом URL http://localhost/test.html):

console.log( url.toString() );
// "http://localhost/ajax.php?txt1=12&txt2=%D1%82%D0%B5%D1%81%D1%82"

Объект URL мы можем также передать методу open() объекта XMLHttpRequest, например, в листинге 3.10:

var url = new URL('/ajax.php', window.location.href);
url.searchParams.set('txt1', txt1);
url.searchParams.set('txt2', txt2);
// ...
var req = new XMLHttpRequest();
req.open('GET', url, true);

Следует помнить, что передачу строки и функцию encodeURIComponent() поддерживают все Web-браузеры, а вот объект URL доступен только в современных Web-браузерах.

На заметку

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

cpp