В этой статье вы прочитаете что такое AJAX, для чего нужен и принципы работы этой технологии.
Что такое AJAX:
AJAX это асинхронный JavaScript, иногда XML, делается это благодаря различным встроенным методам.
Асинхронный означает что вы можете отравлять запросы или получать ответы, без перезагрузки страницы, тут больше нечего объяснять.
Как работает AJAX:
Первое что стоит сказать про технологию, это то, что она не самостоятельная, а совокупность нескольких, связанных между собой технологий, которые построены на двух принципах.
- Использование динамического обращение к серверу, без перезагрузки страницы;
- Использование DHTML для динамического изменения содержания страницы;
Примечание:
DHTML означает Dynamic HTML, или если на русском,
то динамический HTML.
Для отправки асинхронных данных в JavaScript используется объект XMLHttpRequest, который отправляет XML данные на сервер и получает данные, конечно, делает это всё асинхронно.
Также в последние время стало популярным отправлять не XML запросы и ответы, а делать из в формате JSON, что на мой взгляд упростила работу с этим.
Различие:
Также посмотрите диаграмму, которая показывает различие обычного модели от AJAX модели.
Примечание:
Автор: Kirill Borisenko — Это изображение содержит элементы, заимствованные из другого изображения: Ajax-modell.svg., CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=22951773
Давайте разберём картинку, то что нарисовано с лева, это обычная модель, как вы видите по ней, мы отправляем HTTP запрос и получаем в ответ HTML файл, но вмести с ним получаем ещё CSS и JS файлы.
Теперь посмотрите что происходит с AJAX моделью, в начале с помощью JavaScript создаём обработчик и отправляем эти данные через HTTP, потом, когда сервер их обработает, он отпрвляет пользователю ответ виде XML, обработчик AJAX сразу обработает данные.
Также, как говорилось выше, сейчас часто отправляют и получают данные в качестве JSON массива.
Для чего нужен AJAX:
Самое главное для чего эта технология нужна, так это что бы, гибко и не заметно отправлять запрос и зависимо от ответа менять содержимое страницы.
Например, вот вы в интернет магазине нажимаете на кнопку «Добавить в корзину», обычно, после этого действия, сверху, на иконки корзины появляется число, которое обозначает число товаров добавленные в корзину, это делается благодаря AJAX.
Также используется для опросов, или в Google, для показа похожих запросов.
Реализация AJAX:
Последнее, что стоит объяснить, это то, благодаря чему можно работать с ним, на JavaScript, хотя как говорилось выше, есть объект класса XMLHttpRequest, но с ним работать очень можно, лучше использовать сторонние библиотеки.
Первое что можно вспомнить, это JQuery, с ним работать крайне легко, но он уже устарел, поэтому его если использовать, так только в старых проектах.
Второе это fetch, тоже крайне удобная библиотека, также её важной отличительной особенностью, можно считать, что она встроена уже в JS и вам нечего скачивать не надо.
Последняя библиотека, это Axios.js, это моя любимая библиотека для работы с AJAX, хоть во многом она похожа на fetch, но реализовано там всё удобней, как по мне.
Вывод:
В этой статье вы прочитали о том, что такое AJAX, для чего нужен и принципы работы этой технологии.
Подписываетесь на соц-сети:
Оценка:
Загрузка...