Категория: jQuery.
Ajax всё больше и больше начинает использоваться на различных web-сайтах, прелоадеры, красивые появляющиеся без перезагрузки страницы сервисные сообщения и так далее, и как же всё это работает. Если вы заинтересовались этой технологией, но не знаете с чего начать это эта статья для вас. В двух очень простых примерах вы узнаете основы, и вы увидите что это не так сложно как может показаться на первый взгляд.
Что такое асинхронный вызов?
Если мы не будем использовать Ajax, то каждый обмен данными между сервером и клиентом будет происходить по традиционной схеме, то есть о обновлением web-страницы или загрузки новой.
Например если мы заполняем какую-то форму ввода и нажимаем отправить, то введённые данные пересылаться на сервер и после обработки возвращается ответ, что влечёт за собой полное обновление страницы, то есть эта страница загружается как новый документ заменяя предыдущий.
Благодаря Ajax вместо этого, сервер и клиент может общаться «в фоновом режиме» на интервалы времени или при возникновении определенного события.
Это именно то что мы собираемся сделать и чему научиться, обмениваться данными между сервером и браузером без перезагрузки страницы. И для этого мы будем использовать JQuery, мощную библиотеку JavaScript, благодаря которой создание асинхронного вызова будет значительно упрощена.
Если у вас нет еще библиотеки JQuery , скачайте её с официального сайта.
Подготовка формы
Создадим веб-страницу ajax.html в которой будет находиться простая форма ввода в которой требуется ввести имя и фамилию.
Имя:
Фамилия:
Как вы можете видеть после формы, добавлен DIV блок с ID result в нем позже будет выводиться результаты обработки формы.
Теперь создадим страницу, result.php в которую будут отправляться данные из нашей формы. И поместим в неё следующее.
Данный код просто выводит на экран сообщение с подставленными данными, переданными из формы методом POST.
Включение JQuery и подготовка функции
Вернёмся теперь к файлу ajax.html подключим к нему библиотеку JQuery и пропишем необходимые функции.
$(document).ready(function() { // Здесь мы пропишим необходимый код });
Теперь создадим необходимый jQuery код, который будет описан более подробно ниже.
$("#input_form").submit(function(){ var name = $("#name").attr('value'); var lastname = $("#lastname").attr('value'); $.post("result.php", {name:name,lastname:lastname}, function(data){ $("div#result").html(data); }); return false; });
И так в первой строке мы утверждаем:
$(«#input_form»).submit(function(){
В элементе с идентификатором “input_form“, при возникновении события “submit”, выполнить эту функцию.
Во второй и третьей линии:
var name = $(«#name»).attr(‘value’);
var lastname = $(«#lastname»).attr(‘value’);
Мы определяем переменные имя и фамилия, снятие атрибута ‘value’ из элементов с id “name” и “last name”.
Мы продолжаем реализовывать Ajax вызов. В JQuery есть три метода управления для асинхронных вызовов это $.post, $.get, и $.ajax. В этом первом примере мы будем использовать $.post, который отправляет данные на сервер методом POST.
Синтаксис прост:
$.post(“name_of_file”, {name1:value1,name2:value2( passed parameters)}, function(data){
— нам нужно сделать чтобы ответ, который будет прислан нам сервером, составил параметр «data».
});
В нашем случае, мы посылаем запрос в result.php, предоставляя данные в качестве параметра name и переменной name (ранее расширенной содержимым поля ввода name на форме), а также параметр и переменную last name.
В случае если использовать способ $.ajax то мы получим тот же результат, но только надо переписать функцию .
$.ajax({ url: 'result.php', type: "POST", data: "name="+name+"&lastname="+lastname, success: function(data) { $("div#result").html(data); } });
Этот способ имеет немного сложнее синтаксис, но и является более настраиваемым по сравнению с методом $.post и $.get. Полный список параметров можно найти в документации.
Как управлять ajax запросом с помощью json.
В этом примере у нас будет, кнопка при нажатии на которую будет выводиться текущее время и дата на сервере. Начнём с PHP страницы (result2.php).