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

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

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



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.