很早以前，我在自己做项目的时候就使用过Ajax技术，但是当时对于其机制就是搞部清楚，所以也都是复用人家写的东西 。所以当时也只是知道了Ajax这个东西，和Ajax可以给我的Web编程带来的好处罢了。今天，我在新的公司，由于需求的要求，必须使用Ajax，经过几天的实践，终于对Ajax又有了新的了解。虽然现在有很多人都使用prototype，里面也很好的封装了Ajax，但是对于部分项目而言（特别是那种很早以前就开始了，但是确永远做不完的项目，比如公司自产自用的ERP），没有必要每次去加载这么一个35KB左右的文件（毕竟效率上会受影响）。所以公司决定自己写。代码如下：

  定义

var XMLHttpReq    = false;

/**//*-------------------------------------Ajax 基础函数-------------------------------------*/
// 建立XMLHttpRequest对象
function CreateXMLHttpRequest()
...{
    if(window.XMLHttpRequest)
    ...{
        // Is Mozilla Browse
        XMLHttpReq = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    ...{ 
        // IE Browse
        try
        ...{
            
            XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        ...{
            try
            ...{
                
                XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e)...{}
        }
    }
}

//Send request' function.( POST )
//Url:              send url address.
//IsWait:           Is waitting or return now.
//ResponseFunction: process response's function.
//XmlObj:           send xml data object.
function SendRequestPost( Url,IsWait,ResponseFunction,XmlObj )
...{
    CreateXMLHttpRequest();
    XMLHttpReq.open( "POST",Url,IsWait );
    XMLHttpReq.onreadystatechange = ResponseFunction;//define response's function
    XMLHttpReq.setRequestHeader( "Content-Type","application/x-www-form-urlencoded" );
    XMLHttpReq.send( XmlObj );//Send Request
}

//Send request' function.( GET )
//Url:              send url address.
//IsWait:           Is waitting or return now.
//ResponseFunction: process response's function.
//ArgString:        send url's argument string.
function SendRequestGet( Url,IsWait,ResponseFunction,ArgString ) 
...{
    CreateXMLHttpRequest();
    XMLHttpReq.onreadystatechange = ResponseFunction;//define response's function
    if( ArgString == null )
    ...{
        XMLHttpReq.open( "GET", Url, IsWait );
    }
    else
    ...{
        XMLHttpReq.open( "GET", Url + "?" + ArgString , IsWait );
    }
    XMLHttpReq.send(null);
}

//Invoke function.
//SendType:         send type.( GET or POST )
//UrlPath:          send url address.
//IsWait:           Is waitting or return now.( true or false )
//DataType:         send argument's data type.( DataMail or DataWork )
//ResponseFunction: process response's function.
function RunSend( SendType,UrlPath,IsWait,DataType,ResponseFunction )
...{    
    var url = unescape( UrlPath.replace(/+/g, " ") );    
    var dataobj = CreateData( DataType );        
    if( SendType == "POST" )
    ...{
        SendRequestPost( url,IsWait,ResponseFunction,dataobj );
    }
    else if( SendType == "GET" )
    ...{
        SendRequestGet( url,IsWait,ResponseFunction,dataobj );
    }
}

以后每次调用RunSend函数，SendType传入“POST”或者“GET”，UrlPath为Ajax获取页面地址，IsWait为是否等待请求，DataType为处理数据类型，ResponseFunction为响应函数。

//Creat data object.
function CreateData( DataClassType )
...{    
    var dataObj = "";
    switch ( DataClassType ) 
    ...{
        case "MailPage":            
            dataObj = CreateMailPage();    
            break;
    }
    return dataObj;
}

function f()
...{
           if(XMLHttpReq.readyState == 4)
    ...{ 
        //judgement object state
        if(XMLHttpReq.status == 200)
        ...{ 
            alert("Ajax");
        }
    }
}

function CreateMailPage()
...{    
    var dataObj = "DataType=MailPage&page=1“;
    return dataObj;
}

然后调用

RunSend( "GET",url,true,"MailPage",f ); 

就可以了

发表于 @ 2007年03月15日 17:13:00|评论(loading...)|编辑