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

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

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

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


Предварительный обзор Lenovo K8 Note. Ши...
Предварительный обзор Lenovo K8 Note. ШиМобильный телефон Lenovo K8 Note интересен не только своим внешним видом, начинкой и прочими моментами, о...
Обзор Space Frontier. Развлекаемся по-пр...
Обзор Space Frontier. Развлекаемся по-прДалеко не все игровые продукты создаются с целью придумать что-то новое, дать игроку возможность играть в...
Предварительный обзор Sharp Aquos S2. Ин...
Предварительный обзор Sharp Aquos S2. ИнБольшинство производителей мобильных телефонов сейчас стараются выпустить свои устройства с минимальными ...
Обзор Colorcube. Слишком красиво...
Обзор Colorcube. Слишком красивоЕсть определенный тип игровых продуктов на мобильной платформе, который загружают исключительно ради эсте...
Обзор Flippy Knife. Как залипнуть на час...
Обзор Flippy Knife. Как залипнуть на часЕсли честно, от игры Flippy Knife я не ожидал ничего серьезного - сразу видно, что продукт создавали с пр...
Предварительный обзор Fly Selfie 1. Смар...
Предварительный обзор Fly Selfie 1. СмарВ последнее время мы достаточно часто стали замечать смартфоны, которые создаются разработчиками специаль...
Обзор Spin Addict. Очень красивая игра...
Обзор Spin Addict. Очень красивая играИгра Spin Addict мне сразу понравилась своей иконкой, скажу без тени стеснения. Обычно казуальные игры за...
Предварительный обзор Shuttle X1. Компак...
Предварительный обзор Shuttle X1. КомпакСовременные игровые решения оказываются либо достаточно дорогими и не сильно мощными при такой стоимости,...
Обзор Fortnite. Стрельба крафту не помех...
Обзор Fortnite. Стрельба крафту не помехНаверное, многие пользователи ожидают, что мы скажем, будто ожидали от игры худшего и так далее, но на са...
Китайские роботы UBTech Robotics пришли ...
Китайские роботы UBTech Robotics пришли Прогресс не стоит на месте: наши родители играли в детстве с металлическим конструктором, мы – с пластико...
Предварительный обзор Micromax Canvas Se...
Предварительный обзор Micromax Canvas SeВ последнее время разработчикам мобильных телефонов все сложнее создавать действительно хорошие продукты ...
Предварительный обзор Samsung Leader 8. ...
Предварительный обзор Samsung Leader 8. Стоит отметить, что данные о смартфоне Samsung Leader 8 утекли в сеть достаточно давно - мы еще зимой гов...
МегаОбзор
МегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2017 © MegaObzor