Jquery Ajax: использование и функции

Термин Ajax расшифровывается как Asynchronous Javascript and XML (асинхронный Javascript и XML) и обозначает технологию построения запросов без перезагрузки страницы: если отправить какие-то данные на сервер, он отвечает, и при этом страница не обновляется. Самый простой пример Ajax-запроса - это поиск. Если открыть поисковую систему и начать набирать запрос, под строкой с ним сразу появятся подсказки, но страница при этом не обновится. Для сокращенной записи вызова методов Jquery используется знак доллара.

Преимущества Ajax

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

ajax libs jquery

Применение Ajax и JQuery

Существование интерактивных приложений не было бы возможно без технологии Ajax. Она применяется в работе ангулара (AngularJS) - фреймворка для JS. Использовать технологию Ajax на всей странице целиком необязательно. Его можно применять только для некоторых элементов обновляющейся страницы. Например, для автозамены, валидации форм и поиска.

Библиотека JQuery - это коллекция готовых решений, написанных на JS. Найти ее можно по запросу “Ajax libs Jquery”. Есть вариант ее подключения через специальный сервис Google. Он называется Ajax Googleapis. Jquery в этом случае подключается напрямую. Разумеется, это ускоряет загрузку страницы. Чаще всего пользователи находят мини-версию Jquery Ajax на Googleapis.com. Она обладает урезанным функционалом, но более удобна для новичков. Называется мини-версия Ajax Jquery на Googleapis.com - min.js.

ajax googleapis com ajax libs

Форматы передачи данных

XML в расшифровке аббревиатуры Ajax - это формат обмена данных. Изначально, когда технология только была создана, обмен происходил только с его помощью. XML очень похож на HTML, но в нем все теги обязательно должны быть закрыты. Позже внутри языка JS появился новый формат - JSON. Он оказался настолько простым и удобным, что распространился на другие языки и библиотеки. JSON лучше подходит для передачи небольшого объема данных, до 20 тыс. строк. С ним проще работать, он более гибкий и понятный для программиста. При большем количестве информации предпочтительнее использование XML. Например, отправка запросов на "Яндекс-поиск" реализована при помощи этого формата.

Создание простейшего документа в формате JSON

В языке JS все свойства описывают один глобальный объект window, то есть окно браузера. Все библиотеки описывают функции (методы) и свойства этого объекта. JSON - это отдельный класс, который наследуется от объекта и имеет два собственных метода: parse и stringify. Подробнее оба метода мы рассмотрим ниже.

ajax googleapis com ajax libs jquery

Работать с Ajax можно из JS без использования JQuery. Строку в формате JSON можно преобразовать в объект JS и обратно. Рассмотрим, как это сделать на примерах. Сначала создадим документ и назовем его, например, “man” с расширением JSON. Далее последовательно выполняем следующие шаги:

  1. Откроем файл в редакторе кода, например, PhpStorm или Sublime.
  2. У формата JSON собственный синтаксис. Сначала создается объект - для него нужны фигурные скобки.
  3. В скобках должны присутствовать ключ и его значение. Ключи должны быть в двойных кавычках. В стандартном JS при создании объекта ключ пишется без кавычек. Например, для объекта “man” в формате JSON нужно создать ключи “name” (имя) и “age” (возраст). В итоге мы получаем такой код: { “name”: “Pavel”, “age”: 28 }.

Если вам нужны несколько объектов, они помещаются в массив, который выделяется квадратными скобками. Важно учитывать, что формат JSON не поддерживает комментарии. В любом виде это будет ошибкой. Но особой необходимости в них нет.

Сами значения ключей могут быть следующих типов:

  • строка;
  • число;
  • массив;
  • объект.

Массив записывается в квадратных скобках, объекты в нем заключаются в кавычки и перечисляются через запятую. Также можно добавить вложенный объект, например, адрес. Его нужно будет заключить в фигурные скобки. Вот так быстро создается простейший документ в формате JSON. За удобство использования его и полюбили разработчики.

jquery ajax post

Преобразование строки в объект

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

<script>

var json= ‘{ \

“name”: “Pavel”, \

“age”: 28}’;

</script>

Нужно следить, чтобы ключи были в двойных кавычках, иначе возникнет ошибка. Мы получили простейшую строку. Она может прийти с любого сервера. Чтобы убедиться, что это именно строка, ее можно вывести в консоль, добавив в код команду “console.log(json)”. Теперь преобразуем строку в объект. Для этого сначала объявляем переменную и вызываем для нее специальный класс parse: var jsonObj = JSON.parse(). Затем передаем параметр. Для работы с форматом JSON в JS есть специальный класс с таким же названием. Таким образом можно преобразовывать строку в объект. Если по каким-то причинам преобразование невозможно, появится предупреждение. Для подтверждения, что все сделано правильно, обе переменные можно вывести в консоль. В первом случае при выводе в консоль строки после значений появятся пробелы, так как JS посчитает их количество до знака слэш. Это не ошибка, но для красоты кода лишние пробелы желательно убирать.

jquery ajax php

Преобразование объекта в строку

Можно выполнить обратное действие и преобразовать объект в строку. Для этого объявляем переменную и снова используем класс JSON, добавляя его через точку, но выбираем другой метод - stringify: var ObjtoStr = JSON.stringify(). Затем передаем нужный параметр. Эта команда выполняет обратное преобразование. Этот параметр может передать все, что нам нужно, например, только имя. Для этого нужный ключ нужно заключить в квадратные скобки. Так можно работать с JSON из JS.

Передача запроса на сервер

Теперь перейдем к Ajax и отправим этот запрос на сервер. Вначале нужно создать объект XMLHttpRequest. Этот класс отвечает за передачу запроса и позволяет создавать его без перезагрузки страницы. Использоваться будет JSON, но название класса не изменилось: XML. Код для отправки запроса выглядит так: var xhr = XMLHttpRequest(). Отправлять опции пока не будем. Теперь сконфигурируем этот запрос. Для этого пишем: xhr.open(). У метода open будем конфигурировать адрес. Для этого в скобках добавляем слово ‘GET’. Далее через запятую в одинарных кавычках пишем адрес хоста, куда нужно отправить запрос. В конце строки добавляем имя объекта, то есть загружаемого файла - в нашем случае это “man.json”.

ajax jquery примеры

Синхронный и асинхронный запрос

Третий параметр, который необходим для отправки запроса, - определение того, будет он синхронным или нет. Он называется async и имеет два значения: false - запрос производится синхронно, и true – в этом случае он будет асинхронным. Если запрос синхронный, сценарий дожидается ответа. Если ответ займет секунду, то следующая строка кода не обработается. Синхронный запрос будет выполняться в отдельном потоке, и скрипт продолжит выполнение команд. В нашем случае понадобится первое значение, так как иначе проверку ответа придется делать через событие и присвоить функцию, которая выполнится, как только запрос придет.

Далее добавляем еще одну строчку кода: xhr.send(). Теперь в ответ на запрос должен прийти код. Это может быть код “200”, означающий, что сервер доступен, “404” - документ не найден, “300” - редирект и “500” - ошибка со стороны сервера. Для того чтобы узнать, есть ли ошибка, нужно сравнить код с “200”. Для этого добавляем в код следующую строку: if(xhr.status !=200) и выводим значение в консоль. Если все хорошо, начнет выполняться ветвь else, в которую добавляем вывод в консоль со значением “ОК”. Таким образом, мы отправили запрос на сервер при помощи JS и узнали, как работает Ajax из JS. Мы создали XMLHttpRequest, указали метод, путь, синхронность или асинхронность и получили результат.

JQuery Ajax

Опытные программисты чистый JS для работы не используют, а применяют какую-либо библиотеку - чаще всего JQuery. Запросы JS Ajax в JQuery создавать гораздо проще, именно поэтому она стала так популярна. Попробуем улучшить скрипт с помощью этой библиотеки. Сначала JQuery нужно скачать. Она поставляется в нескольких версиях. Подключить библиотеку можно через сервис Google Code. Есть вариант для разработчиков, где осталась возможность комментирования и переноса строки. Другая версия - минимальная. Она находится по адресу: ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. Эту библиотеку имеет смысл подключать на рабочем сервере. Добавить библиотеку можно при помощи следующего кода через сервис Google Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

В этом коде для примера используется версия 3.1.0. Для корректной работы нужно добавлять актуальную версию. Важно, чтобы адрес начинался с "//ajax.googleapis.com/ajax/libs/jquery”. Затем создаем новый файл в формате html и подключаем библиотеку, указав адрес ее расположения в теге script и расположив его в head. Далее начинаем писать сам скрипт. Начинаем его вот с такой строки: $(document).ready(). Когда документ будет готов, вызовется вложенная функция: (function () {}). Это необходимо для того, чтобы загрузилась DOM-модель, с которой мы работаем, то есть все, что находится в теге body. Если этого не сделать, скрипт обработается раньше, чем загрузится DOM-модель.

Создание формы

В качестве примера Jquery Ajax создадим форму. Для этого создаем div с классом form и добавляем в него input с типом “text” и атрибут name со значением “name”. Затем добавляем еще один input, с типом “text” и именем “address”. Каждому из input присваиваем идентификатор. В качестве идентификатора можно использовать значения атрибутов name. Добавляем подсказку для обоих input с предложением пользователю ввести имя и адрес. По желанию можно добавить еще одну строку для возраста. Теперь осталось сделать кнопку для отправки формы. Внутри тега button пишем слово “отправить” и добавляем идентификатор btn. Добавляем разделители - теги br - на каждую строку и проверяем, что получилось.

jquery ajax

Можно добавить внешние отступы, записав их в теге стилей, но это необязательно. Пока форма не работает. Для ее функционирования к кнопке нужно привязать событие, так как данные будут отправляться именно при ее нажатии. Для этого выбираем кнопку по селектору и вводим событие “click”: $(‘#btn’).on(‘click’). Теперь при клике выполнится эта функция. Мы используем метод on, который подписывает определенную функцию на событие click по какому-то элементу. То есть, когда на кнопку будут кликать, она будет срабатывать. Проверяем, что все работает, при помощи вывода в консоль. Методов отправки запроса в Jquery Ajax не так много. Можно использовать get, post или просто Ajax. Так как эти данные могут что-то изменять, мы будем использовать метод Jquery Ajax post.

Получение значений полей формы

На следующим шаге нам нужно получить значения всех полей формы. В Jquery Ajax есть два варианта, как это сделать. Можно использовать функцию или обойтись без нее. Для первого варианта пишем такой код: var name = $(‘#name’). Затем добавляем аналогичные строки для адреса и возраста. Мы получили ссылки на элементы, а не сами значения. Теперь используем метод Jquery Ajax post. Для этого пишем: $.post(). Теперь метод нужно настроить. Он принимает url-адрес, куда будет отправляться форма. Для этого будем использовать валидатор. Для этого в скобках пишем ‘/validator.php’.

Добавляем еще один параметр - сами данные: var data = ‘name=’+name.val() + ‘&address=’ + address.val() + ‘&age=’ + age.val(). Теперь у нас есть данные, полученные методом Jquery Ajax. Остается лишь добавить функцию callback, которая будет вызвана, когда придет ответ от сервера. У нее нужно прописать следующие параметры: данные сервера, описание статуса и того, был ли выполнен запрос. Выводим в консоль параметр data, чтобы проверить, что все работает. Также важно учитывать, что Ajax-запрос всегда делается в юникоде, потому кодировка документа должна быть utf-8. Если сайт и сервер в другой кодировке, а Ajax выполняется в юникоде, то сервер вернет иероглифы, и строку придется перекодировать. Для того чтобы избежать этого, желательно все делать в utf-8.

Работа с PHP

Теперь используем Jquery Ajax с PHP. Создаем новый файл и называем его validator.php. Выведем наши данные. Для этого пишем: $array = $post. Теперь выводим все данные в формате JSON: echo JSON_encode($array). Проверяем, как работает форма, заполняя поля и отправив запрос серверу. Если все сделано правильно, мы получим объект с заданными параметрами. Мы получили данные, теперь их нужно обработать и записать. Пишем: if(isset( $post [‘name’])&&(isset( $post [‘age’])&&(isset( $post [‘address’]). Isset обозначает, что такая переменная существует. Далее добавляем условие: else{ $array [‘status’] = ‘error’}. Проверяем, все ли работает. Если в коде есть ошибки, ищем и исправляем их. Благодаря асинхронности в передаче запроса пользователь может вводить дополнительную информацию в момент, когда идет передача на сервер. Можно использовать не только язык программирования PHP, но и другие серверные языки.