262 Часть III Создание профессиональных Ajax-приложений
вторного использования. В следующем разделе будет продемонстрирована совместная работа системы оповещения с объектом ContentLoader Пользователю будет предоставляться информация о загрузке объектов по сети.
6,5. Предоставление информации в запросах
В главе 5 мы представили объект ContentLoader, инкапсулирующий сетевой трафик. Применим систему оповещения для информирования пользователя о состоянии запроса. Начнем с формулирования общих требований.
При передаче запроса серверу мы должны сформировать низкоприоритетное сообщение о том, что данный запрос обрабатывается. Для того чтобы отделить запрос по сети от других оповещений с низким приоритетом, мы изменим внешний вид пиктограммы. Будем использовать для представления сообщения данного типа условное изображение земного шара. Оно присутствовало в программе просмотра информации о планетах, которая рассматривалась в главах 4 и 5.
По окончании обработки запроса сообщение должно быть удалено. Вместо него следует создать другое низкоприоритетное сообщение о том, что запрос обработан успешно, либо сообщение со средним приоритетом о возникновении ошибки.
Для того чтобы реализовать подобное поведение, нам надо создавать объекты Message на определенных этапах жизненного цикла запроса, а именно: при его инициализации, а также по завершении или получении информации об ошибках. Модифицированный код объекта ContentLoader показан в листинге 6.9.
Листинг б.Э.-Объект ContentLoader с оповещением пользователя net.ContentLoader=function( ... )
{ ... } ;
net.ContentLoader.msgld=l;
net.ContentLoader.prototyped
loadXMLDoc:function{url,method,params,contentType){ if {Imethod){
method="GET";
}
if {IcontentType && method=="POST"){
contentType='application/x-www-form-urlencoded' ;
I
if (window.XMLHttpRequest){ this.req=new XMLHttpRequest();
} else if (window.ActiveXObject){
this.req=new ActiveXObj ect("Microsoft.XMLHTTP");
I
if (this.reqH try{
var loader=this; this.req.onreadystatechange=function(){ loader.onReadyState.call(loader);
)
Глава 6 Информация для пользователя 263
t h i s . r e q . o p e n ( m e t h o d , u r l , t r u e ) ; i f ( c o n t e n t T y p e ) I
t h i s . r e q . s e t R e q u e s t H e a d e r ( ' C o n t e n t - T y p e ' , c o n t e n t T y p e ) ;
}
// О Оповещение об инициализации запроса this.notification=new msg.Message( "netOO"+net.ContentLoader.msgld, "loading "+url,
msg.PRIORITY_LOW.id, -1, "img/ball-earth.gif" );
net.ContentLoader.msgld++;
this.req.send(params); }catch (err){ this.onerror.call(this);
}
}
Ь
onReadyState:function(){ var req=this.req;
var ready=req.readyState;
if (ready==net.READY_STATE__COMPLETE) { var httpStatus=req.status;
if (httpStatus==200 || httpStatus==*O) { this.onload.call(this);
// @ Удаление существующего оповещения this.notification.clear{);
}else{
this.onerror.call(this);
}
}
},
// © Сообщение об ошибке defaultError:function(){
var msgTxt="error fetching data!"
+ "<ulxli>readyState: "+this. req.readyState +"<li>status: "+this.req.status
+"<li>headers: "+this.req.getAHResponseHeaders() +"</ul>";
if (this.notification){ this.notification.clear();
J
this.notifxcation=new msg.Message(
"net__errOO"+net. ContentLoader .msgld, msgTxt,msg.PRIORITY__DEFAULT.id
);
net.ContentLoader.msgld++;
}
> ^ |
• |
264 Часть III Создание профессиональных Ajax-приложений
Когда мы создаем запрос посредством вызова loadXMLDoct), мы формируем оповещение О и связываем ссылку на него с объектом ContentLoader.
Заметьте, что время жизни |
устанавливается равным -1, поэтому сообщение |
не будет автоматически удаляться. |
|
В методе onReadyState() |
мы удаляем сообщение при благополучном за- |
вершении операции €). При |
наличии ошибки мы вызываем метод defaultEr - |
r o r (), который формирует соответствующее сообщение €>. Чтобы сообщение лучше воспринималось пользователями, вместо обычного текста для его формирования применяются средства HTML.
В листинге 6.10 показан пример страницы, в которой используется модифицированный объект ContentLoader
Листинг 6.10. Страница, предусматривающая оповещение пользователя
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> <btml>
<head>
<title>Notifications test<Vtitle>
<link rel=stylesheet type="text/css" href="msg.ess"/> <script type="text/javascript" src="x/x_core.js"X/script>
<script type="text/javascript" src="extras-array.js"x/script> <script type="text/javascript" src="styling.js"></script> <script type="text/javascript" src="msg.js"></script>
<script type="text/javascript" src="net_notify.js"X/script> <script type="text/javascript">
window.onload=function(){
msg.render('msgbar');
}
var msgld=l;
function submitUrl(){
var url=document,getElementById{'urlbar').value; // О Запрос к. серверу
var loader=new net.ContentLoader(url,notifyLoaded);
}
function notifyLoadedf){
// © Оповещение о том, что ресурс загружен var doneMsg=new msg.Message( "done00"+msgld,
"loaded that resource you asked for: "+this.url, msg.PRIORITY_LOW.id
);
msgld++; msg.render('msgbar1);
}
</script>
</head>
<body>
<div class='content'>
<p>here is some content. This is what the web
Глава 6 Информация для пользователя 265
рис. 6.6. В окне подсказки, которое отображается при помещении курсора на пиктограмму, содержатся сведения об успешной загрузке ресурса
Рис 6.7. Если при обработке запроса возникла ошибка, информация о ней отображается в диалоговом окне (в данном случае в окне отображены два сообщения; второе информирует об ошибке)
application is up to when not being bugged silly by all these messages and notifications and stuff. <p>Type in a URL in the box below (from the
same domain, see Chapter 7), and hit 'submit'. A souped-up contentloader that understands the notification system will be invoked.
<input id='urlbar' type='text1/>
<a href='javascript:submitUrl()'>submit</a>
</div> |
|
|
|
<div id='msgbar' |
class='msgbar'></div> |
||
</body> |
|
|
|
</html> |
|
m |
|
|
|
|
|
Web-страница (рис. 6.6 и 6.7) содержит простую HTML-форму, в которой пользователь может ввести URL. По щелчку на ссылке submit предпринимается попытка загрузить ресурс, на который указывает URL О. В случае успешного завершения операции происходит обращение к функции обратного вызова — notifyLoaded(). Функция notifyLoaded() не выполняет с ресурсом никаких действий, а лишь сообщает о его загрузке, создавая объект Message ©.
Заметьте, что поведение в случае успешной обработки запроса не предусмотрено при реализации системы. Оно обеспечивается посредством обработчика onload. Благодаря такому решению система может быть адаптирована с учетом различных требований. В примере, приведенном в листинге 6.9, поведение в случае ошибки было реализовано непосредственно в коде. В ре-