Отправка формы без перезагрузки страницы с использованием AJAX

Коллбэки, с которыми вы сейчас хорошо знакомы, хорошо подходят для событий в браузере, но они просто необходимы при использовании технологии AJAX (Асинхронный JavaScript и XML). AJAX отправляет данные (или запрос данных) на сторону сервера и ждет от него ответ, не прерывая работу браузера. Вы передаете коллбэк функции AJAX, и когда ответ сервера будет наконец получен, вы вызовете коллбэк с возвращенными данными.

Лучшим свойством AJAX является то, что исчезает необходимость перегружать страницу полностью. Данные, полученные от сервера, представляют собой просто пакет данных JSON, а не полноценный документ HTML, так что вы можете обработать их внутри вашей страницы. С помощью AJAX вы можете создавать одностраничные сайты и например скрывать медленную загрузку содержимого (например при низкой скорости) путем загрузки страницы по частям.

Пункты для размышления

  • Что такое AJAX?
  • Что такое JSON?
  • Как выглядит ответ JSON?
  • Как применить основной метод AJAX в Javascript?
  • Как использовать метод(ы) AJAX в jQuery?
  • Для чего хороши "вспомогательные" методы (например $.post)?
  • Как преобразовать данные для отправки на сервер?
  • Для чего нужен метод #serialize?
  • Как обработать пришедшие с сервера данные?
  • Как обработать возникающие при этом ошибки?
  • Как использовать события для "прослушивания" операций AJAX, например вы хотите создать оповещение "загрузка...", которое исчезнет после окончания загрузки?

Ваши задания

  1. Для введения в технологию, прочтите AJAX от learn.jquery.com. Дочитайте до ссылок в конце статьи ("Key Concepts").
  2. Посмотрите на AJAX с другой стороны, почитав То, Что Вы Должны Знать Об AJAX (2010) от Smashing Magazine.
  3. Если все еще ищете другого объяснения, прочтите Отправка формы через jQuery как запрос AJAX.

Дополнительные ресурсы

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

Поделиться уроком: