Что такое AJAX? Создание асинхронных запросов
Урок, в котором на примерах рассмотрим создание простых асинхронных AJAX запросов к серверу. В качестве метода передачи запросов будем использовать как метод GET, так и метод POST. На сервере обработку запросов выполним с помощью скриптов PHP.
Что такое AJAX?
AJAX – это аббревиатура от « A synchronous J avaScript a nd X ML», которая дословно переводится как «асинхронный JavaScript и XML».
Что означают эти слова?
Что такое AJAX? AJAX – это стек технологий, с помощью которых можно в фоновом режиме получать данные с сервера и использовать их для обновления страницы без её перезагрузки. Это делает сайты и веб-приложения более быстрыми и отзывчивыми при взаимодействии пользователей с ними.
Какие преимущества даёт технология AJAX при использовании её на сайте?
AJAX на сайте позволяет:
Создание асинхронных запросов с помощью XHR
Что такое асинхронный запрос, мы уже разобрали выше. Т. е. это такой, который выполняется в фоне и не мешает пользователю взаимодействовать со страницей.
А это значит, что при отправке такого запроса, страница не «замораживается», с ней можно работать дальше.
1. Начинается написания запроса с создания экземпляра объекта XMLHttpRequest :
2. После этого следует инициализировать запрос с помощью метода open() :
3. Следующий шаг – это назначить обработчик на событие readystatechange объекта xhr :
readyState – это свойство, содержащее числовой код, по которому можно определить в какой сейчас стадии находится запрос.
Статусы кодов readyState :
Из всех этих статусов нам интересен только 4. Он будет означать, что ответ от сервера получен и его можно обработать. Остальные коды на практике практически не используются.
Таким образом напишем проверку на равенство значения readyState числу 4:
Если запрос был успешно выполнен сервером, то его статус будет 200. Другие ответы нам в большинстве случаев не интересны. Например, если status равен 404 (запрашиваемый URL не найден), то в этом случае запрашиваемых данных нет и мы можем только как-то обработать это ошибку.
Добавим ещё одно условие в код: проверку status на равенство 200.
Теперь, если всё в порядке, мы можем получить данные и делать с ними всё, то угодно.
Получить данные (ответ от сервера) можно в виде строки ( xhr. responseText ) или объекта XML Document ( xhr. responseXML ).
Например, выведем полученный ответ от севера в консоль:
Если запрос асинхронный, то выполнение send() не останавливает дальнейшее выполнение программы. В противном случае (если запрос синхронный), программа приостанавливается и возобновляет своё выполнение только после получения ответа от сервера.
Пример AJAX GET запроса
В качестве примера напишем асинхронный AJAX запрос на чистом JavaScript, который будет после готовности DOM и при нажатии на кнопку обновлять содержимое списка на странице.
1. Для генерации некоторых данных на сервере создадим простой php-файл, который будет возвращать массив из 3 элементов в формате JSON.
В качестве сервера можно использовать «Open Server Panel», встроенный в PHP веб-сервер или любой другой.
2. Создадим HTML файл и поместим в <body> следующее содержимое:
Пример AJAX POST запроса
Создание асинхронного AJAX запроса (метод POST)
Изменим вышеприведённый пример. Теперь AJAX запрос к серверу будет выполняться после нажатию на кнопку. Он будет получать имя, которое ввёл пользователь в элемент input и отправлять его посредством метода POST на сервер. После получения ответа с сервера, заменим им содержимое элемента div на странице.
https://itchief. ru/javascript/ajax-introduction