Web 2.0 & Tech

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

Попробуем решить типичную задачу — загрузку выпадающего списка. Пусть в нашем каталоге есть два списка 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.
____________

Интересует лови в контакте скачать бесплатно? На сайте kontaktlife.ru лежит самая достоверная информация про лови в контакте скачать бесплатно!

---