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

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

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); //Заменяем старый контент – новым.

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


Предварительный обзор ASUS NovaGo. На Sn...
Предварительный обзор ASUS NovaGo. На SnВ интернете достаточно долго обсуждали выход ноутбуков на процессорах компании Qualcomm. Конечно, планшет...
Обзор Fortune City. Экономим играя...
Обзор Fortune City. Экономим играяУчет собственных расходов и доходов - достаточно важная вещь для любого взрослого человека. Если вы будет...
Предварительный обзор Elephone Fighter. ...
Предварительный обзор Elephone Fighter. Если вы хоть немного следите за рынком мобильных телефонов, то за последние три-четыре месяца вам должно ...
Обзор "Королевская битва" Warface. Актив...
Обзор Привет друзья! У нас для вас достаточно интересная статья для фанатов Warface и вообще для геймеров, кото...
Компания Intel подробно рассказала про н...
Компания Intel подробно рассказала про нКомпания Intel провела традиционную встречу с партнерами и журналистами, где рассказала об успехах своих ...
Предварительный обзор Aerocool Quartz Pr...
Предварительный обзор Aerocool Quartz PrВ последнее время вышло достаточно много новых корпусов для настольного компьютера, но далеко не все эти ...
Обзор Prime Peaks. Красивые покатушки...
Обзор Prime Peaks. Красивые покатушкиНесмотря на то, что мы постоянно жалуемся на скучные казуальные игры и все в таком духе, подавляющее боль...
ASUS обновила линейку игровых ноутбуков ...
ASUS обновила линейку игровых ноутбуков В Москве 7 декабря состоялась презентация обновленной линейки игровых ноутбуков ASUS ROG. Всего были пока...
Предварительный обзор Thermaltake Core P...
Предварительный обзор Thermaltake Core PМы давненько не говорили о компьютерных корпусах, так как это достаточно обширная тема и написать о корпу...
Vivo пришла на российский рынок сразу с ...
Vivo пришла на российский рынок сразу с 7 декабря в Москве состоялась презентация Vivo, ознаменовавшая официальный приход компании в Россию. Было...
Предварительный обзор Panasonic Eluga C....
Предварительный обзор Panasonic Eluga C.Современный рынок смартфонов постоянно меняется и если производитель хочет за ним успевать, то старается ...
Предварительный обзор Huawei Honor View ...
Предварительный обзор Huawei Honor View На рынке новый тренд и не показывать устройства этого направления было бы просто глупо - вот и компания H...
МегаОбзор
МегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2017 © MegaObzor