Джим Меггелен - Asterisk™: будущее телефонии Второе издание
Действие UPDATECONFIG используется для обновления одной или более настроек конфигурационного файла. Например, чтобы удалить пользователя, необходимо выполнить такой HTTP-запрос: http://localhost:8088/asterisk/rawman?action=updateconfig&reload= yes&srcfilename=users.conf&dstfilename=users.conf&Action-000000= delcat&Cat-000000=6003& Var-000000=&Value-000000=
Ответ, свидетельствующий об ошибке
Чтобы формировать все остальные команды, пользователь должен зарегистрироваться на веб-сервере. Если пользователь не аутентифици- рован, любая из обсуждаемых выше команд будет возвращать ошибку. Если он отправлен пользователем, не прошедшим аутентификацию, URI http://localhost:8088/asterisk/rawman?action=ping возвращает такой свидетельствующий об ошибке ответ: Response: Error
Message: Authentication Required
Ajax, AJAM и Asterisk
Аббревиатура Ajax расшифровывается как Asynchronous JavaScript and XML (Асинхронный JavaScript и XML). Хотя этот термин включает слова «асинхронный» и «XML», это не означает ни то, что можно делать только асинхронные запросы, ни то, что должен обязательно использоваться XML. Некоторые авторы описывают Ajax просто как комбинацию HTML, JavaScript, DHTML и DOM. Следующее поколение броузеров, таких как Mozilla/Firefox, для отправки асинхронного запроса на сервер используют XMLHttpRequest (объект JavaScript). Запрос выполняется в фоновом режиме и обрабатывается сервером. Назад в броузер результат передается посредством обратного вызова: все, что возвращает сервер, может сохраняться и использоваться для обновления отображаемой страницы. Для Internet Explorer 5 или более поздних версий той же цели служит объект ActiveX XMLHttp.
Обработка форм в традиционном веб-приложении
HTML-формы обычно передаются посредством кнопки SUBMIT (ПЕРЕДАТЬ) (type=submit). После щелчка пользователем по кнопке SUBMIT (ПЕРЕДАТЬ) обработка веб-приложения останавливается и не возобновляется до тех пор, пока сервер не возвратит новую страницу полностью:
<FORM action="login.php" method="POST"> <input type=text name="username"> <input type=password name="password"> <input type=submit> </FORM>
Прежде чем переходить к Ajax или JavaScript, давайте рассмотрим, как работает традиционное веб-приложение. Для описания формы, где определяются все параметры, которые пользователь хочет отправить на сервер, традиционные веб-приложения используют элемент <FORM>. Кроме того, атрибут action="login.php" информирует броузер, куда отправлять все эти переменные. method="POST" указывает броузеру, как отправлять эти переменные на сервер.
Обработка форм в приложении Ajax
Приложение Ajax для отправки содержимого формы на сервер использует JavaScript. Если выполнен асинхронный запрос, JavaScript-код не ожидает ответа сервера. Это также означает, что пользователи могут продолжать работать со страницей даже в том случае, если в фоновом режиме выполняется запрос. Это может представлять опасность, из-за чего, возможно, до завершения запроса потребуется ограничить некоторые действия. Броузер по умолчанию не обеспечивает визуальной индикации выполнения запроса в фоновом режиме. За информирование пользователя о выполнении запроса отвечаете вы. Вот код для передачи содержимого полей имени пользователя (username) и пароля (password) через Ajax:
<script language="javascript" type="text/javascript"> function submitform(){
var uname = document.getElementById("username").value; var pwd = document.getElementById("password").value; // xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // IE 7 // xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE 5 xmlHttp = new XMLHttpRequest(); // Mozilla или Firefox
var url = "/rawman9action=login&username=" + escape(uname) + "&secret=" + escape(pwd);
xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = dosomething; // вместо dosomething использовалась бы функция JavaScript xmlHttp.send(null);
}
</script>
Метод getElementById() читает значения полей имени пользователя и пароля. Затем создается объект XMLHttpRequest, с помощью которого эти значения отправляются назад на сервер. Заметьте, что тип используемого объекта зависит от того, какой броузер применяют пользователи: Internet Explorer 7, 5 или Mozilla/Firefox. Довольно просто написать код, обрабатывающий все эти ситуации, или использовать библиотеку, подобную Prototype, для реализации независимости от платформы. Имя пользователя и пароль кодируются в URL и отправляются на сервер. Вызов xmlHttp.onreadystatechange регистрирует обработчик для обработки результата, возвращаемого сервером. Данный код реализует только запрос XMLHttp и указывает броузеру вызвать функцию dosomething() при получении ответа от сервера. Вот функция dosomething(), которая обрабатывает этот ответ: <script language="javascript" type="text/javascript"> function dosomething() {
if (xmlHttp.readyState == 4) {
var login_response = xmlHttp.responseText;
}
</script>
}
Перед выполнением каждого последующего этапа XMLHttp-за- проса убедитесь в завершении предыдущего (успешном или со сбоем).
Эта функция вызывается при любом изменении состояния HTTP-за- проса. Выражение if сохраняет ответ, только если параметр readyState запроса имеет значение 4, свидетельствующее о завершении запроса. Теперь переменная JavaScript login_response (ответ на регистрацию) содержит ответ страницы регистрации.
Но этот фрагмент мало похож на код, готовый к производственной эксплуатации. В частности, упрощенная обработка имени пользователя и пароля подходит для тестирования, но будет представлять серьезную проблему для безопасности в производственной системе, даже если приложение используется только в закрытой сети. Для реализации более надежной и безопасной обработки паролей рекомендуется применять представленную ранее систему запрос/ответ. Больше информации о написании веб-приложений на Ajax предлагает книга Бретта Мак- Лафлина (Brett McLaughlin) «Head Rush Ajax» (издательство O'Reilly).
Инфраструктура Prototype
Prototype (http://prototypejs.org) - это инфраструктура JavaScript, выпущенная под лицензией типа MIT. Prototype может чрезвычайно упростить разработку Ajax-приложения. Она предоставляет много способов сделать код более коротким и ясным. Например, в функции
submitform вызов document.getElementById() может быть заменен функцией $(). Аналогично, вызов value для получения содержимого DOM-эле- мента можно заменить вызовом $F(). Таким образом, document.getElemen tById("username").value становится просто $F('username'); в результате получаем намного более простой и удобный для чтения код. Prototype также позволяет выполнять элегантные XMLHttp-запросы. С помощью объекта Prototype Ajax функцию submitform() можно переписать следующим образом:
<script language="javascript" type="text/javascript"> function submitform(){ var url = '/rawman';
var pars = 'username=' + escape($F('username')) + '&secret=' + escape ($F('password'));
var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: dosomething });
}
</script>
Этот код не только намного короче, теперь в веб-страницы не придется включать специальный код для каждого броузера. Prototype берет на себя заботу о различиях между Mozilla/Firefox и версиями Internet Explorer. Более того, она выполняет проверку параметра readyState запроса, поэтому больше нет необходимости в этом ужасном выражении if. Prototype имеет массу встроенных функций, некоторые из них активно используются в инфраструктуре Asterisk. Обсуждать их здесь нет возможности, но более подробную информацию можно найти в разделе «Short Cuts» книги «Prototype Quick Reference» Скотта Реймонда
(Scott Raymond) и «Prototype and Scriptaculous: Taking the Pain Out of JavaScript» Криса Ангуса (Chris Angus), обе книги изданы в O'Reilly.
Настройка GUI
Рассмотрев разные части, формирующие основу Asterisk GUI, мы располагаем всем необходимым для исследования самого GUI и его настройки соответственно собственным нуждам. Asterisk GUI можно найти по следующему адресу: http://localhost:8088/asterisk/static/ config/cfgbasic.html.
Взглянув на рис. 11.1, вы можете подумать, что Asterisk GUI - это просто еще один из множества существующих графических пользовательских интерфейсов Asterisk. Но это абсолютно не так. Этот GUI не просто позволяет настраивать себя, он практически умоляет сделать это. В данном разделе обсуждается, как можно настраивать GUI и использовать AJAM для создания собственных расширений к GUI. Чтобы извлечь из этой информации максимальную пользу, необходимо обладать базовыми знаниями по HTML и JavaScript. Домашняя страница GUI называется cfgbasic.html. Все остальные страницы загружаются в окно iframe, содержащееся на странице cfgbasic.html. По умолчанию cfgbasic.html загружает home.html в основном окне.
Большинство изменений GUI в конечном счете связаны с изменением файла cfgbasic.html, который формирует окно регистрации.
Рис. 11.1. Скриншот Asterisk GUI
Как добавить в GUI новую вкладку
В качестве примера настройки Asterisk GUI создадим новую вкладку, отображающую содержимое файла extensions.conf. Сначала необходимо создать файл и поместить его в папку /var/lib/asterisk/static-html/ config. В данном примере назовем файл test.html:
<script src="scripts/prototype.js"></script> <script src="scripts/astman.js"></script> <script>
function localAjaxinit() {
parent.loadscreen(this);
makerequest('g','extensions.conf', '' , function(t){
$('ExtensionsDotConf').innerHTML = "<PRE>" + t + "</PRE>";
});
}
</script>
<body onload="localAjaxinit()" bgcolor="EFEFEF">
<div id="ExtensionsDotConf"></div> </body>
Данный код просто отображает конфигурацию файла extensions.conf. Конечно, это очень простой пример, но он демонстрирует основы создания новой страницы для Asterisk GUI. Рассмотрим этот пример шаг за шагом.
