---
title: Как работает браузер
seo:
  title: Как работает браузер — QA
  description: Тема «Как работает браузер» для собеседования QA. Что такое кэш? Что такое сессия?
---

[Все темы QA](/qa)

## <strong>Что такое кэш?</strong> [#q-14bee738d69b81b48e53f0e57621fb5e]

Кэш (<code>cache</code>) — это временное хранилище данных, предназначенное для ускорения доступа к часто используемой информации. Основные особенности кэша&#58;

{/* prettier-ignore */}
1. <strong>Цель</strong>&#58;

    - Сокращение времени доступа к данным и уменьшение нагрузки на основной источник данных (например, базу данных или сервер).

1. <strong>Типы кэша</strong>&#58;

    - <strong>Кэш браузера</strong>&#58; Хранит копии веб-страниц, изображений и других ресурсов, чтобы быстрее загружать их при повторных визитах.

    - <strong>Кэш памяти</strong>&#58; Хранит часто используемые данные в оперативной памяти, чтобы ускорить доступ к ним по сравнению с обращением к диску.

    - <strong>Кэш процессора</strong>&#58; Встроенный в процессор для хранения часто используемых инструкций и данных, что ускоряет выполнение программ.

    - <strong>Кэш серверов</strong>&#58; Используется для хранения данных на уровне сервера, чтобы уменьшить время ответа на запросы клиентов.

1. <strong>Механизм работы</strong>&#58;

    - При первом запросе к ресурсу данные загружаются из основного источника и сохраняются в кэш.

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

1. <strong>Проблемы кэширования</strong>&#58;

    - <strong>Актуальность данных</strong>&#58; Данные в кэше могут устаревать, поэтому важно правильно управлять временем жизни (TTL) кэшированных данных.

    - <strong>Кэширование ошибок</strong>&#58; Иногда могут быть закэшированы ошибки или некорректные данные, что требует дополнительных механизмов управления кэшем.

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

:::note[Ссылки для изучения]

1. [Разбираемся, что такое кэш](https://skillbox.ru/media/marketing/razbiraemsya-chto-takoe-kesh-dlya-chego-on-nuzhen-zachem-i-kak-ego-chistyat/)
   :::

---

## <strong>Что такое сессия?</strong> [#q-14bee738d69b81cc984eda4aa3ef8758]

Сессия — это временный интервал взаимодействия пользователя с веб-приложением или сервером, в течение которого сохраняется состояние и данные пользователя. Основные характеристики сессии&#58;

{/* prettier-ignore */}
1. <strong>Цель</strong>&#58;

    - Позволяет отслеживать и сохранять состояние пользователя между запросами, обеспечивая непрерывность взаимодействия с веб-приложением.

1. <strong>Использование</strong>&#58;

    - <strong>Аутентификация</strong>&#58; Хранение информации о вошедшем в систему пользователе.

    - <strong>Персонализация</strong>&#58; Сохранение пользовательских настроек и предпочтений.

    - <strong>Корзина покупок</strong>&#58; Хранение товаров, добавленных в корзину до завершения покупки.

1. <strong>Механизм работы</strong>&#58;

    - <strong>Идентификатор сессии (Session ID)</strong>&#58; Уникальный ключ, который генерируется сервером при создании сессии и передается клиенту (обычно через cookies).

    - <strong>Хранение данных</strong>&#58; Сервер сохраняет данные сессии, связанные с уникальным идентификатором. Клиент отправляет идентификатор с каждым запросом, чтобы сервер мог связать запрос с соответствующей сессией.

1. <strong>Время жизни</strong>&#58;

    - Сессия имеет ограниченное время жизни (TTL), после которого она автоматически завершится. Время жизни может быть установлено на сервере.

1. <strong>Безопасность</strong>&#58;

    - Важно защищать идентификатор сессии от подделки и хищения, чтобы предотвратить несанкционированный доступ. Используются защищённые cookies и HTTPS.

:::note[Ссылки для изучения]

1. [Что такое сессия](https://kaze.gitbook.io/qa-theory/web/chto-takoe-sessiya)
   :::

---

## <strong>Зачем нужны</strong> <code>cookies</code><strong>?</strong> [#q-14bee738d69b8110bad6caeda57a35a4]

<code>Cookies</code> — это небольшие файлы, хранящиеся на компьютере
пользователя, которые веб-сайты используют для сохранения и передачи информации
между клиентом и сервером. Вот их основные функции&#58;

{/* prettier-ignore */}
1. <strong>Аутентификация</strong>&#58;

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

1. <strong>Персонализация</strong>&#58;

    - Хранят пользовательские настройки и предпочтения, такие как язык интерфейса, темы оформления и другие персонализированные параметры.

1. <strong>Сессии и корзина покупок</strong>&#58;

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

1. <strong>Аналитика и отслеживание</strong>&#58;

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

1. <strong>Реклама</strong>&#58;

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

#### Основные виды <code>cookies</code>&#58;

- <strong>Сессионные cookies</strong>&#58; Хранятся временно и удаляются после
  закрытия браузера.

- <strong>Постоянные cookies</strong>&#58; Хранятся на устройстве пользователя в
  течение заданного времени или до их удаления пользователем.

- <strong>Cookies сторонних сервисов</strong>&#58; Создаются доменами, отличными
  от домена посещаемого сайта (например, для рекламы и аналитики).

#### Безопасность&#58;

- Важно правильно настраивать cookies, чтобы защитить данные пользователя. Использование атрибутов <code>HttpOnly</code> и <code>Secure</code> помогает защитить cookies от кражи и манипуляций.

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

:::note[Ссылки для изучения]

1. [Что такое куки и для чего они нужны](https://360.yandex.ru/blog/articles/chto-takoe-kuki-i-zachem-oni-nuzhny)
   :::

---

## <strong>Что такое фрейм?</strong> [#q-14bee738d69b817e8c72efd526b608be]

Фрейм (<code>frame</code>) в контексте веб-разработки — это элемент HTML, используемый для встраивания одной HTML-документа в другой. Он позволяет отображать несколько веб-страниц в одном окне браузера. Основные типы фреймов&#58;

{/* prettier-ignore */}
1. <strong>iframe (</strong><code>Inline Frame</code><strong>)</strong>&#58;

    - <strong>Элемент</strong>&#58; <code>&#60;iframe&#62;</code>

    - <strong>Использование</strong>&#58; Встраивание одной веб-страницы внутри другой веб-страницы.

    - <strong>Пример</strong>&#58;

        ```html
        <iframe src="https://www.example.com" width="600" height="400"></iframe>
        ```

    - <strong>Применение</strong>&#58; Встраивание видео, карт, стороннего контента, таких как социальные сети и рекламные баннеры.

1. <code>frameset</code> <strong>(устаревший)</strong>&#58;

    - <strong>Элемент</strong>&#58; <code>&#60;frameset&#62;</code> (вместо <code>&#60;body&#62;</code>)

    - <strong>Использование</strong>&#58; Разделение окна браузера на несколько фреймов, каждый из которых может загружать отдельный HTML-документ.

    - <strong>Пример</strong>&#58;

        ```html
        <frameset cols="25%, 75%">
          <frame src="menu.html">
          <frame src="content.html">
        </frameset>
        ```

    - <strong>Статус</strong>&#58; Устаревший в HTML5, рекомендуется использовать CSS и JavaScript для разметки и стилизации.

#### Преимущества использования фреймов&#58;

- <strong>Изоляция контента</strong>&#58; Позволяет изолировать и загружать
  разные части контента независимо друг от друга.

- <strong>Перезагрузка отдельных фреймов</strong>&#58; Обновление одного фрейма
  без перезагрузки всей страницы.

#### Недостатки&#58;

- <strong>Сложность навигации</strong>&#58; Могут возникнуть проблемы с
  навигацией, закладками и историей браузера.

- <strong>Сложности с SEO</strong>&#58; Поисковые системы могут испытывать
  трудности с индексацией содержимого внутри фреймов.

- <strong>Устаревание</strong>&#58; <code>frameset</code> и <code>frame</code>
  устарели в HTML5 в пользу более современных методов разметки и стилизации.

:::note[Ссылки для изучения]

1. [Что такое фрейм простыми словами](https://skillbox.ru/media/design/chto-takoe-frame-prostymi-slovami/)
   :::

---

## <strong>Что такое</strong> <code>HTML</code><strong>/</strong><code>CSS</code><strong>/</strong><code>JavaScript</code><strong>?</strong> [#q-14bee738d69b810785ffdb07803946eb]

HTML, CSS и JavaScript — это основные технологии для разработки веб-страниц. Вот их краткое описание&#58;

{/* prettier-ignore */}
1. <strong>HTML (HyperText Markup Language)</strong>&#58;

    - <strong>Назначение</strong>&#58; Определяет структуру веб-страницы.

    - <strong>Функции</strong>&#58; Используется для создания и организации элементов на странице, таких как заголовки, параграфы, изображения, ссылки и формы.

    - <strong>Пример</strong>&#58;

        ```html
        <html>
          <head>
            <title>Example Page</title>
          </head>
          <body>
            <h1>Welcome to My Website</h1>
            <p>This is a paragraph.</p>
          </body>
        </html>
        ```

1. <strong>CSS (Cascading Style Sheets)</strong>&#58;

    - <strong>Назначение</strong>&#58; Определяет стиль и внешний вид веб-страницы.

    - <strong>Функции</strong>&#58; Используется для настройки внешнего вида HTML-элементов, включая цвета, шрифты, отступы, выравнивание и расположение на странице.

    - <strong>Пример</strong>&#58;

        ```html
        <style>
          body {
            background-color: lightblue;
          }
          h1 {
            color: navy;
            text-align: center;
          }
          p {
            font-family: verdana;
            font-size: 20px;
          }
        </style>
        ```

1. <strong>JavaScript</strong>&#58;

    - <strong>Назначение</strong>&#58; Добавляет интерактивность и динамическое поведение веб-странице.

    - <strong>Функции</strong>&#58; Используется для создания интерактивных элементов, таких как кнопки, формы, анимации, и для обработки событий, таких как клики и движения мыши.

    - <strong>Пример</strong>&#58;

        ```html
        <script>
          function showMessage() {
            alert('Hello, world!');
          }
        </script>
        <button onclick="showMessage()">Click Me</button>
        ```

#### Взаимодействие&#58;

- <strong>HTML</strong> создает структуру веб-страницы.

- <strong>CSS</strong> отвечает за стилизацию элементов HTML.

- <strong>JavaScript</strong> добавляет интерактивность и динамическое
  обновление контента.

:::note[Ссылки для изучения]

1. [Что такое HTML/CSS/JS](https://kaze.gitbook.io/qa-theory/web/chto-takoe-html-css-javascript#:~:text=HTML%20%28Hypertext%20Markup%20Language%29%2C%20CSS,%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D1%85%20%D0%B8%20%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D1%8B%D1%85%20%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86)
   :::

---

## <strong>Какую структуру имеет веб-страница?</strong> [#q-14bee738d69b810083d2d13748eb4953]

Веб-страница имеет определенную структуру, определяемую HTML (HyperText Markup Language). Вот основные элементы структуры веб-страницы&#58;

{/* prettier-ignore */}
1. <code>DOCTYPE</code>&#58;

    - Определяет тип документа и версию HTML.

    - Пример&#58; <code>&#60;&#33;DOCTYPE html&#62;</code>

1. <code>HTML</code> <strong>элемент</strong>&#58;

    - Основной контейнер для всей содержимой страницы.

    - Пример&#58;

        ```html
        <html lang="en">
          <head>
            <!-- Metadata and links to CSS/JS files go here -->
          </head>
          <body>
            <!-- Content of the page goes here -->
          </body>
        </html>
        ```

1. <code>HEAD</code> <strong>элемент</strong>&#58;

    - Содержит метаданные о документе, такие как заголовок, ссылки на стили и скрипты, метатеги.

    - Пример&#58;

        ```html
        <head>
          <meta charset="UTF-8">
          <title>Example Page</title>
          <link rel="stylesheet" href="styles.css">
          <script src="scripts.js"></script>
        </head>
        ```

1. <code>TITLE</code> <strong>элемент</strong>&#58;

    - Определяет заголовок веб-страницы, который отображается в заголовке окна браузера или на вкладке.

    - Пример&#58;

        ```html
        <title>Example Page</title>
        ```

1. <code>BODY</code> <strong>элемент</strong>&#58;

    - Содержит основной контент веб-страницы, такой как тексты, изображения, ссылки, формы и другие элементы.

    - Пример&#58;

        ```html
        <body>
          <h1>Welcome to My Website</h1>
          <p>This is a paragraph of text on the page.</p>
          <img src="image.jpg" alt="Example Image">
        </body>
        ```

#### Основные компоненты внутри <code>BODY</code>&#58;

{/* prettier-ignore */}
- <strong>Заголовки (Headings)</strong>&#58;

    - Используются для создания заголовков различного уровня.

    - Пример&#58; <code>&#60;h1&#62;Main Title&#60;&#47;h1&#62;</code>

- <strong>Параграфы (Paragraphs)</strong>&#58;

    - Используются для отображения текста.

    - Пример&#58; <code>&#60;p&#62;This is a paragraph&#46;&#60;&#47;p&#62;</code>

- <strong>Ссылки (Links)</strong>&#58;

    - Используются для создания гиперссылок.

    - Пример&#58; \<a href="https&#58;//www.example.com"\>Click Here\</a\>

- <strong>Изображения (Images)</strong>&#58;

    - Используются для вставки изображений.

    - Пример&#58; <code>&#60;img src&#61;&#34;image&#46;jpg&#34; alt&#61;&#34;Example Image&#34;&#62;</code>

- <strong>Списки (Lists)</strong>&#58;

    - Используются для создания упорядоченных и неупорядоченных списков.

    - Пример&#58;

        ```html
        <ul>
          <li>List item 1</li>
          <li>List item 2</li>
        </ul>
        ```

- <strong>Формы (Forms)</strong>&#58;

    - Используются для создания интерактивных элементов для ввода данных.

    - Пример&#58;

        ```html
        <form action="/submit" method="post">
          <label for="name">Name:</label>
          <input type="text" id="name" name="name">
          <button type="submit">Submit</button>
        </form>
        ```

#### Пример полной структуры веб-страницы&#58;

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>Welcome to My Website</h1>
    </header>
    <main>
      <p>This is a paragraph of text on the page.</p>
      <img src="image.jpg" alt="Example Image" />
    </main>
    <footer>
      <p>
        Contact information:
        <a href="mailto:someone@example.com">someone@example.com</a>.
      </p>
    </footer>
    <script src="scripts.js"></script>
  </body>
</html>
```

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

:::note[Ссылки для изучения]

1. [Структура веб-страницы](https://kaze.gitbook.io/qa-theory/web/kakuyu-strukturu-imeet-veb-stranica)
   :::

---

## <strong>Зачем чистить кэш?</strong> [#q-14bee738d69b81bca7dad9d29075196f]

Чистка кэша необходима по нескольким причинам&#58;

{/* prettier-ignore */}
1. <strong>Освобождение памяти</strong>&#58;

    - Кэш может занимать значительное количество дискового пространства. Очистка кэша освобождает эту память.

1. <strong>Актуализация данных</strong>&#58;

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

1. <strong>Решение проблем с отображением</strong>&#58;

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

1. <strong>Улучшение производительности</strong>&#58;

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

1. <strong>Безопасность и конфиденциальность</strong>&#58;

    - Кэш может содержать личные данные и историю посещений. Очистка кэша помогает защитить конфиденциальность пользователя.

Очистка кэша полезна для диагностики устаревших ресурсов и освобождения места. Постоянно чистить его ради ускорения не нужно&#58; следующий визит обычно потребует повторной загрузки ресурсов.

:::note[Ссылки для изучения]

1. [Для чего чистить кэш](https://kaze.gitbook.io/qa-theory/web/zachem-chistit-kesh)
   :::

---

## Какие проверки особенно важны для веб-приложений? [#q-14bee738d69b8139ada7ff819fe5dc76]

Существует несколько видов тестирования, которые особенно актуальны для веб-приложений. Вот основные из них&#58;

{/* prettier-ignore */}
1. <strong>Кроссбраузерное тестирование</strong>&#58;

    - Проверка корректности отображения и функционирования веб-приложения в различных браузерах (Chrome, Firefox, Safari, Edge и т.д.) и их версиях.

1. <strong>Тестирование адаптивности (</strong><code>Responsive testing</code><strong>)</strong>&#58;

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

1. <strong>Тестирование производительности (</strong><code>Performance testing</code><strong>)</strong>&#58;

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

1. <strong>Тестирование безопасности (</strong><code>Security testing</code><strong>)</strong>&#58;

    - Проверка веб-приложения на уязвимости, такие как XSS (межсайтовый скриптинг), CSRF (межсайтовая подделка запроса), SQL-инъекции и другие.

1. <strong>Тестирование пользовательского интерфейса (</strong><code>UI testing</code><strong>)</strong>&#58;

    - Проверка интерфейса на соответствие дизайну, удобству использования, проверка элементов управления и взаимодействия пользователя с веб-приложением.

1. <strong>Тестирование совместимости (</strong><code>Compatibility testing</code><strong>)</strong>&#58;

    - Проверка работы веб-приложения на различных операционных системах, браузерах и их версиях.

1. <strong>Тестирование доступа (</strong><code>Accessibility testing</code><strong>)</strong>&#58;

    - Проверка доступности веб-приложения для пользователей с ограниченными возможностями, в соответствии с стандартами WCAG (Web Content Accessibility Guidelines).

1. <strong>Тестирование SEO</strong>&#58;

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

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

:::note[Ссылки для изучения]

1. [Что такое веб-тестирование](https://habr.com/ru/articles/715376/)
   :::

---

## <strong>Для чего в веб-страницах используют</strong> <code>JavaScript</code><strong>?</strong> [#q-14bee738d69b817388bde69ac85ae316]

JavaScript используется в веб-страницах для добавления интерактивности и динамических функций. Вот основные задачи, для которых применяется JavaScript&#58;

{/* prettier-ignore */}
1. <strong>Динамическое изменение контента</strong>&#58;

    - Изменение текста, изображений и других элементов на странице без перезагрузки.

1. <strong>Валидация форм</strong>&#58;

    - Проверка корректности данных, введенных пользователем в форму, перед отправкой на сервер.

1. <strong>Анимация</strong>&#58;

    - Создание анимационных эффектов, таких как слайдеры изображений, раскрывающиеся меню и другие визуальные эффекты.

1. <strong>Обработка событий</strong>&#58;

    - Реакция на действия пользователя, такие как клики мыши, нажатия клавиш и движения курсора.

1. <strong>Асинхронные запросы</strong>&#58;

    - Отправка и получение данных с сервера без перезагрузки страницы (AJAX), что позволяет создавать более быстрые и отзывчивые веб-приложения.

1. <strong>Манипуляция DOM</strong>&#58;

    - Добавление, удаление и изменение HTML-элементов на странице в реальном времени.

1. <strong>Интеграция с API</strong>&#58;

    - Взаимодействие с внешними сервисами и API для получения и отправки данных, таких как карты, социальные сети и другие.

1. <strong>Управление мультимедиа</strong>&#58;

    - Контроль воспроизведения аудио и видео на странице.

1. <strong>Хранение данных на клиенте</strong>&#58;

    - Использование Local Storage, Session Storage и Cookies для хранения данных на стороне клиента.

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

:::note[Ссылки для изучения]

1. [Для чего используют JS](https://kaze.gitbook.io/qa-theory/web/dlya-chego-v-veb-stranicakh-ispolzuyut-javascript)
   :::

---

## <strong>Что такое</strong> <code>REST</code><strong>?</strong> [#q-14bee738d69b81eab70ef46d4e133c34]

<code>REST</code> (Representational State Transfer) — это архитектурный стиль
для разработки веб-сервисов. Основные характеристики REST&#58;

{/* prettier-ignore */}
1. <strong>Ресурсно-ориентированная архитектура</strong>&#58;

    - Вся информация и функциональность представлены как ресурсы, идентифицируемые URL-адресами.

1. <strong>Использование стандартных HTTP-методов</strong>&#58;

    - <strong>GET</strong>&#58; Получение данных.

    - <strong>POST</strong>&#58; Создание нового ресурса.

    - <strong>PUT</strong>&#58; Обновление существующего ресурса.

    - <strong>DELETE</strong>&#58; Удаление ресурса.

    - <strong>PATCH</strong>&#58; Частичное обновление ресурса.

1. <strong>Статус коды HTTP</strong>&#58;

    - Используются для передачи состояния запроса, такие как 200 OK, 404 Not Found, 500 Internal Server Error и т.д.

1. <strong>Без сохранения состояния (</strong><code>Stateless</code><strong>)</strong>&#58;

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

1. <strong>Кешируемость</strong>&#58;

    - Ответы сервера могут быть помечены как кешируемые или некешируемые, что позволяет улучшить производительность за счёт повторного использования ранее полученных данных.

1. <strong>Единообразие интерфейса</strong>&#58;

    - Определённые правила взаимодействия между клиентом и сервером, обеспечивающие стандартизированное и предсказуемое поведение.

1. <strong>Код по требованию (необязательно)</strong>&#58;

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

REST широко используется для разработки веб-API из-за своей простоты, гибкости и масштабируемости. Он позволяет легко взаимодействовать между различными системами и платформами, используя стандартные веб-протоколы и методы.

:::note[Ссылки для изучения]

1. [Введение в REST API](https://cloud.vk.com/blog/vvedenie-v-rest-api)
   :::

---

## <strong>Что такое</strong> <code>AJAX</code><strong>?</strong> [#q-14bee738d69b81e5bd92f6923b9f8055]

<code>AJAX</code> (Asynchronous JavaScript and XML) — это технология для
создания динамически обновляемых веб-страниц без перезагрузки. Основные
характеристики <code>AJAX</code>&#58;

{/* prettier-ignore */}
1. <strong>Асинхронные запросы</strong>&#58;

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

1. <strong>Использование JavaScript</strong>&#58;

    - AJAX запросы инициируются и обрабатываются с помощью JavaScript.

1. <strong>Обмен данными</strong>&#58;

    - Поддерживает различные форматы данных, включая XML, JSON, HTML и обычный текст.

1. <strong>XMLHttpRequest объект</strong>&#58;

    - Основной объект для отправки AJAX запросов и получения ответов от сервера.

#### Пример работы <code>AJAX</code>&#58;

```html
<!DOCTYPE html>
<html>
  <head>
    <title>AJAX Example</title>
    <script>
      function loadData() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById("result").innerHTML = xhr.responseText;
          }
        };
        xhr.open("GET", "data.txt", true);
        xhr.send();
      }
    </script>
  </head>
  <body>
    <button onclick="loadData()">Load Data</button>
    <div id="result"></div>
  </body>
</html>
```

#### Основные преимущества <code>AJAX</code>&#58;

{/* prettier-ignore */}
1. <strong>Повышение интерактивности</strong>&#58;

    - Обеспечивает более плавный и быстрый пользовательский опыт, так как части страницы могут обновляться без полной перезагрузки.

1. <strong>Снижение нагрузки на сервер</strong>&#58;

    - Позволяет загружать только необходимые данные, а не всю страницу целиком.

1. <strong>Эффективность</strong>&#58;

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

:::note[Ссылки для изучения]

1. [Что такое AJAX](https://aws.amazon.com/ru/what-is/ajax/#:~:text=Asynchronous%20JavaScript%20and%20XML%20%28AJAX%29,%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%20%D0%B8%20%D0%BF%D1%80%D0%B5%D1%80%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D1%8E%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8F)
   :::