本次我們再做一點,給這個搜索欄加入一個能夠表示請求狀態的功能
先引出Ajax.Responsders對象
這還是一個prototype類庫的ajax對象,沒有接觸的朋友請去找我的ajax入門3
這個對象用于注冊Ajax的事件監聽器,無論任何一個xmlhttprequest對象與服務器發生交互,該對象注冊的監聽器都將被自動調用
首先在我們的仿造google搜索欄的項目中的test.js腳本文件中加入一個事件監聽器
//定義全局事件處理
var?globalMan={
????//開始交互時運行
????onCreate:?function(){
????????//alert("onCreate()");
????????Element.show("loading");
????},
????onFailure:?function(){
????????alert("服務器錯誤或者網絡連接錯誤");
????},
????onComplete:function(){
????????if(Ajax.activeRequestCount?==?0){
????????????//alert("onComplete");
????????????Element.hide("loading");
????????}
????}
}
然后用?Ajax.Responders對象將它綁定
Ajax.Responders.register(globalMan);
其中onCreate為開始交互時,onFailure為交互失敗,onComplete為交互完成
Ajax.activeRequestCount?表示?Ajax類下的activeRequestCount屬性,這個屬性代表了正在進行交互的xmlhttprequest對象的個數,當它為0時,表示所有的局部請求都已完成.
這里我們僅僅對一個id屬性為”loading”的div層進行了顯示和隱藏的操作,用來提示用戶交互是否在執行,如果交互開始執行就顯示它,提示用戶開始交互了,交互完畢就隱藏它.
下面我們在頁面中加入這個loading層
<%@?page?language="java"?import="java.util.*"?pageEncoding="utf-8"%>
<%
String?path?=?request.getContextPath();
String?basePath?=?request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">
<html>
??<head>
????<base?href="<%=basePath%>">
????
????<title>My?JSP?'index.jsp'?starting?page</title>
????<meta?http-equiv="pragma"?content="no-cache">
????<meta?http-equiv="cache-control"?content="no-cache">
????<meta?http-equiv="expires"?content="0">????
????<meta?http-equiv="keywords"?content="keyword1,keyword2,keyword3">
????<meta?http-equiv="description"?content="This?is?my?page">
????<!--
????<link?rel="stylesheet"?type="text/css"?href="styles.css">
????-->
??</head>
??<script?src="js/prototype.js"></script>
??<script?src="js/test.js"?></script>
??<body>
??<table?width="100%"?border="1"?bordercolor="#000000">
????<tr>
??????<td?width="18%">
????????<input?name="text"?type="text"?id="itext"?onKeyUp="getXML()"/>
????????<input?name="button"?type="button"??value="搜索"/>
????????<div?id="outdiv"?style="?display:none;?width:119px;?height:20;?position:absolute;?left:?16px;?top:?41px;?background-color:#ECEDFF">
????????
????????<!--?此處添加行列?-->
????????
????????</div>
??????</td>
????<td?width="82%"><div?id="loading"?style="position:absolute;?display:none">正在加載...</div>?</td>
????</tr>
????<tr>
??????<td?colspan="2">?</td>
????</tr>
??</table>
??</body>
</html>
這里唯一需要注意的是div層的定位,關于position:absolute?的屬性等我研究明白了跟大家分享?-?-