本次我們?cè)僮鲆稽c(diǎn),給這個(gè)搜索欄加入一個(gè)能夠表示請(qǐng)求狀態(tài)的功能
先引出Ajax.Responsders對(duì)象
這還是一個(gè)prototype類庫(kù)的ajax對(duì)象,沒有接觸的朋友請(qǐng)去找我的ajax入門3
這個(gè)對(duì)象用于注冊(cè)Ajax的事件監(jiān)聽器,無(wú)論任何一個(gè)xmlhttprequest對(duì)象與服務(wù)器發(fā)生交互,該對(duì)象注冊(cè)的監(jiān)聽器都將被自動(dòng)調(diào)用
首先在我們的仿造google搜索欄的項(xiàng)目中的test.js腳本文件中加入一個(gè)事件監(jiān)聽器
//定義全局事件處理
var?globalMan={
????//開始交互時(shí)運(yùn)行
????onCreate:?function(){
????????//alert("onCreate()");
????????Element.show("loading");
????},
????onFailure:?function(){
????????alert("服務(wù)器錯(cuò)誤或者網(wǎng)絡(luò)連接錯(cuò)誤");
????},
????onComplete:function(){
????????if(Ajax.activeRequestCount?==?0){
????????????//alert("onComplete");
????????????Element.hide("loading");
????????}
????}
}
然后用?Ajax.Responders對(duì)象將它綁定
Ajax.Responders.register(globalMan);
其中onCreate為開始交互時(shí),onFailure為交互失敗,onComplete為交互完成
Ajax.activeRequestCount?表示?Ajax類下的activeRequestCount屬性,這個(gè)屬性代表了正在進(jìn)行交互的xmlhttprequest對(duì)象的個(gè)數(shù),當(dāng)它為0時(shí),表示所有的局部請(qǐng)求都已完成.
這里我們僅僅對(duì)一個(gè)id屬性為”loading”的div層進(jìn)行了顯示和隱藏的操作,用來(lái)提示用戶交互是否在執(zhí)行,如果交互開始執(zhí)行就顯示它,提示用戶開始交互了,交互完畢就隱藏它.
下面我們?cè)陧?yè)面中加入這個(gè)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層的定位,關(guān)于position:absolute?的屬性等我研究明白了跟大家分享?-?-