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

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

HTML-часть:

<form
<select id="vendors"
<option value="1"Toyotaoption
<option value="2"Nissanoption
<option value="3"Subaruoption
select
<select id="models"
<option value="1"Supraoption
<option value="2"Carinaoption
<option value="3"Altezaoption
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(
'+i+'">'+data[i]+'');
}
}
);
});
});

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.

Понравилась статья? Поделиться с друзьями:
WEB 2.0
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: