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

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

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

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

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

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

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

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

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




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

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

пример использования 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.

 


Читайте:


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


Защитный код
Обновить

News image

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

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

News image

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

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

News image

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

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

News image

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

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

News image

Браузер Safari обновился до 5й версии

Примерно полчаса назад Apple выложила для свободного скачивания новую версию своего браузера — Safari 5. Список изменений коротко можно описать т...

Топ технологий:

News image

Оздана новая система беспроводной связи - она в 10

Ученые из Национального тайваньского университета разработали новую систему беспроводной передачи данных, которая позволит передавать инф...

News image

Как взломали Twitter

В Интернетах, наряду с iPad, сканерами в аэропортах и войне между Google и Apple, уже второй день подряд активно обсуждается тема взлома и...