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

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

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

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


Предварительный обзор Xtrfy K3. Новая иг...
Предварительный обзор Xtrfy K3. Новая игШведская киберспортивная организация Ninjas in Pyjamas, которая была организована в 1999 году и сейчас яв...
Обзор Eternal. Очень крутая карточная иг...
Обзор Eternal. Очень крутая карточная игМы следим за развитием игры Eternal еще с того времени, когда информация о проекте только появилась, а по...
Предварительный обзор BlackBerry Motion....
Предварительный обзор BlackBerry Motion.Стоит отметить, что еще за две недели до официального анонса смартфона BlackBerry Motion, продукт уже был...
Предварительный обзор Samsung HMD Odysse...
Предварительный обзор Samsung HMD OdysseШлем виртуальной реальности это всегда интересно - производители со всего мира стараются создать сио идеа...
Предварительный обзор Maze Alpha X. Неск...
Предварительный обзор Maze Alpha X. НескВ последнее время китайские мобильные телефоны пользуются громадным спросом по той причине, что они дешев...
Обзор Dungeons 3. Это невероятно весело...
Обзор Dungeons 3. Это невероятно веселоКогда Kalypso Media и Realmforge Studios анонсировали свою новую игру Dungeons 3 и назвали ее самым обшир...
Lenovo Explorer. Доступный VR в массы...
Lenovo Explorer. Доступный VR в массыНе так давно на прошедшей выставке IFA 2017 был представлен шлем виртуальной реальности Lenovo Explorer, ...
Обзор HOB. Очень атмосферная игрушка...
Обзор HOB. Очень атмосферная игрушкаИгра Hob это что-то, что сложно описать словами и вам скорее нужно попробовать ее самостоятельно, дабы оц...
Предварительный обзор Google Pixel 2. Не...
Предварительный обзор Google Pixel 2. НеБуквально пару дней назад состоялся официальный анонс мобильного телефона Google Pixel 2 и его старшей ве...
Обзор Total War: WARHAMMER II. Хорошо, к...
Обзор Total War: WARHAMMER II. Хорошо, кХорошая, правильная механика боя в Total War была продумана и доделана уже достаточно давно, так что кажд...
Предварительный обзор Patriot Viper V570...
Предварительный обзор Patriot Viper V570Пользователи привыкли, что мышки хорошие выпускают только именитые бренды вроде ASUS или Razer и относятс...
Обзор Яндекс.Метро. Удобно и быстро...
Обзор Яндекс.Метро. Удобно и быстроДанный обзор будет интересен в первую очередь жителям Москвы, так как рассказывать о приложении я буду им...
МегаОбзор
МегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2017 © MegaObzor