投递文章投递文章 投稿指南投稿指南 RSS订阅RSS订阅

AJAX XmlHttp通用类代码

来源:iT堂整理 发布时间:2007-12-21 收藏 投稿 字体:【

以下为JScript code内容:

//Class - Begin
function XmlHttp(){
    this.objXmlHttp         = this.CreateXmlHttpRequest();
    //this.objDivReadyState   = this.ShowReadyState();//创建状态输出DIV对象//依赖外部JS包(这个外部JS包是个过度特效包,各位可以不用,直接修改输出对象的style.display就行了)
}
//引用原型
XmlHttp.prototype = {
    //创建对象 IE7 和 Firefox 已经统一了,不过还是有IE6用户,我只注重这两个浏览器,其他浏览器建议不要使用此类,或者在此处扩展
    CreateXmlHttpRequest:function(){
        var objXmlHttp = null;
        if(window.XMLHttpRequest){
            objXmlHttp = new XMLHttpRequest();
        }else if(window.ActiveXObject){
            objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }else{
            throw "XmlHttp 异常!"
        }
        return objXmlHttp;
    }
    ,
    //URL提交
    //参数:回调函数指针,URL,异步/同步,服务器帐号,服务器密码  (支持匿名访问的可以直接省略帐号密码参数,JavaScript就是爽,呵呵)
    DoGet: function( objMethod, url, async, username, password ){
        this.objXmlHttp.onreadystatechange = this.ClosureExecuteMethod( objMethod );
        this.objXmlHttp.open( "GET", this.URLAddTimestamp(url), async, username, password );
        this.objXmlHttp.setRequestHeader("If-Modified-Since","0");//避免缓存
        this.objXmlHttp.send( null );
    }
    ,
    //Form提交
    //参数:回调函数指针,URL,表单对象,异步/同步,服务器帐号,服务器密码  (支持匿名访问的可以直接省略帐号密码参数)
    DoPostForm:function( objMethod, url, objForm, async, username, password ){
        this.objXmlHttp.onreadystatechange = this.ClosureExecuteMethod( objMethod );
        this.objXmlHttp.open( "POST", this.URLAddTimestamp(url), async, username, password );
        this.objXmlHttp.setRequestHeader("If-Modified-Since","0");//避免缓存
        this.objXmlHttp.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );//application/x-www-form-urlencoded 表示提交表单
        this.objXmlHttp.send( this.TraversalForm(objForm) );
    }
    ,
    //状态事件执行回调函数的闭包
    ClosureExecuteMethod:function( objMethod ){
        var obj = this;
        return function(){
            obj.ExecuteMethod( objMethod );
        }
    }
    ,
    //通过状态码执行回调函数
    ExecuteMethod:function( objMethod ){
        if( this.objXmlHttp.readyState == 4 ){
            if ( this.objXmlHttp.status == 200 ) {
                //this.ShowReadyState("OK");//依赖外部JS包
                if( objMethod != null ){
                    objMethod( this.objXmlHttp.responseText )
                }
            }else{
                //this.ShowReadyState("ERROR");//依赖外部JS包
            }
        }
    }
    ,
    //给URL添加时间标签,用正则表达式验证是否有参数,所以前台不用考虑是?号或&号,该意图主要是避免缓存
    URLAddTimestamp:function(url){
        if( (/\?.{1,}\=.{1,}/).test(url) ){
            url = url + "&Timestamp=" + new Date().getTime();
        }else{
            url = url + "?Timestamp=" + new Date().getTime();
        }
        return url;
    }
    ,
    //遍历表单对象,组合body体(GET提交和FORM提交其实都是明文提交,可以参考HTTP请求与返回的模型)
    TraversalForm:function( objForm ){
        var params = null;
        for( var i=0; i<objForm.length; i++ ){
            if( objForm[i].type.toLowerCase()!="radio" || (objForm[i].type.toLowerCase()=="radio" && objForm[i].checked) ){
                if( params==null ){
                    params = objForm[i].name + "=" + encodeURIComponent(objForm[i].value);
                }else{
                    params = params + "&" + objForm[i].name + "=" + encodeURIComponent(objForm[i].value);
                }
            }
        }
        return params;
    }
    ,
    //状态输出,这个不用的情况下,在前面的方法体内注释掉就行,或者用全局变量开关来控制。
    ShowReadyState:function(){
        var obj = this;
        switch( arguments[0] ){
            case "OK":
                this.objDivReadyState.innerHTML = "<div style=\"color:blue;\">数据交互完<div>";
                setTimeout( function(){new DisplayGradualness( obj.objDivReadyState );} , 1000 );//依赖外部JS包
                setTimeout( function(){window.document.body.removeChild(obj.objDivReadyState);} , 3000 );
                break;
            case "ERROR":
                this.objDivReadyState.innerHTML = "<div style=\"color:red;\">交互已失败<div>";
                setTimeout( function(){new DisplayGradualness( obj.objDivReadyState );} , 1000 );//依赖外部JS包
                setTimeout( function(){window.document.body.removeChild(obj.objDivReadyState);} , 3000 );
                break;
            default:
                var divReadyState = window.document.createElement("div");
                    divReadyState.style.position          = "absolute";
                    divReadyState.style.filter            = "Alpha(Opacity=100)";
                    divReadyState.style.top               = "5px";
                    divReadyState.style.right             = "5px";
                    divReadyState.style.border            = "solid";
                    divReadyState.style.borderColor       = "#808080";
                    divReadyState.style.borderWidth       = "1px";
                    divReadyState.style.backgroundColor   = "#FFFFCC";
                    divReadyState.style.fontSize          = "12px";
                    divReadyState.style.padding           = "3px";
                    divReadyState.style.display           = "none";
                    divReadyState.innerHTML               = "<div style=\"color:green;\">数据交互中<div>";
                    window.document.body.appendChild( divReadyState );
                    new DisplayGradualness( divReadyState );//依赖外部JS包
                    return divReadyState;
                break;
        }
    }
}
//Class - End

这是一段调用代码片段

以下为JScript code内容:

//------------------------------
    //发送聊天
    function SendContent_AJAXBack(){
        var txtContent = window.document.getElementById("txtContent");
            txtContent.value = "";
            txtContent.focus();
    }
    function SendContent(){
        var sendContentForm    = window.document.forms["sendContentForm"];
        var btnSendContent     = window.document.getElementById("btnSendContent");
            sendContentForm.onkeydown = function(event){
                evt = window.event || event;
                if( evt.keyCode==13 || evt.which==13 ){
                    new XmlHttp().DoPostForm( SendContent_AJAXBack, "ASHX/SendContentHandler.ashx", sendContentForm, true);
                }
            }
            btnSendContent.onclick = function(){
                new XmlHttp().DoPostForm( SendContent_AJAXBack, "ASHX/SendContentHandler.ashx", sendContentForm, true);
            }
    }

这是JSON代码片段

以下为JScript code内容:

//------------------------------
    //在线名单
    function OnLineUserInfo_ChangeStyle( divElement ){
        return function(){
            divElement.style.backgroundColor = (divElement.style.backgroundColor==""?"#FFFFCC":"");
        }
    }
    function OnLineUserInfo_AJAXBack( responseText ){
        eval( "var JSON = " + responseText );
        var divNames = document.getElementById("divNames");
        while(divNames.firstChild!=null){divNames.removeChild(divNames.firstChild);}
        var documentFragment     = window.document.createDocumentFragment();
        for( var i=0; i<JSON.length; i++){
            var userId      = JSON[i].UserId;
            var nickName    = JSON[i].NickName;
            var divElement = window.document.createElement("div");
                divElement.style.padding    = "1px";
                divElement.style.cursor     ="pointer";
                divElement.innerHTML        = nickName;
                divElement.onclick          = ChatToSomebody(userId, nickName);
                divElement.onmouseover        = OnLineUserInfo_ChangeStyle( divElement );
                divElement.onmouseout        = OnLineUserInfo_ChangeStyle( divElement );
            documentFragment.appendChild(divElement);
        }
        divNames.appendChild(documentFragment);
    }
    function OnLineUserInfo(){
        new XmlHttp().DoGet( OnLineUserInfo_AJAXBack, "ASHX/OnLineUserInfoHandler.ashx", true);
        setTimeout(OnLineUserInfo,5000);
    }

最新评论:
评论内容:请自觉遵守互联网相关政策法规。
用户名: 密码: 匿名 注册
热门文章
随机推荐
About iTtang - 联系方法  - 专题列表 - 友情链接  -  高级搜索   -  帮助中心  -