Ajax запрос на чистом javascript

Ajax запрос на чистом javascript

Запрос на чистом JavaScript.

Серия статей "Ajax на практике"

  • Основы передачи данных
  • Получение данных из формы
  • Загрузка файлов
  • Progress Bar — индикатор процесса загрузки
  • Запрос на чистом JavaScript.

Во всех четырёх статьях серии "Ajax на практике", мы разбирались, как использовать эту технологию с помощью библиотеки jQuery и, в частности, её метод $.ajax(), но всегда ли нужно прибегать к помощи фреймворков? К примеру, если в своём проекте, вы больше нигде не используете библиотеку, то абсолютно не резонно нагружать страницы лишними килобайтами и особенно, если этих килобайт около девяноста. Вывод — пишем ajax-запрос на чистом JavaScript, тем более, что та же библиотека jQuery, ни что иное, как подготовленный набор методов (функций), написанный на нативном JS. Если взять для сравнения JS-код из статьи "Получение данных из формы", то переписывая код, нам нужно будет сделать следующее:

  1. Дождаться загрузки всего документа
  2. Получить в распоряжение элемент
  3. Повесить на него обработчик события submit
  4. Подготовить данные формы на отправку
  5. Создать объект XMLHttpRequest
  6. С помощью XHR отправить данные
  7. Получить, обработать и вывести на экран ответ сервера

Поехали пошагово.
1) Вместо привычных $(function()<>) или $(document).ready(function()<>), устанавливаем свой обработчик события onload. Но прежде, хочу пояснить, почему мы не будем использовать конструкцию element.onevent = func;. Это способ хоть и кроссбраузерный, но главным его недостатком является то, что установив на один элемент два и более обработчика, последний "затрёт" предыдущие и они "не откатают свою обязательную программу". Поэтому, хоть кода на пару строк получится больше, но запишем так:

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

Ajax — это технология, которая используется с помощью JavaScript. С помощью Ajax можно отправить GET, POST, запросы без обновления страницы.

Для начала нам нужно понять, как работает Ajax. Ajax работает в JavaScript с помощью стандартной функции XMLHttpRequest, но в IE нужно использовать функцию ActiveXObject («Microsoft.XMLHTTP»).

Читайте также:  Ets 2 ошибка steam

Покажу на примерах, как всё это работает.

Начнём.

Нужно сделать проверку Ajax объекта, чтобы сделать скрипт кроссбраузерно.

Вот код проверки:

Потом нужно сделать несколько функций для упращения кода и его удобства. Вот код:

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

Где text — это наименование, а hello world — значение запроса.

Вот код обработчика:

Дальше нужно просто написать GET и POST обработчик. Вот код:

Сейчас нужно разобраться в коде:

Эта строка означает, что мы используем Ajax.
Дальше.

А это обработчик открывает запрос с сервером, где send отправляет данные.
Этот код для POST запроса, а для GET нужно немного изменить. Нужно просто не отправлять данные с помощью send. Для отправки GET запроса и его данных нужно просто в open после link прибавить вот этот "+"?"+q". Здесь мы отправляем данные в открытом виде. Например:

Вот с кодом всё. А теперь как использовать код.

Есть ещё возможность преобразовать результат в JSON.
Вот код:

Вот и всё. Спасибо.

Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.

Сегодня мы поговорим о том как при создании сайтов делать запросы AJAX, получать ответы и при этом не будем использовать лишние обвесы в виде jQuery. Будем писать всё на чистом, лаконичном JavaScript.

Вы наверное часто замечали что на сайтах часто встречаются формы или кнопки которые принимают от вас какие-либо данные а затем их отправляют или как либо меняют часть интерфейса без полной перезагрузки страницы и без потери текущего состояния. Всё это реализовано благодаря технологии, известной как AJAX или http запрос (XMLHttpRequest).

Как это работает? На стороне клиента (в браузере) вы заполняете какую-либо форму или взаимодействуете с каким-либо контролом, JavaScript ловит это событие, принимает некие данные и отправляет их на определённый контроллер (по просту страницу). Далее этот контроллер принимает данные и даёт какой-либо ответ, который мы в последствии можем получить в калбеке.

Читайте также:  Arduino передача данных по wifi

Итак давайте же наконец начнём кодить. Как я уже говорил ранее все запросы мы будем писать на чистом JavaScript. Для начала давайте создадим событие. В первом варианте это будет загрузка страницы, а во втором изменение значения тега.

Итак событие №1 загрузка страницы:

В коде из данного примера мы повесили событие на загрузку страницы. Теперь давайте напишем функцию которая отрабатывает по этому событию, как вы наверное уже догадались, функция будет называтся sendRequest()

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

Что же такое var request = new XMLHttpRequest()? XMLHttpRequest() это JS класс отвечающий за асинхронные запросы в браузере именно через него мы будем отправлять и получать данные.

Так давайте же наконец отправим наши данные на специальную страницу:

Теперь нам нехватает лишь калбека который будет принимать ответ. Давайте же его напишем. Как вы помните мы записали класс запроссов в переменную request теперь давайте допишем ей метод onreadystatechange означающий, что состояние объекта изменилось, а точнее был получен ответ, хотя мы пока и не знаем какой, но это довольно просто исправить, при помощи простой проверки, итак наша функция целиком:

Отлично, вы отправили ваш первый запрос, убедиться в этом можно в инспекторе вашего браузера. В коде выше мы получили ответ от сервера в методе onreadystatechange и использовали его как событие. Далее выполнили проверку того, что ответ получен полностью методом readyState который принимает значение равное 4 при получении ответа от сервера. Затем мы добавили дополнительную проверку на код ответа сервера, в случае если он равен 200 означает что запрашиваемый ресурс найден и ответил корректно. Контр пример это код 404 когда страница не найдена или 500 когда произошел сбой на стороне сервера.

Читайте также:  1С удалить все документы из базы

Собственно для окончания теоретической части вам лишь отсталось создать роут request и контроллер который будет передавать туда, какие-либо данные, напрмер список задач. Кстати если в контроллере на выходе указать массив объектов типа return $tasks Laravel сам преобразует его в JSON коллекции и отдаст в таком виде.

Вариант с выпадающим списком

В данном прмере я очень кратко покажу как можно при помощи AJAX сделать зависимый выпадающий список на Laravel. Для начала нам понадобится создать форму. Для этого я использую конструктор форм от Laravel Collective. Итак ближе к делу, после того как вы освоитесь с постоением форм через выше упомянутый конструктор, можно приступать к практике, вот моя простенькая интерпретация задачи:

Принцип здесь очень простой, предположим у нас есть два типа материала: места и события, у каждого из типов разнятся категории, но во всём остальном они в целом схожи, соответственно разделять их нет смысла, категории то и AJAXом можно подцепить =) Так вот в поле type у нас как раз эти типы и описанны. Осталось лишь перехватить событие выбора типа материала и закинуть во второй селектор категории относящиеяс к выбранному типу. Для этого мы повесили на поле событие onchange и передали элемент с выбранным вариантом через переменную this.

Теперь давайте создадим функцию которую вызывает событие и передадим туда полученный ответ:

Вот и вся магия! Осталось только в контроллере получить данные создать проверку на тип и в соответствии с этим отдать список необходимых категорий:

У меня есть небольшая хитрость в контроллере, я вызываю не известный вам метод placeCategory() и eventCategory(), вам же не обязательно так всё усложнять, и можно сократить всё до банального:

Вся магия в том, что я сделал небольшую функцию для построения вложенностей моих категорий внутри модели при помощи сортировки и вставки пробелов перед именем категории:

Ссылка на основную публикацию
Adblock detector