Interested in our services or want to ask something? Contact us!

Akademgorodok 8 / 315,
Krasnoyarsk, 663600
Russia

Ajax для новичков. Вы хотите использовать Ajax функции, но не знаете как?

Опубликовано: 05.10.2017

видео Ajax для новичков. Вы хотите использовать Ajax функции, но не знаете как?

Изучаем Ajax | Урок №1 - Что это?

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 в нем позже будет выводиться результаты обработки  формы.

rss