Ajax首接触

        很早以前，我在自己做项目的时候就使用过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 ); 

 

就可以了