AJAX запрос примеры, — на чистом Javascript, так же AJAX запрос jquery, Fetch запрос, всё это в разных вариантах, GET POST JSON
AJAX запрос — это обращение с клиентской стороны т.е. от браузера к серверу, не перезагружая страницы. AJAX – это технология JavaScript для обращения к серверу без перезагрузки страницы.
Рассмотрим примеры AJAX запросов:
Каждый ответ от сервера включает в себя
Элементы кода, которые будут использованы в примерах.
request – это переменная или константа в которой будет хранится, — экземпляр класса XMLHttpRequest, объект с набором методов.
url – это путь до файла на сервере, который будет обрабатывать наш запрос. В примерах с GET методом, в нем будут передаваться данные со стороны клиента.
.open() – это метод где мы задаем, первым параметром, — метод передачи данных, а вторым url.
.setRequestHeader() – это метод для указания передаваемых заголовков, здесь мы можем указать что данные идут в url либо закрытым способом, либо хотим получить данные от сервера в json формате.
.send() – это последний этап создания http запроса. С помощью него также можно передать тело запроса т.е. данные от браузера к серверу. Можно не чего не передавать или прямо указать null.
onreadystatechange – это событие, которое случится, когда нам придет ответ от сервера.
readyState – это метод экземпляра, который сообщает статус HTTP-запроса, вот возможные значения, которые он может дать:
| Значение | Описание |
| 0 | Метод open() не вызван |
| 1 | Метод open() вызван |
| 2 | Получены заголовки ответа |
| 3 | Получено тело ответа |
| 4 | Передача ответа выполнена |
status или statusText – возвращают статус http заголовков, нам нужен ответ 200. Хотя бывают и 404 или 500.
.responseText – данные, которые придут от сервера в виде строки.
.response – данные вернуться в json формате, тут как бы мы преобразуем сразу в объект, и дальше работаем уже как с объектом.
.text() – используется в запросе fetch, возвращает строку.
.json() – используется в запросе fetch, возвращает json обращенный в объект.
1. GET AJAX запрос на чистом JavaScript
Делаем запрос на чистом JavaScript, например к файлу ajax_quest.php, который находится на сервере, и будет возвращать то что мы ему передали.
2. POST AJAX запрос на чистом JavaScript к PHP файлу на сервере
Принцип такой же как и у GET запроса, но не забываем что GET запросом данные отправляются открыто. У POST запроса данные скрыты, и в большинстве своем желательно использовать POST запросы.
3. JSON AJAX POST запрос к серверу, на чистом Javascript
Запрос на чистом Javascript. Получаем данные в JSON формате.
4. JQuery GET & POST AJAX запрос к PHP на сервере
Работаем с сервером через фреймворк JQuery.
5. Fetch GET на чистом Javascript
Fetch обертка над XHR
6. Запрос на чистом Javascript «Vanila» Fetch + POST метод
7. Fetch POST + JSON
Данный метод сейчас мало какой браузер поддерживает. Но есть костыли. Этот код работает, попробуйте разобраться что к чему. С удовольствием узнаю как лучше тут поступать.
8. Кросдоменный запрос JSONP Fetch + GET метод в github
Кросдоменный AJAX запрос в репозиторий github. Репозиторий возвращает json объект с именами.
9. Передача файла через AJAX на чистом JavaScript
Отправка произвольной формы на AJAX без перезагрузки страницы
Технология AJAX используется для того, чтобы с помощью javascript отправлять «фоновые» http-запросы, что позволяет не перезагружать страницу, как это происходит при обычной отправке форм.
Не зависимо от используемой библиотеки, основные принципы отправки даных с помощью Аякса будут едиными. Я буду всё показывать на примере jQuery. В конце статьи вы найдете ссылку на zip-архив со всеми примерами.
Что можно отправлять через AJAX
Многие думают, что отправке подлежит только форма. Но на самом деле, отправлять можно любые данные. По большому счёту форма как таковая даже не нужна, можно разместить поля ввода (input, textarea и т.п.) в любых местах страницы: перед отправкой просто сформировать из них данные.
На практике стараются использовать именно форму, поскольку это значительно упрощает формирование данных: перед отправкой они просто кодируются (серилизуются) и в таком виде отправляются на сервер.
Общая схема работы
Почти всегда это происходит так:
Дополнительно, при получении ответа, часто скрывают форму, чтобы исключить её повторную отправку.
Начальный код
Вначале сформируем каркас HTML. Я использую UniCSS с готовыми CSS-классами. Также подключаю jQuery в секцию HEAD.
Теперь создадим простую форму и блок ответа.
Первые особенности
В первую очередь обратите внимание, что форма не имеет привычных атрибутов method и action. Формально никто не мешает их указать, но в реальности они будут использоваться только, если будет обычная, а не аякс-отправка. При аякс-отправке нам нужны будут лишь данные формы, а метод и адрес отправки задаются уже в js-коде. Из-за этого мы используем только атрибут id, по которому и сможем идентифицировать форму.
Кнопка имеет тип submit. На самом деле это не обязательно, поскольку главное это просто как-то отреагировать на нажатие кнопки, а это может быть не только submit, но и click. Тип submit удобен тем, что кнопка располагается внутри формы, а значит можно будет перехватить её отправку без дополнительной идентификации.
Но, если кнопку разместить вне формы (если стоит такая задача), то submit сработает не совсем корректно. Особенно если на странице несколько форм, возникнет неопределенность. В этом случае тип кнопки определяют как button (то есть она ничего не делает), и при этом присваивают ей идентификатор id. Например так:
Дальше в js-коде нужно будет перехватывать не submit (формы), а click (кнопки).
Блок #my_message служит для вывода ответа.
Если используется форма, то лучше всё-таки использовать именно submit, поскольку отправка формы может происходить и без нажатия на кнопку: Enter на любом текстовом input-поле. Это типовое поведение браузеров.
Первый вариант (submit)
При отправке формы при нажатии на submit-кнопку формы, возникает одноименное событие, которое мы и перехватываем. На jQuery это будет выглядеть так:
Функции для AJAX
То есть указывается тип запроса (method), адрес обработчика (url), данные (data, обычно в JSON-формате), а также функции, которые реагируют на ответ (в этом примере done).
Привожу полный код, чтобы вы не запутались:
Обработчик размещаем в файле post.php в таком виде:
То есть он пока ничего не делает, а просто выдаёт текст.
Здесь важный момент: адрес обработчика указывается так, чтобы он был доступен по http-адресу. Грубо говоря, адрес можно вбить в браузер. Это особенно актуально, когда используется сложная структура страниц или js-файл выносится в отдельный каталог. В некоторых случаях оптимальным будет указать полный http-адрес к php-файлу, например http://сайт/post.php. Перед тем, как работать с аякс-запросом, убедитесь в корректности адреса обработчика, иначе запрос уйдёт «в никуда», а вы будете гадать, почему он не работает.
Ответ от сервера мы получаем в виде простого текста, поэтому мы его просто выводим в блоке #my_message как есть.
Второй вариант (button)
Теперь рассмотрим второй вариант — отправку данных с помощью произвольного элемента по клику.
Как видите, принципиально здесь ничего не поменялось, кроме того, что мы отслеживаем click на кнопке #my_form_send (которая не обязательно может быть кнопкой, а например блоком span).
Какой вариант использовать, зависит от задач вёрстки. В некоторых случаях кнопку отправки нужно вынести за пределы формы и в этом случае придется использовать click-вариант.
PHP-обработчик
Давайте немного изменим обработчик, чтобы он выдавал какую-то отладочную информацию, например входящий post-запрос.
Здесь без труда угадываются поля форм.
Произвольные данные для отправки
Отправка данных происходит в специальном (серилизованном) формате. Функция jQuery serialize() собственно и приводит данные формы к этому формату, а на стороне сервера, PHP сам сформирует обычный массив. Всё это происходит в фоновом режиме, поэтому дополнительные преобразования не нужны.
Рассмотрим вариант, когда нужно отправить не форму, а какие-то произвольные данные, наример массив данных.
Если вместо фрагмента
то php-обработчик покажет пустой массив. То есть данные не прошли. Для того, чтобы данные были получены их следует оформить:
Более удобным (и распростанённым) будет второй вариант который представляет собой привычный js-объект/массив:
Таким нехитрым способом можно отправлять любые данные на сервер, при том, что от формы можно вообще отказаться. Приведу пример, где все поля ввода могут быть расположены произвольно, при том, что отправка происходит по клику на ссылке:
Приём сложных данных от сервера
Теперь рассмотрим случай, когда сервер должен вернуть не просто текст, а какие-то данные, например массив.
Для этого в php-скрипте следует отдавать специально преобразованный в JSON-формат php-массив. К счастью разработчики PHP всё уже предусмотрели. 
Пусть у нас обработчик будет post-json.php :
Обработка входящих данных на сервере
Теперь рассмотрим вопросы приёма данных на сервере. Поскольку обработчик доступен прямо из браузера, то его следует как-нибудь защитить от прямого вызова. Полноценно сделать это можно в рамках CMS или php-фреймворка, вроде LPF, поэтому я покажу лишь минимальные приёмы.
В первую очередь следует заблокировать работу скрипта, если нет входящих POST-данных. В начале php добавьте такой код:
Теперь при прямом вызове этого скрипта, будет выдаваться сообщение и работа скрипта будет прекращена.
Во вторую очередь следует проверять все входящие данные из формы и по возможности их так обрабатывать, чтобы исключить возможные проблемы безопасности. Сама форма должна использовать HTML-атрибуты для полей, чтобы обеспечить первоначальную валидацию данных. Например, если поле предназначено для электропочты, то следует указать тип email — браузер не позволит выполнить отправку неверных данных.
В некоторых случаях желательно использовать различные jQuery-плагины, который позволяют отформатировать ввод данных. Например ввод телефона в виде групп цифр. Я затрагиваю эти вопросы, поскольку он достаточно важны, но в своих примерах я их опускаю, чтобы не загромождать код.
Отправка email-почты
Это достаточно типовая задача, которая решается через submit-отправку. Пусть будет простая форма из двух полей.
Обработчик у нас в post-email.php. На входе ($_POST) получаются такие данные:
Аналогично можно поступить и с другими полями формы. Поскольку они являются обязательными, то форма всегда должна их содержать.
Дальше вынесем входящие данные в отдельные переменные:
С помощью trim() удаляем возможные крайние пробелы, а strip_tags() удаляет все html/php-тэги.
Дальше следует проверить входящие данные. В первую очередь верность email-адреса. Вполне возможна ситуация, когда посетитель использовал старую версию браузера, которая не понимает нужный тип поля ввода. Если адрес ошибочный, то следует выдать предупреждение и выйти из php-обработчика.
Аналогично поступаем с именем, если оно оказалось пустым.
Вот теперь все проверки пройдены и можно выполнить непосредственную отправку почты. Я приведу полный код post-email.php:
Вы можете использовать данный пример как заготовку для своих задач.
Отправка форм при помощи JavaScript
Формы не всегда формы
В современных веб-приложениях, одностраничных приложениях и приложениях на основе фреймворков, обычно HTML-формы используются для отправки данных без загрузки нового документа при получении данных ответа. В начале поговорим о том почему это требует другого подхода.
Получение контроля над глобальным интерфейсом
Отправка стандартной HTML формы, как описывалось в предыдущей статье, загружает URL-адрес, по которому были отправлены данные, это означает, что окно браузера перемещается с полной загрузкой страницы. Если избегать полную перезагрузку страницы, можно обеспечить более плавную работу, за счёт предотвращения задержек в сети и возможных визуальных проблем (например, мерцания).
Многие современные пользовательские интерфейсы используют HTML формы только для сбора пользовательского ввода, а не для для отправки данных. Когда пользователь пытается отправить свои данные, приложение берёт контроль и асинхронно передаёт данные в фоновом режиме, обновляя только ту часть всего интерфейса пользователя, которой требуется обновление.
Асинхронная отправка произвольных данных обычно называется AJAX, что означает «Asynchronous JavaScript And XML» (Асинхронный JavaScript и XML).
Чем он отличается?
Замечание: Сейчас Fetch API часто используется вместо XHR — это современная, обновлённая версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидите в этой статье можно заменить на Fetch.
Если вы управляете фронтендом (кодом, который выполняется в браузере) и бэкендом (кодом, который выполняется на стороне сервера), вы можете отправлять JSON/XML и обрабатывать их как хотите.
Но если вы хотите использовать сторонний сервис, то вам необходимо отправлять данные в формате, который требуется сервису.
Так как нам следует отправлять подобные данные? Ниже описаны различные необходимые вам техники.
Отправка данных формы
Есть три способа отправки данных формы:
Как написать на чистом JavaScript е Ajax, get, post запросы
Ajax — это технология, которая используется с помощью JavaScript. С помощью Ajax можно отправить GET, POST, запросы без обновления страницы.
Для начала нам нужно понять, как работает Ajax. Ajax работает в JavaScript с помощью стандартной функции XMLHttpRequest, но в IE нужно использовать функцию ActiveXObject («Microsoft.XMLHTTP»).
Покажу на примерах, как всё это работает.
Начнём.
Нужно сделать проверку Ajax объекта, чтобы сделать скрипт кроссбраузерно.
Потом нужно сделать несколько функций для упращения кода и его удобства. Вот код:
Потом нужно ещё написать обработчик, для того чтобы в запросе было отдельно наименование и значение. Например, так.
Где text — это наименование, а hello world — значение запроса.
Вот код обработчика:
Дальше нужно просто написать GET и POST обработчик. Вот код:
Сейчас нужно разобраться в коде:
Эта строка означает, что мы используем Ajax.
Дальше.
А это обработчик открывает запрос с сервером, где send отправляет данные.
Этот код для POST запроса, а для GET нужно немного изменить. Нужно просто не отправлять данные с помощью send. Для отправки GET запроса и его данных нужно просто в open после link прибавить вот этот «+»?»+q». Здесь мы отправляем данные в открытом виде. Например:
Вот с кодом всё. А теперь как использовать код.
Есть ещё возможность преобразовать результат в JSON.
Вот код:
Работа с AJAX в JavaScript
Учебник JavaScript
Практика
Работа с DOM
Практика
Некоторые продвинутые вещи
Рекомендованное ES6
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Регулярки
Разное
Работа с канвасом
Практика
Контекст
Drag-and-Drop
Практика по ООП
Ваша задача: посмотрите, попробуйте повторить.
Практика
Promise ES6
Библиотека jQuery
Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.
Сейчас мы с вами разберем работу с AJAX с помощью библиотеки jQuery. Мы будем разбирать jQuery версии 3. В ней работа с AJAX отличается от предыдущих версий. Будьте внимательны.
Внимание: для тех, кто на менторстве: этот урок желательно провести очно через скайп. Напишите мне, мы с вами назначим время занятия.
Что такое AJAX
Как это происходит: в определенный момент, например, по какому-либо действию пользователя, JavaScript шлет запрос на сервер по определенному url. Через некоторое время сервер присылает ответ в виде кусочка HTML кода. Этот кусочек HTML можно затем вставить в любое место страницы.
Запросы, которые шлет JavaScript, бывают синхронными и асинхронными.
Чаще всего используются асинхронные запросы.
Использовать AJAX можно на чистом JavaScript, а можно на jQuery. Мы разберем второй вариант, так как он проще.
Простые запросы через jQuery
Давайте, например, отправим запрос на страницу ajax.html:
Итак, давайте пошлем AJAX запрос на страницу ajax.html, полученный ответ положим в переменную text и запишем его в блок #result:
При запросе выполнится или метод done при успехе или метод fail при ошибке.
Существует также метод always, который выполнится в любом случае:
Отправка форм
Предыдущие запросы отправлялись методом GET. Это значит, что мы просто обращались на определенный адрес и ожидали ответа.
Можно также отправлять запросы методом POST. В этом случае мы кроме обращения на определенный url можем еще отправить туда некоторые данные, например, данные из формы, которую заполнил пользователь.
Как отправить такой запрос: для этого необходимо добавить еще две настройки в наш объект: свойство method указать ‘POST’ и тогда в data можно положить данные, которые отправятся на сервер методом POST:
Больше информации
Чистый JS
Работа с AJAX также доступна на чистом JavaScript. Смотрите ее по следующим ссылкам: learn.javascript.ru, xmlhttprequest.ru.
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.