Пример использования 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.
Метки: Ajax, PHP, ПрограммированиеПохожие материалы:
- Когда стоит использовать Ajax
- Введение в Ajax
- JavaScript-библиотеки с поддержкой XHR
- pChart – рисуем графики в PHP
- Обзор сайтов для веб-разработчика
| Share | В Мой Мир |
Loading ...
Спасибо! Отличная статья!
а в заголовке случаяно нет опечатки?
Опечатки нет – http://web20.su/2009/07/ajax-introduction.html
ajax = javascript + xml
ajaj = javascript + json
ajah = javascript + html
ADMIN
Вообще то Ajax Это технология которую расшифровывают примерно как асинхронный JavaScript, а javascript + xml, ajaj = javascript + json, javascript + html – это средства которыми можно передавать данные на сервер и получать ответ от него. так что надо было написать что это ПРИДУМАНЫЕ ЛИЧНО ВАМИ Абривиатуры. Дабы не вводить людей в заблуждения!!!!
Раз заголовок вызывает недоумение у посетителей – исправляю.
Sanich, аббревиатура придумана не лично мной, в чем легко убедиться с помощью гугла. А вот слово «аБрИвиатура» придумали лично вы :)
Мастерская прогарммиста в шапке пофиксить бы.
@Гость,
спасибо, исправил.