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

AJAX представляет собой своеобразное асинхронное взаимодействие между клиентом и сервером, осуществляемое в «фоновом» режиме. Данные, которые отправляются серверному скрипту со стороны клиента и принимаются обратно, находятся под управлением 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); //Заменяем старый контент – новым.