Asterisk™: будущее телефонии Второе издание
Шрифт:
}
</script>
Метод getElementById читает значения полей имени пользователя и пароля. Затем создается объект XMLHttpRequest, с помощью которого эти значения отправляются назад на сервер. Заметьте, что тип используемого объекта зависит от того, какой броузер применяют пользователи: Internet Explorer 7, 5 или Mozilla/Firefox. Довольно просто написать код, обрабатывающий все эти ситуации, или использовать библиотеку, подобную Prototype, для реализации независимости от платформы. Имя пользователя и пароль кодируются в URL и отправляются на сервер. Вызов xmlHttp.onreadystatechange регистрирует обработчик для обработки результата, возвращаемого сервером. Данный код реализует только запрос XMLHttp и указывает броузеру вызвать функцию 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 – это инфраструктура 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, мы располагаем всем необходимым для исследования
Взглянув на рис. 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. Рассмотрим этот пример шаг за шагом.
Первая строка указывает броузеру загрузить библиотеку Prototype. Вторая - загрузить файл astman.js, в котором содержится большая часть кода для взаимодействия с интерфейсом Manager. Далее описываем функцию localAjaxinit. Сначала функция localAj axinit указывает родителю этой страницы (в данном случае файлу cfgbasic.html) выполнить функцию loadscreen, передавая в нее эту страницу как параметр. Таким образом, основное окно GUI загрузит нашу новую страницу test.html в iframe. Следующее, что мы делаем в функции localAjaxinit, - используем функцию make request. Функция определена в файле astman.js и очень упрощает выполнение запросов к веб-серверу [109] . Первый параметр функции makerequest определяет тип выполняемого запроса. Он может принимать следующие значения:
109
Фактически makerequest - это просто оболочка вызова Prototype-метода
Ajax.Request.
Использует действие GetConfig для извлечения конфигурации из конфигурационного файла, заданного во втором параметре.
'u'
Использует действие UpdateConfig для обновления конфигурации в конфигурационном файле, заданном во втором параметре. Третий
параметр функции определяет данные конфигурации, которые должны быть обновлены.
Если в качестве первого параметра функции makerequest заданы одинарные кавычки, будет отправлено специальное действие, определенное в третьем параметре.