Это пост №74 из серии, посвященный изучению JavaScript и его строительных компонентов. В процессе определения и описания основных элементов мы также поделимся некоторыми практическими правилами, которые мы используем при создании SessionStack, приложения JavaScript, которое должно быть надежным и высокопроизводительным, чтобы помочь компаниям оптимизировать цифровой опыт своих пользователей.

Введение

Поскольку многие люди используют JavaScript для создания веб-приложений, важно понимать динамику URL-адреса (унифицированного указателя ресурсов), который также можно назвать местоположением с гипертекстом и HTTP (протокол передачи гипертекста). URL (унифицированный загрузчик ресурсов) позволяет получать опубликованные ресурсы из Интернета.

URL-адрес — это адрес, указывающий на уникальную страницу. Он указывает на уникальный ресурс в Интернете. Например, вы можете получить изображения, веб-страницы (HTML) и документы CSS, указав действительный URL-адрес. Однако, если вы укажете неверный URL-адрес или место, куда были перемещены ресурсы, будет возвращена ошибка.

URL-адреса состоят из протокола (HTTP). И это протокол прикладного уровня, который позволяет передавать информацию между устройствами. Здесь клиент, которым обычно является веб-браузер, отправляет запросы, называемые HTTP запросами. Затем он связывается с веб-сервером и получает запрошенные ресурсы.

Давайте изучим объект местоположения JavaScript, его анатомию и то, как работают протоколы, сосредоточившись на HTTP.

Структура URL

URL-адрес состоит из полной информации для создания веб-адреса. Думайте об URL как о почтовом адресе. Почтовый адрес — это почтовая служба, которую вы хотите использовать. Доменное имя представляет город, в котором вы живете, порт — почтовый индекс, а путь к файлу — ваш дом. Параметры строки запроса — это дополнительная информация, такая как номер вашего здания.

Типы URL

Существует два основных типа URL-адресов: абсолютные и относительные URL-адреса. Разница между этими URL-адресами заключается в их формировании и использовании. Давайте изучим их.

Абсолютный URL

Абсолютный URL — это полный URL. Из приведенного выше примера URL-адреса мы видим, что у нас есть полный URL-адрес с протоколом, доменным именем и т. д. Неявные доменные имена //developer.mozilla.org/en-US/docs/Learn также классифицируются как абсолютные URL-адреса, поскольку браузер будет вызывать этот URL-адрес с тем же протоколом, что и используется для загрузки документа, содержащего этот URL. Другим примером абсолютного URL-адреса является неявное доменное имя /en-US/docs/Learn. Это в основном используется в HTML-документе.

Относительный URL

Относительный URL-адрес не является полным URL-адресом, поскольку он содержит только путь. Однако этот URL-адрес использует тот же протокол, субдомен и домен, что и страница, на которой он находится, поскольку он содержит только путь URL-адреса. Пример использования этого URL-адреса указывает на файлы в том же каталоге или загрузку HTML-страниц или связанных файлов.

Протокол

Первая часть URL — это схема. Схема описывает протокол, используемый для доступа к информации из Интернета. Для веб-ресурсов это может быть HTTP с SSL или без него.

Имя домена

Следующая часть URL — это полномочия. Полномочия — это доменное имя, которое указывает нам на веб-сервер или представляемый орган, откуда извлекается информация. В большинстве случаев доменное имя может быть строкой. Иногда используется IP-адрес, хотя это гораздо менее удобно.

Номер порта

Номер порта веб-URL используется для идентификации сетевой службы или процесса. Номер порта всегда связан с полномочиями URL (IP-адрес/домен). Определенные номера портов зарезервированы для идентификации конкретных служб, чтобы прибывающий пакет легко перенаправлялся работающему приложению. Например, HTTP использует порт 80, а порт 443 зарезервирован для HTTPS.

Путь

Путь к файлу — это расположение файла на веб-сервере. С помощью этой строки сервер точно знает, откуда взять файл, который запрашивает клиент.

Параметры запроса

Параметр запроса относится к дополнительным параметрам, используемым веб-сервером для выполнения дополнительных действий. Эти параметры состоят из пар ключ-значение, разделенных символом амперсанда (&). Например, при попытке получить изображение определенного идентификатора с веб-сервера вы получите что-то вроде этого.

?id1=image1&id2=image2

Объект местоположения JavaScript

Объект местоположения является свойством объекта окно и документ. Объект местоположения состоит из свойств, которые позволяют вам получать доступ и управлять документами с веб-ресурса. И в этом разделе мы рассмотрим объект местоположения, его свойства и методы.

Свойства

Свойства JavaScript включают набор значений, связанных с объектом Javascript. В этом разделе мы рассмотрим свойства объекта местоположения.

Истоки предков

Это свойство location.ancestorOrigin является доступным только для чтения свойством интерфейса местоположения, которое содержит в обратном порядке источники всех родительских контекстов просмотра документа, связанного с данным объектом местоположения.

Это свойство можно использовать для определения поведения документа в зависимости от того, какой сайт или список сайтов его обрамляют.

Хэш

Хэш location.hash URL-адреса возвращает идентификатор целевой страницы. Когда вы используете это свойство, оно возвращает hash, за которым следует идентификатор страницы.

Хост

Свойство узла location.host возвращает узел URL. Если номер порта URL-адреса не пуст, это свойство также возвращает точку с запятой : и номер порта.

Порт

С помощью свойства location.port вы можете напечатать только номер порта URL-адреса. Если URL-адрес не содержит явного номера порта, будет возвращена пустая строка ’’.

Имя хоста

Если вы хотите получить доступ только к имени хоста URL-адреса, вы можете использовать свойство hostname location.hostname. Обратите внимание, что это не возвращает номер порта.

Ссылка

Свойство href позволяет вам просматривать и управлять URL-адресом в Интернете. С помощью свойства location.href вы можете получить доступ к полному URL-адресу. Вы также можете изменить или изменить значение href. Например, вы можете использовать метод location.replace() для перенаправления href.

Происхождение

С помощью свойства location.origin вы можете распечатать происхождение представленного URL-адреса. Это свойство, доступное только для чтения, возвращает строку, содержащую сериализацию Unicode источника URL-адреса.

Путь

Свойство location.pathname позволяет вам получить доступ к пути вашего URL. Если путь пуст, будет возвращена пустая строка ””.

Протокол

С помощью свойства протокола location.protocol разработчики могут управлять схемой протокола интересующего URL-адреса.

Методы

Объекты JavaScript имеют множество методов, что позволяет легко управлять объектами и получать к ним доступ. Вот список методов определения местоположения в JavaScript.

Назначить

Метод назначения assign(URL) позволяет загружать и отображать ресурс по указанному URL-адресу. Например, когда пользователь пытается перейти по URL-адресу, вызывается метод assign(URL) для загрузки и отображения документа.

Если назначение не выполнено из-за нарушения безопасности, выдается DOMException из SECURITY_ERROR. Это может произойти, если источник вызова скрипта отличается от источника страницы.

Перезагрузить

Метод reload() перезагружает текущий URL. Этот метод вызывается, когда вы нажимаете кнопку обновления в браузере.

Заменить

С помощью кнопки замены replace() разработчики могут заменить текущий ресурс тем, который указан в URL-адресе. Отличие этого метода от метода assign(URL) в том, что после использования replace() текущая страница не будет сохранена в сеансе истории.

к строке

Метод toSting() является доступным только для чтения псевдонимом свойства location.href. С помощью этого метода вы можете напечатать строку полного интересующего URL.

Что такое интернет-протокол

Протокол — это набор правил или процедур для передачи данных. Интернет-протокол — это тип протокола, который определяет способ передачи и обмена данными через Интернет. Чтобы правильно общаться в любом месте, отправитель и получатель должны правильно понимать себя. Это касается и общения через Интернет. Поэтому отправитель и получатель должны обмениваться данными по одному и тому же протоколу через Интернет.

В интернет-коммуникациях данные разбиваются на пакеты данных — более мелкие биты. И причина этого в более быстрой передаче данных, которая будет невозможна, когда огромные данные отправляются кусками. Каждый сетевой протокол определяет, как эти пакеты данных организуются и отправляются через Интернет. Например, разные сети по всему миру имеют разную скорость передачи данных, это протокол, который управляет правилами для размера пакета данных, который должен быть отправлен.

Существуют различные типы интернет-протоколов. Набор интернет-протоколов обычно состоит из трех уровней.

Прикладной уровень

Прикладной уровень предоставляет пользовательские услуги, такие как форматирование сообщений, чтобы сообщение от пользователя имело формат, приемлемый для получателя. Это также облегчает передачу файлов через Интернет. Протоколы, отнесенные к прикладному уровню, следующие:

  • HTTP (протокол передачи гипертекста): этот протокол отвечает за передачу гипертекста через всемирную паутину (www).
  • Протокол передачи файлов (FTP): протокол передачи файлов управляет передачей файлов между клиентом и сервером по сети. Например, этот протокол управляет передачей файлов, таких как изображения и документы, через физические устройства, такие как компьютеры. Где один компьютер служит клиентом, а другой сервером.
  • SMTP (простой протокол передачи почты): простой протокол передачи почты обеспечивает бесперебойную передачу электронной почты (электронных сообщений). Поэтому, когда человек отправляет или получает электронное письмо, он общается с этим протоколом.
  • HTTPS (протокол безопасной передачи гипертекста): это расширение HTTP, использующее протокол SSL/TLS для аутентификации и шифрования.

Хотя это и другие протоколы, относящиеся к прикладному уровню, такие как сеть терминалов (TELNET) и протокол защищенной оболочки (SSH) и т. д. Давайте рассмотрим транспортный уровень.

Транспортный уровень

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

  • TCP (протокол управления передачей): протокол управления передачей ориентирован на установление соединения, что позволяет обмениваться данными в обоих направлениях. Таким образом, если произойдет ошибка, она будет передана отправителю.
  • UDP (протокол пользовательских дейтаграмм): протокол пользовательских дейтаграмм не требует установления соединения. Этот метод не позволяет проверять ошибки, а также снижает нагрузку на открытие и завершение соединения.

Интернет-уровень

Интернет-уровень обеспечивает плавную передачу сетевых пакетов на канальный уровень. Это делает возможным, отправляя данные по разным сетям посредством маршрутизации.

  • Интернет-протокол (IP): Интернет-протокол имеет две версии: v4 и v6. Но v4 - это первая версия. Интернет-протокол обращается к хост-интерфейсам и инкапсулирует данные в дейтаграммы.

Уровень канала передачи данных

Канальный уровень — это группа методов и методов связи в канале, который физически подключен к хосту. Например, протокол точка-точка (PPP) используется для создания прямого соединения между двумя взаимодействующими устройствами.

Заключение

В JavaScript у нас есть библиотеки для работы со всеми видами сетевых протоколов. Например, есть HTTP-библиотека, которая позволяет вам общаться с сервером HTTP. JavaScript также позволяет вам обмениваться данными с сервером и управлять ими с помощью HTTP-методов. У нас также есть библиотека WebSocket, которая позволяет разработчикам взаимодействовать с веб-браузером с помощью TCP-соединения.

В этой статье мы рассмотрели объекты местоположения JavaScript. Мы обсудили свойства, методы этого объекта и способы их использования. Затем мы изучили набор интернет-протоколов, различные уровни и различные протоколы на каждом уровне.

Передача и передача данных через Интернет — очень деликатная тема. И это потому, что при отсутствии надлежащей защиты злоумышленники могут подслушать разговоры или даже украсть информацию. Если вы хотите узнать больше о криптографии и безопасности данных, прочитайте эту статью Криптография и как бороться с атакой «человек посередине.

Поэтому, если ваше приложение передает данные через Интернет, вы должны убедиться, что приняты надлежащие меры безопасности, чтобы ваши продукты предоставляли пользователям лучший опыт.

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

Для нас в SessionStack оптимизация каждого бита нашего кода имеет решающее значение.

Причина в том, что наша библиотека интегрируется в веб-приложения и собирает данные из пользовательских сессий, такие как пользовательские события, изменения DOM, сетевые данные, исключения, отладочные сообщения и т. д. Захват этих данных без какого-либо влияния на производительность был проблемой, которую мы успешно решили.

Затем эти данные обрабатываются и позволяют вам воспроизвести пути пользователя в виде видеороликов, чтобы оптимизировать рабочие процессы продукта, воспроизвести ошибки или увидеть, где пользователи застряли.

Существует бесплатная пробная версия, если вы хотите попробовать SessionStack.

Хотите узнать больше о JavaScript? Ознакомьтесь со всеми публикациями Как работает JavaScript здесь».