ajax 入门 5 (给仿google搜索栏加上一个提示请求状态的功能)

这还是一个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+"/";
%>



  
    ">