基于对象的JavaScript实现无刷新页面发送和获取数据Ajax.js

     大家都知道,JavaScript是基于对象的语言，它有面向对象的部分特征，所以我们能用对象的思想来写一些页客户端需要实现的一些功能。

Ajax.js是一个Javascript通过xmlHttpRequest对象获取后台数据的一个脚本框架，可以很方面的获取后台服务器端执行代码返回的文本或XML格式的数据。当然.net下的UpdatePanel控件可以很好的实现页面数据不刷新的问题，但是运用得不恰当的话会影响传输上的效率。然而Ajax.js中的xmlHttpRequest对象是建立一个异步的Http请求，向服务器端获取数据,传输速度对于性能影响甚小。

下面是一个典型的运用Javascript面向对象的思想来实现的这种框架，从自己的实际项目中抽取出来的。便于以后总结。

 

// JScript 文件
function StringBuilder()
{
    this._content = new Array();
    if( typeof StringBuilder._init  == "undefined" )
    {
        StringBuilder.prototype.Append  = function(str)
        {
            this._content.push( str );
        }
        StringBuilder.prototype.ToString = function()
        {
            return this._content.join("");
        }
        StringBuilder._init = true;
    }
}
function Ajax()
{
    this._xmlHttp = (function()
                    {
                        try
                        {
                            if( window.ActiveXObject )
                            {
                                var arrSignature = ["MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
                                                    "MSXML2.XMLHTTP.2.0","Microsoft.XMLHTTP"];
                                for( var i = 0; i < arrSignature.length; i++ )
                                {
                                    try{
                                            return  new ActiveXObject(arrSignature[i]);
                                       }
                                    catch( exception )
                                    {
                                    }
                                }
                            }
                            else
                            {
                                return new XMLHttpRequest();
                            }
                        }
                        catch(exception)
                        {
                            throw new Error("Your browser doesn't support XMLHttpRequest object!");
                        }
                    })();
     this._params = new StringBuilder();
     if( typeof Ajax._init == "undefined")
     {
        Ajax.prototype.Get = function(url, oFunction)
        {
            var oXMLHttp = this._xmlHttp;
            this._xmlHttp.open("get",url+this.GetParams(),true);
            this._xmlHttp.onreadystatechange = function()
                                                        { 
                                                            if( oXMLHttp.readyState == 4 )
                                                            oFunction(oXMLHttp.responseText,oXMLHttp.responseXml);
                                                        };
            this._xmlHttp.setRequestHeader("Cache-Control","no-cache"); 
            this._xmlHttp.send(null);
        }
        Ajax.prototype.Post = function(url, oFunction)
        {
            var oXMLHttp = this._xmlHttp;
            this._xmlHttp.open("post",url,true);
            this._xmlHttp.onreadystatechange = function()
                                                        {
                                                            if(oXMLHttp.readyState==4 )
                                                                oFunction(oXMLHttp.responseText,oXMLHttp.responseXml);
                                                        }
            this._xmlHttp.setRequestHeader("Cache-Control","no-cache");                                             
            this._xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            this._xmlHttp.send(this.GetParams().substring(1));
        }
        Ajax.prototype.AddParams = function( name, value )
        {   if( this._params.ToString().indexOf("?")== -1 )
            {
                this._params.Append("?");
            }
            else
            {
                this._params.Append("&");
            }
            this._params.Append( encodeURIComponent(name) );
            this._params.Append( "=" );
            this._params.Append( encodeURIComponent(value));
        }
        Ajax.prototype.GetParams = function()
        {
            return this._params.ToString() +"&rand="+ Math.random();
        }
        Ajax._init = true;
     }
}

 

Post方式的调用方式如下：(Get方式也同理)

var ajax=new Ajax();
ajax.AddParams("Name","CharlesChen");
ajax.AddParams("Sex","男");
ajax.Post("test.aspx",function()
{
    HandlesMethod(arguments[0],arguments[1])
});

其中HandlesMethod是一个回调函数接受两一个参数，一个是返回的文本格式的数据，另一个是返回的是XML格式的数据。这样我们就可以对返回回来的数据进行处理了。这样实现起来感觉上就像后台代码那样有面向对象的含义，理解起来也更简单，实现起来也更容易。希望这篇文章对朋友们有帮助。

ps，另外可以把上面的那Ajax.js放到项目中去运用，减少开发量，增加工作效率。