Пример использования Ajax

OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

Вы, конечно, знаете о свободной карте OpenStreetMap. Это настоящая народная карта, создаваемая такими же людьми как и вы! Это такой же opensource-проект как Linux и как Википедия. Конечно же, как и в других картах, в OpenStreetMap имеются ошибки, но в отличие от тех же Яндекс.Карт, где ошибки не исправляются годами из-за сложной бюрократической процедуры (я уже не говорю о намеренных ошибках), в OpenStreetMap всё гораздо проще и лучше для всех нас...
Подробнее..

CloudMade Navigation поддерживает ограничения манёвров

Не так давно CloudMade выделил несколько приоритетных направлений, среди которых оказалась и навигация. Решено было создать специальный проект Navi Studio, который объединял бы в себе несколько более мелких сервисов и позволял пользоваться ими, для создания полноценного навигационного программного обеспечения. В Navi Studio вошли: Работа закипела и уже появилось несколько приложений использующих данный проект. Но полноценной навигации без соблюдения правил ПДД не существует, а потому данному вопросу было также уделено не мало времени...
Подробнее..

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Недавно наткнулся в сети на один занимательный интернет-сервис, именующийся Web 2.0 Suicide machine . Предназначен он для того, чтобы позволить людям, обремененным «социальной жизнью в интернете», в пару кликов удалить свои аккаунты на Facebook (в данный момент сервис блокирован администрацией по IP), Twitter, Linkedin и Myspace. В общем-то судя по количеству положительных отзывов и «успешных очищений» — пипл хавает зависимые от социальных сетей успешно пользуются сервисом и довольны...
Подробнее..

Нравится

Веб разработка - Веб разработка

пример использования ajax

Рубрика «Мастерская программиста» продолжает пополняться материалами о технологии Ajax. В этой статье, наконец-то, будет рассмотрен конкретный пример ее использования. Архив, содержащий код, описанный в статье, находится здесь. Если вы не являетесь нашим постоянным читателем, возможно, для понимания изложенного материала, вам придется прочитать предыдущие статьи, посвященные Ajax. Вы сможете найти их в уже упомянутой рубрике.

Попробуем решить типичную задачу – загрузку выпадающего списка. Пусть в нашем каталоге есть два списка select: производитель и модель, при смене производителя должен загружаться соответствующий список моделей c сервера. Для этого понадобятся следующие части кода (они могут быть разнесены по файлам или же объединены в один – не принципиально):

HTML-часть:

1
2
3
4
5
6
7
8
9
10
11
12
13

<form>
<select id=”vendors”>
<option value=”1”>Toyota</option>
<option value=”2”>Nissan</option>
<option value=”3’>Subaru</option>
</select>

<select id=”models”>
<option value=”1”>Supra</option>
<option value=”2”>Carina</option>
<option value=”3”>Alteza</option>
</select>
</form>

Javascript-часть (на jQuery):

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function(){
$('#vendors').change(function(){
$.getJSON(
'2.php',
{'vendor':$(this).attr('value')},
function(data){
$('#models option').remove();
for (i in data){
$('#models').append('<option value= '+i+' >'+data[i]+'</option>');
}
}
);
});
});

PHP-часть:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

switch ($_GET['vendor']){
case '1':
$models = array(
1 => 'Supra',
2 => 'Carina',
3 => 'Alteza'
);
break;
case '2':
$models = array(
4 => 'Avenir',
5 => 'Cube'
);
break;
case '3':
$models = array(
6 => 'Impreza'
);
break;
}

echo json_encode($models);

В реализации php-части может быть любой другой метод получения данных, важно лишь, чтобы $models был ассоциативным массивом.

При выборе другой модели браузер обратится к скрипту 2.php (лог снифера):

1
2
3
4

GET /demo/2.php?vendor=2 HTTP/1.1
X-Requested-With: XMLHttpRequest
Accept: application/json, text/javascript, */*, text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1
...

«application/json» означает, что браузер ожидает в ответ данные в формате json. Json – это ассоциативный массив в формате javascript, он очень похож на массив в php. Чтобы получить из массива php строку json, нужно выполнить функцию json_encode(), чтобы получить из строки json массив php, нужно выполнить функцию json_decode().

После выполнения команды echo json_encode($models) сервер посылает ответ, который мы можем наблюдать в снифере:

1
2
3
4
5

HTTP/1.1 200 OK
Content-Length: 25
Content-Type: text/html

{ 4 : Avenir , 5 : Cube }

Последняя строка и есть данные в формате json. Браузер принимает ответ, преобразует строку в массив data и передаёт его в анонимную функцию.

Если вы интересуетесь технологией Ajax, задавайте интересующие вас вопросы в комментариях к этой статье. Мы постараемся ответить на них в следующих статьях, посвященных Ajax.

Читайте:

JavaScript-библиотеки с поддержкой XHR Когда стоит использовать Ajax Введение в Ajax Будущее за веб-приложениями E-Mail рассылка – пара причин подписаться

Добавить комментарий

Adobe для веб-разработчиков

Компания Adobe в особом представлении не нуждается – она очень известна практически среди всех пользователей, кто хоть раз имел дело с обработкой гр...

Набор интегрированных продуктов Oracle Access & Identity Managemen

Oracle IAMS представляет собой семейство интегрированных продуктов для управления безопасностью на основе бизнес-ролей и должностных обязанностей; д...

WebsiteSpark – новые возможности для веб-дизайнеров и разработчиков!

Microsoft запускает уникальную программу по предоставлению ПО и поддержки для профессиональных веб-разработчиков и дизайнеров. Компания Microsoft...

WidgetPad – открытая среда для коллективной разработки мобильных прило

Сатоси Накадзима (Satoshi Nakajima) – создатель первой системы автоматизированного проектирования для ПК, один из ведущих разработчиков Windows 95 и...