Попробуем решить типичную задачу – загрузку выпадающего списка. Пусть в нашем каталоге есть два списка select: производитель и модель, при смене производителя должен загружаться соответствующий список моделей c сервера. Для этого понадобятся следующие части кода (они могут быть разнесены по файлам или же объединены в один – не принципиально):
HTML-часть:
<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):
$(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-часть:
<?php
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 (лог снифера):
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) сервер посылает ответ, который мы можем наблюдать в снифере:
HTTP/1.1 200 OK
Content-Length: 25
Content-Type: text/html{«4″:»Avenir»,»5″:»Cube»}
Последняя строка и есть данные в формате json. Браузер принимает ответ, преобразует строку в массив data и передаёт его в анонимную функцию.
Если вы интересуетесь технологией Ajax, задавайте интересующие вас вопросы в комментариях к этой статье. Мы постараемся ответить на них в следующих статьях, посвященных Ajax.
