Основы работы с AJAX при разработке сайтов

2009-03-09, Автор - Ленар Хайруллин; [1913]

JavaScriptAJAX представляет собой своеобразное асинхронное взаимодействие между клиентом и сервером, осуществляемое в «фоновом» режиме. Данные, которые отправляются серверному скрипту со стороны клиента и принимаются обратно, находятся под управлением JavaScript функций. В данной статье мы рассмотрим основные моменты работы в JavaScript, применительно к технологии AJAX.


Итак, одна из главных функций, которая нам может потребоваться в написании нашего клиентского кода – getElementById(“name”). Данная функция осуществляет доступ к элементу страницы с заданным именем (точнее, с заданным параметром id), после чего, обратившись непосредственно к свойству того или иного элемента на странице мы можем получить для нас всю необходимую информацию.

Например, на странице описан текстовый элемент:

<input type=”text” name=”first_name” id=”first_name” size=”20” />

В определённый момент времени (по наступлению какого-либо события) нам требуется узнать, что ввел пользователь в это поле. Сделать это очень просто. Создаем JavaScript функцию, которая будет вызываться по наступлению того или иного события, в которой пишем следующее:

alert(document.getElementById(“first_name”).value);

Данный пример выведет на экран alert box, содержащий текст, введённый пользователем в поле first_name. Таким образом, Вы можете получить данное значение, проанализировать его, сделать коррективы и, например, отослать в php скрипт на сервере, который обработает эти данные.

Следующий момент, который может Вам пригодиться: создание невидимых блоков на странице. Приведем пример не связанный с AJAX, но более наглядно демонстрирующий конкретный случай. Если Вы поймете все в этом примере, то применить эти знания непосредственно с использованием AJAX не составит никакого труда.

Итак, мы хотим реализовать следующую функциональность: на странице две ссылки (О нас и Контакты). Необходимо сделать так, чтобы информация «о нас» и «контакты» загружалась сразу же на одной странице и отображалась моментально (без всякой загрузки), при нажатии на ссылку. Вот html код, который понадобится нам:

<a href=”#” onclick=”showAbout()”>О нас</a><br/>
<a href=”#” onclick=”showContacts()”>Контакты</a><br/><br/>
<span id=”about” name=”about”>Информация О нас!!!</span>
<span id=”contacts” name=”contacts” style=”display:none”>Свяжитесь с нами!!!</span>

Мы описали две ссылки, по щелчку на которые будут вызываться некоторые JavaScript функции. А так же мы описали два блока <span>. В одном из них на страницу сразу же выведется информация «О нас», в другом содержится информация о контактах, но на экран она не будет выведена, так как мы сделали данный блок невидимым, используя конструкцию style=”display:none”.

Теперь нам осталось сделать так, чтобы по щелчку на «Контакты» скрывался блок с информацией «О нас», и наоборот соответственно.

Функция showAbout будет выглядеть следующим образом:

function showAbout()
{
document.getElementById(“about”).style.display = “block”;
document.getElementById(“contacts”).style.display = “none”;
}


Здесь мы говорим, что <span> с информацией о нас нам надо показать, а с информацией о Контактах – скрыть. По аналогии делаем функцию showContacts()

function showContacts()
{
document.getElementById(“about”).style.display = “none”;
document.getElementById(“contacts”).style.display = “block”;
}


Все готово!

Наконец, пожалуй, самое важное применение JavaScript в технологии AJAX для клиента – это возможность изменения вида и значений элементов страницы «на лету», при получении ответа от сервера. Реализуется это следующим образом:

var old_content = document.getElementById(“element”);
var new_content = “Допустим, здесь ответ, пришедший от сервера”;
var newEl = old_content.cloneNode(true); //делаем «клон» всего, что было внутри элемента, //информацию в которой надо дополнить пришедшей от сервера
newEl.innerHTML += new_content; //Дополняем новым контентом
old_content.parentNode.replaceChild(newEl, content); //Заменяем старый контент – новым.

Комментарии:
Последние комментарии на сайте:
Поделиться в социальных сетях:


Предварительный обзор IN WIN 305. Слишко...
Предварительный обзор IN WIN 305. СлишкоБольшинство современных корпусов за приличные деньги выглядят красиво. То есть, если вы хотите найти себе...
Предварительный обзор LG 38WK95C. Вот эт...
Предварительный обзор LG 38WK95C. Вот этДостаточно часто случаются ситуации, когда производитель показывает крутой продукт с отличными характерис...
Обзор Kingdom Come: Deliverance. Бриллиа...
Обзор Kingdom Come: Deliverance. БриллиаНа протяжении достаточно длительного времени мы слышали много информации об игре Kingdom Come: Deliveranc...
Обзор Skyway Flash. Беспроводная зарядна...
Обзор Skyway Flash. Беспроводная заряднаС каждым годом мобильные устройства получают под свое управление все новые технологии, которые со времене...
Обзор 5 Minute Plank. Качаем пресс к лет...
Обзор 5 Minute Plank. Качаем пресс к летДо лета осталось не так много времени и хотя все думают, что успеют накачать пресс за две недели, на само...
Предварительный обзор Sharkoon Skiller S...
Предварительный обзор Sharkoon Skiller SНа протяжении длительного времени мы слышали о продуктах компании Sharkoon и делились с вами этой информа...
Обзор Football Strike. Покажи кто тут са...
Обзор Football Strike. Покажи кто тут саБольшинство спортивных симуляторов имеют определенные проблемы на мобильной платформе, так как смартфон н...
Предварительный обзор Roccat Khan AIMO. ...
Предварительный обзор Roccat Khan AIMO. Компания Roccat давно доказала, что умеет делать качественную игровую периферию и пользователи любят этот...
Обзор Brickscape. Не самая сложная голов...
Обзор Brickscape. Не самая сложная головНе могу сказать, что я большой фанат очень сложных головоломок. Есть такие игры, в которых на прохождение...
Обзор PNY QI Wireless Charging Base. Бес...
Обзор PNY QI Wireless Charging Base. БесСовременные смартфоны все дальше движутся вперед и получают под свое управление множество интересных функ...
Предварительный обзор Ash of Gods. Игра,...
Предварительный обзор Ash of Gods. Игра,Попробуйте вспомнить, когда вы играли в полноценный проект от отечественного производителя. Думаю, даже с...
Обзор PNY The Family Car Charger. Автомо...
Обзор PNY The Family Car Charger. АвтомоЧастенько автовладельцы сталкиваются с проблемой нехватки USB-портов для зарядки мобильных устройств. Мно...
МегаОбзор
МегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2018 © MegaObzor