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

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

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

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

Комментарии:
MSI GeForce RTX 2080 Ti Gaming X Trio по...
MSI GeForce RTX 2080 Ti Gaming X Trio поКомпания MSI пополнила ассортимент видеокарт Nvidia нового поколения четырьмя моделями. Речь идет о семей...
В смартфоне Oppo Find X Lamborghini Edit...
В смартфоне Oppo Find X Lamborghini EditОдной из главных особенностей смартфона Oppo Find X Lamborghini Edition является поддержка быстрой зарядк...
Печатные платы GeForce RTX 2080 Ti и RTX...
Печатные платы GeForce RTX 2080 Ti и RTXПродажи видеокарт Nvidia нового поколения стартуют лишь через месяц, но некоторые обзорщики уже опубликов...
Обзор CamShel DVR 220. Видеорегистратор ...
Обзор CamShel DVR 220. Видеорегистратор Большинство видеорегистраторов с поддержкой двухканальной съемки, снимают только то, что происходит за гр...
Смартфон Huawei Nova 3 оценен в 29990 ру...
Смартфон Huawei Nova 3 оценен в 29990 руКомпания Huawei поделилась подробностями российского релиза смартфона Nova 3, который уже успел разойтись...
Обзор видеокарты ZOTAC GeForce GTX 1050 ...
Обзор видеокарты ZOTAC GeForce GTX 1050 Вчера компания NVIDIA провела презентацию нового поколения видеокарт RTX 20. В первую тройку вошли сразу ...
Nintendo Switch будет поддерживать 4К...
Nintendo Switch будет поддерживать 4КПоявилась информация о том, что компания Nintendo планирует выпуск второго поколения приставки Nintendo S...
Samsung готовит Galaxy View 2...
Samsung готовит Galaxy View 2В сети появилась информация о том, что компания Samsung выпустит в продажу планшет Galaxy View 2 с громад...
Поделиться в социальных сетях:


Предварительный обзор Fossil Q Venture H...
Предварительный обзор Fossil Q Venture HМы уже не раз говорили, что рынок умных часов постепенно уходит в историю. Дело в том, что если вы большо...
Обзор Omlet Arcade. Новая стриминговая п...
Обзор Omlet Arcade. Новая стриминговая пПрямые трансляции сейчас есть буквально везде — вы можете в Инстаграм свое лицо отправить в режиме реальн...
Предварительный обзор Logitech Powered. ...
Предварительный обзор Logitech Powered. Компания Apple на своей презентации в октябре прошлого года рассказала про свою беспроводную зарядку, кот...
Обзор Hollywhoot. Снимаем свои фильмы...
Обзор Hollywhoot. Снимаем свои фильмыБольшинство современных мобильных игр создают без идеи и реализуют весьма плохо. Это не новость, ведь раз...
ТОП-10 лучших игр для Android 2018 года...
ТОП-10 лучших игр для Android 2018 годаВ последние годы мобильные игры развиваются семимильными шагами. Производители смартфонов улучшают свои м...
Предварительный обзор Cooler Master Mast...
Предварительный обзор Cooler Master MastЕсли вы следите за рынком компьютерного железа, то точно заметили популярность стеклянных вставок в корпу...
Обзор Crush Them All. Неплохой кликер...
Обзор Crush Them All. Неплохой кликерМы постоянно говорим про то, что разработчики мобильных игр делают исключительно простенькие проекты, где...
Обзор Run Around. Что-то необычное...
Обзор Run Around. Что-то необычноеВ большинстве случаев казуальные игры выглядят достаточно скучно и однообразно, так как разработчики прос...
Предварительный обзор LG Q8 (2018). Недо...
Предварительный обзор LG Q8 (2018). НедоВ последнее время можно заметить большую популярность смартфонов среднего класса от популярных производит...
Предварительный обзор Samsung Galaxy Not...
Предварительный обзор Samsung Galaxy NotДо анонса было понятно, что корейская компания Samsung не планирует революцию на мобильном рынке, скорее ...
Предварительный обзор HyperX Pulsefire F...
Предварительный обзор HyperX Pulsefire FКомпания HyperX весьма успешно зашла на рынок игровой периферии — все мы помним легендарные Cloud II, кот...
Обзор PUSS!. Котики и всё такое...
Обзор PUSS!. Котики и всё такоеПрактически всегда инди-разработчики выпускают какие-то скучные проекты, которые не стоят внимания пользо...

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