03:31 Хотите пользоваться преимуществом AJAX, но не знаете, как? | |
| AJAX всё чаще и чаще используется на различных веб-сайтах, иногда даже тогда, когда можно обойтись без его применения. Если вас привлекает эта технология, но вы не знаете, с чего начать, то эта статья, как раз, для вас. В двух максимально простеньких примерах вы научитесь основам, а также узнаете то, насколько легко это делается, благодаря современным средам разработки. Что такое асинхронный вызов? Если мы не используем AJAX, то для того, чтобы любое изменение информации вступило в силу, нам нужно перезагружать страницу. Когда мы вписываем что-то в форму и нажимаем на кнопку «послать», например, то разрабатываемая страница посылает запрос с той информацией, которую мы ввели, на сервер, с которым мы имеем дело. Сервер обновляет информацию, и отсылает результат обратно. В итоге, страница загружается уже как новый документ, который заменяет предыдущую страницу в нашем браузере. Вместо этого, благодаря технологии Ajax, клиент и сервер могут взаимодействовать «в фоновом режиме», что означает работу при определенных временных интервалах или обработку конкретных событий на странице. Например, нажатием на кнопку «послать» (что представляет собой событие подтверждения), отправляется запрос, который будет обработан сервером и, впоследствии, сервер отошлет результат обратно нашему браузеру. Изменения информации будет произведено, но без перезагрузки страницы. Это именно то, что мы сегодня собираемся сделать. Мы собираемся воспользоваться jQuery – мощной библиотекой javascript, которая уже много раз была отмечена во многих статьях на нашем сайте. Благодаря jQuery, асинхронный вызов может быть крайне просто реализован. Если у вас до сих пор нет jQuery, скачайте его на официальном веб-сайте. Подготовка формы Создаем страницу ajax.html и вставляем туда простую форму, которая запрашивает информацию «имя» и «фамилия». В этой HTML-разметке мы добавили элемент «результат», который отображает нам форму, куда будет внесен результат, полученный в ответ от сервера уже после обработки. Подготовка страницы обработки на сервере Теперь давайте создадим страницу result.php, которая будет принимать и обрабатывать данные, полученные из формы: echo "You have inserted the following data: Name->$_POST[name] and Last name->$_POST[lastname]. You have executed an asynchronous call!"; ?> Как видно, здесь суть заключается в печати данных из формы на экран. Внедрение jQuery и подготовка функции Теперь давайте вернемся к файлу ajax.html. Мы внесем библиотеку jQuery и настроим её на функцию, требуемую для нашего примера. Нам нужно отредактировать шапку вот так: <script type="text/javascript" src="jquery-1.4.1.js"> <script type="text/javascript"> $(document).ready(function() { //Here we will write the necessary code }); Теперь давайте напишем нужный код 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(){ В элементе с id «input_form» в области с событием «submit», нужно выполнить функцию. Во второй и третьей строке: var name = $("#name").attr('value'); var lastname = $("#lastname").attr('value'); мы подчеркиваем переменные name и last name, отодвигая атрибут «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. Мы вносим результат в элемент «result». Наконец, если мы используем формы, нам всегда нужно учитывать функцию прерывания процедуры. Проверяя данный код (смотрите пример) на форме, вы сможете отобразить фразу без перезагрузки страницы. Данные будут отправлены на сервер асинхронным способом, что будет реализовано посредством PHP-страницы. Данные страницы будут отосланы клиенту и внесены в DOM. Если бы нам нужно было использовать $.ajax для реализации той же процедуры, то нам нужно переписать функцию примерно так: $.ajax({ url: 'result.php', type: "POST", data: "name="+name+"&lastname="+lastname, success: function(data) { $("div#result").html(data); } }); Как вы можете видеть, у $.ajax код немного посложнее. Это потому, что данный метод позволяет нам провести больше параметров (к тому же, он лучше поддается конфигурации, по сравнению с $.post и $.get). Полный список возможных параметров можно посмотреть в документации. Давайте сделаем еще один пример. Некоторое время назад, веб-разработчик по имени Николас написал отличную статью под названием «Хотите использовать Json, но не знаете, с чего начать?» (оригинальное название: «You want to use Json but don’t know where to start from?»). Если вы не знакомы с форматом Json, то мы советуем вам перечитать эту статью, а потом продолжить с этим текстом. Как добиться формата Json в запросах Ajax? Во втором примере мы воспользуемся кнопкой подтверждения (submit) в форме для того, чтобы осуществить запрос к серверу. Более того, мы запросим его отослать нам данные о времени: текущее время и дату. Вы увидите результат на странице примера. Давайте приступим к разработке страницы PHP (result2.php). $time = time(); $hour = date("H:i:s"); $day = date("j/n/Y"); echo "{'timestamp':'$time','hour':'$hour','day':'$day'}"; ?> Берём индикатор времени, время и дату, затем выводим его на экран в формате Json (name:value – имя:значение). Теперь давайте перейдем к странице ajax-json.html <script type="text/javascript" src="jquery-1.3.2.js"> <script type="text/javascript"> $(document).ready(function() { // here we will write the function }); The actual timestamp is: which corresponds to time: of day: Как вы можете видеть, форма состоит только лишь из кнопки. В элементе #result у нас подготовлены фразы, которые отправляются запросом на сервера. Далее они будут завершены отправленными данными. Давайте посмотрим, как это реализовать. $("#input_form").submit(function(){ $.ajax({ url: 'result2.php', dataType: "json", success: function(data) { $("#timestamp").html(data.timestamp); $("#hour").html(data.hour); $("#day").html(data.day); } }); return false; }); Что означает данный код? В элементе #input_form, при определении события submit, выполняется следующая функция: Создается ajax-запрос к странице result2.php. Теперь мы установили параметр dataType посредством значения json. Это сообщает jQuery о том, что ответ должен быть именно в таком формате, следовательно, ответ от сервера будет вставлен в объект «data». По этой причине, например, значение, которое мы отправили с названием дня (‘day’:'$day’), мы получим в виде data.day. Таким образом, мы можем внести три значения (здесь интересно то, что относительно предыдущего примера, в котором результат являлся отдельным блоком, теперь мы можем управлять данными по отдельности) в позицию, основанную на заданных значениях id. Ajax и удобство использования При использовании Ajax, всегда нужно быть очень внимательным. Предположим, что запрос достаточно сложен и/или то, что сервер работает очень медленно или в данный момент перегружен. Процесс может занять даже несколько секунд. С обычными запросами, мы хотя бы видим в строке состояния браузера сообщения о том, что следует подождать ответа сервера. Если же запрос реализован посредством ajax, эти сообщения не отображены. В результате, пользователь может подумать, что ничего не происходит, и закроет страницу или «тыкнет» по кнопке несколько раз подряд. Это и есть проблема удобства использования, что значительно отличается от того, что было написано в первом и пятом параграфах декалога Нильсена. По этой причине, нам просто нужно отключить кнопку на протяжении всей процедуры отправки и получения запроса, а также добавить небольшое изображение, которое будет указывать на то, что что-то всё-таки происходит. Например, вот так: [img]/uploads/posts/2010-10/1288255062_ajax-01.gif[/img] Давайте возьмем последний пример (ajax-json.html) и кое-что в нём изменим: Вставляем изображение рядом с кнопкой [img]loading.gif[/img] Делаем изображение невидимым посредством данного класса в нашем CSS: .loading{ display: none; } Теперь, при определении события submit, мы отключаем кнопку и отображаем изображение: $(".button").attr("disabled", "disabled"); $(".loading").show(); И как только процесс завершается, мы снова включаем кнопку и прячем изображение: $(".button").removeAttr("disabled"); $(".loading").hide(); Вот так будет выглядеть код уже исправленной страницы: <script type="text/javascript" src="jquery-1.3.2.js"> <script type="text/javascript"> $(document).ready(function() { $("#input_form").submit(function(){ $(".button").attr("disabled", "disabled"); $(".loading").show(); $.ajax({ url: 'result2.php', dataType: "json", success: function(data) { $("#timestamp").html(data.timestamp); $("#hour").html(data.hour); $("#day").html(data.day); $(".button").removeAttr("disabled"); $(".loading").hide(); } }); return false; }); }); The current timestamp is: That corresponds to hours: of day: Очевидно, наш запрос настолько прост, что здесь порой сложно будет заметить появление изображения и отключение кнопки. Но если вы хотите протестировать данную функцию, добавьте следующий код в начало кода страницы result2.php. sleep(2); Таким образом, выполнение запроса займет пару секунд, тем самым дав нам посмотреть результат. В заключение В этой статье мы ознакомились с двумя примерами асинхронных запросов с использованием jQuery. Как вы, наверное, заметили, внедрение данной среды даёт нам возможность достичь некоторых целей посредством всего нескольких строчек кода. В следующей статье мы немного расширим диапазон: постараемся создать более продвинутое приложение. Попробуем объяснить: наверняка вы когда-нибудь «игрались» на веб-сайте, скажем, где продаются автомобили. Там у вас есть возможность в реальном времени выбирать модель и цвет авто. Вот именно это мы и постараемся сделать. Думали, что использовать ajax гораздо сложнее, не правда ли? | |
|
| |
| Всего комментариев: 0 | |
