Ajax для новичков. Вы хотите использовать Ajax функции, но не знаете как?
05.10.2017
Ajax всё больше и больше начинает использоваться на различных web-сайтах, прелоадеры, красивые появляющиеся без перезагрузки страницы сервисные сообщения и так далее, и как же всё это работает. Если вы заинтересовались этой технологией, но не знаете с чего начать это эта статья для вас. В двух очень простых примерах вы узнаете основы, и вы увидите что это не так сложно как может показаться на первый взгляд.
Что такое асинхронный вызов?
Если мы не будем использовать Ajax, то каждый обмен данными между сервером и клиентом будет происходить по традиционной схеме, то есть о обновлением web-страницы или загрузки новой.
Например если мы заполняем какую-то форму ввода и нажимаем отправить, то введённые данные пересылаться на сервер и после обработки возвращается ответ, что влечёт за собой полное обновление страницы, то есть эта страница загружается как новый документ заменяя предыдущий.
Основы jQuery - 10 ajax
Благодаря Ajax вместо этого, сервер и клиент может общаться "в фоновом режиме" на интервалы времени или при возникновении определенного события.
Это именно то что мы собираемся сделать и чему научиться, обмениваться данными между сервером и браузером без перезагрузки страницы. И для этого мы будем использовать JQuery, мощную библиотеку JavaScript, благодаря которой создание асинхронного вызова будет значительно упрощена.
Изучаем Ajax | Урок №6 - Формат JSON
Если у вас нет еще библиотеки JQuery , скачайте её с официального сайта.
Подготовка формы
Создадим веб-страницу ajax.html в которой будет находиться простая форма ввода в которой требуется ввести имя и фамилию.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <form id="input_form" action="?"> Имя:<br /> <input type="text" name="name" id="name"/><br /> Фамилия:<br> <input type="text" name="lastname" id="lastname"/><br/ ><br/ > <input type="submit" value=" Отправлять "> </form> <div id="result"></div> </body> </html>Как вы можете видеть после формы, добавлен DIV блок с ID result в нем позже будет выводиться результаты обработки формы.