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

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

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

Комментарии:
Обзор Harper HB-415. Беспроводные наушни...
Обзор Harper HB-415. Беспроводные наушниБольшинство беспроводных наушников предлагают только подключение по протоколу Bluetooth, часть моделей до...
Экономим деньги с Яманета...
Экономим деньги с ЯманетаВ последнее время кэшбек сервисы плотно вошли в нашу жизнь и не планитуют отсюда уходить. Все дело в том,...
Покупаем элитную косметику...
Покупаем элитную косметикуМагазин элитной натуральной косметики Bonvivant предоставляет потенци...
Бизнес на грузоперевозках по городу - с...
 Бизнес на грузоперевозках по городу - сВ нашей стране до 2014 года активно развивались два вида бизнеса. Женщины активно занимались ногтевым ...
Красим ногти гель лаком и зарабатываем ...
 Красим ногти гель лаком и зарабатываем Ни для кого не является секретом, что основной вид заработка многих современных женщин - это ногтевой ...
УАЗ Профи, что за отзывы можно найти?...
УАЗ Профи, что за отзывы можно найти?Владельцы об УАЗ Профи: мощный, комфортный и недорогой Новинку Ульяновского завода – полуторат...
Ультрапортативная колонка Lenovo размеро...
Ультрапортативная колонка Lenovo размероLenovo 700 Ultraportable Bluetooth Speaker в буквальном смысле является самым портативным Bluetooth-динам...
Новый электрический мотоцикл Lightning S...
Новый электрический мотоцикл Lightning SКомпания Lightning Motorcycles, производитель скоростных мотоциклов LS-218, анонсировала свой первый элек...
Поделиться в социальных сетях:


Предварительный обзор LucidSound LS41. П...
Предварительный обзор LucidSound LS41. ПИгровые гарнитуры давно перестали быть просто средством передачи звука в уши геймера. Сегодня, если вы хо...
Предварительный обзор GIGABYTE Aorus AD2...
Предварительный обзор GIGABYTE Aorus AD2В последнее время игровых мониторов появилось нереально много и каждый обладает какими-то своими особенны...
Обзор Lemmings. Странная головоломка...
Обзор Lemmings. Странная головоломкаИграть в головоломки на смартфоне то еще удовольствие — иногда разработчик делает слишком сложные уровни,...
Предварительный обзор Sony A6400. Новая ...
Предварительный обзор Sony A6400. Новая Сегодня компания Sony официально анонсировала свою новую беззеркальную камеру под названием A6400, котора...
Обзор Evil Factory. Динамит на все случа...
Обзор Evil Factory. Динамит на все случаВ казуальных играх геймеры ценят возможность зайти, быстро поиграть и двинуться дальше. Очень небольшая а...
Предварительный обзор Vivo Z3i Standard ...
Предварительный обзор Vivo Z3i Standard Производителям смартфонов сейчас крайне тяжело удивлять своих потенциальных покупателей — мы уже вдоволь ...
Обзор Space Pioneer. Очищаем космос от з...
Обзор Space Pioneer. Очищаем космос от зТема покорения космоса многим интересна по целому ряду причин. Например потому, что на самом деле практич...
Предварительный обзор Dell Inspiron 7000...
Предварительный обзор Dell Inspiron 7000На выставке CES 2019 показали множество интересных игровых устройств, продемонстрировали игровые мониторы...
Обзор Potion Punch. Готовим странные нап...
Обзор Potion Punch. Готовим странные напКрайне редко в последнее время мне попадаются интересные казуальные игры, которыми действительно можно ка...
Предварительный обзор MSI Prestige PS341...
Предварительный обзор MSI Prestige PS341Мы привыкли к тому, что компания MSI выпускает исключительно игровые решения — мониторы, клавиатуры, мышк...
Обзор Almost Hero. Лучший кликер...
Обзор Almost Hero. Лучший кликерБольшинство современных кликеров построены на основе довольно простых механик, которые очень быстро приед...
Предварительный обзор Lenovo Legion Y27g...
Предварительный обзор Lenovo Legion Y27gИгровые мониторы пользуются невероятной популярностью среди геймеров, так как это действительно крутой пр...

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