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

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

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

Комментарии:
ViewSonic XG2703-GS, ViewSonic XG3220 и ...
ViewSonic XG2703-GS, ViewSonic XG3220 и ViewSonic приняла участие в выставке «ИгроМир 2018», представив свои новые геймерские продукты на стенде ...
Бюджетный смартфон Meizu M7 получит SoC ...
Бюджетный смартфон Meizu M7 получит SoC В базе данных популярного бенчмарка GeekBench обнаружились сведения о смартфоне Meizu, который фигурирует...
Huawei Mate 20, Mate 20 Pro и Mate 20X н...
Huawei Mate 20, Mate 20 Pro и Mate 20X нПрофильное издание Slashleaks поделилось фотографиями, на которых запечатлены смартфоны Huawei Mate 20, M...
Смартфон-слайдер Xiaomi Mi Mix 3 предста...
Смартфон-слайдер Xiaomi Mi Mix 3 предстаКомпания Xiaomi объявила, что официальный анонс флагманского смартфона Xiaomi Mi Mix 3 состоится 25 октяб...
Анонсирован компьютерный корпус Sharkoo...
Анонсирован  компьютерный корпус SharkooСостоялся анонс компьютерного корпуса Sharkoon Pure Steel формата Mid Tower. Сообщается о применении мате...
Rosewill выпустила компьютерный корпус P...
Rosewill выпустила компьютерный корпус PПредставлен компьютерный корпус Rosewill Prism S500 с RGB-подсветкой формата Mid Tower. Сообщается о прим...
Корпус In Win 103 предназначен для игров...
Корпус In Win 103 предназначен для игровПредставлен компьютерный корпус In Win 103 в двух цветовых вариантах цветового исполнении. Аппарат предна...
ТОП-5 популярных моделей Smart Baby Watc...
ТОП-5 популярных моделей Smart Baby WatcЛюбой родитель беспокоится о своём ребёнке, особенно если он ещё совсем маленький. Современные гаджеты...
Поделиться в социальных сетях:


Предварительный обзор Creative Sound Bla...
Предварительный обзор Creative Sound BlaДлительное время разработчики игровой периферии активно избегали консоли. Рынок был не очень развит, да и...
Обзор Bouncemaster. Шикарная игра...
Обзор Bouncemaster. Шикарная играНа  современном рынке казуальных игр есть большая проблема с отсутствием новых ярких идей. Большая часть ...
Предварительный обзор Thermaltake View 3...
Предварительный обзор Thermaltake View 3Компьютерные корпусы давно перестали быть чем-то обычным. Сейчас пользователи покупают настоящие произвед...
Предварительный обзор SteelSeries Rival ...
Предварительный обзор SteelSeries Rival Рынок игровой периферии давно перестал быть чем-то простеньким и недорогим. Геймеры хотят получить от пер...
Honor представила премиальный смартфон H...
Honor представила премиальный смартфон H10 октября в Москве прошла презентация смартфона Honor 8X. Модель позиционирует себя, как премиальный сма...
Предварительный обзор Alienware m15. Шик...
Предварительный обзор Alienware m15. ШикВ последнее время игровых ноутбуков стало все меньше — то производители прямо каждый день выпускали новые...
Обзор Battlerite Royale. Королевская бит...
Обзор Battlerite Royale. Королевская битКоролевские битвы пользуются бешеной популярностью среди геймеров — каждый хочет получить удовольствие от...
Предварительный обзор Nokia 7.1. Достойн...
Предварительный обзор Nokia 7.1. ДостойнБуквально вчера в сети была информация о мобильном телефоне Nokia 7.1, которую многие опровергали. Мы даж...
Обзор My Brother Rabbit. Отличная истори...
Обзор My Brother Rabbit. Отличная историЯ довольно редко играю в квесты и сюжетные игры в этом жанре мне нравятся невероятно редко. Обычно разраб...
Предварительный обзор Realme 2 Pro. Вот ...
Предварительный обзор Realme 2 Pro. Вот Весной этого года компания Oppo показала виру новый бренд Realme, который является дочерним предприятием....
Обзор Standoff 2. Шутер нового поколения...
Обзор Standoff 2. Шутер нового поколенияРазвитие мобильных шутеров идет против всех правил и аналитики. Уже несколько лет к ряду все говорят о то...
Предварительный обзор Huawei Y9 (2019). ...
Предварительный обзор Huawei Y9 (2019). Все понимают, что современным гигантам мобильного рынка довольно трудно как-то удивлять своего потенциаль...

МегаОбзорМегаОбзор
ЭЛ № ФС 77 - 68301. Выдано РоскомнадзоромМегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2018 © MegaObzor