简易Ajax框架解释【原创】

    技术2022-05-11  65

     

    //GetHttpObject方法的作用是初始化XMLHttpRequest对象 function CallBackObject() {  this.XmlHttp = this.GetHttpObject();}

    /*名词解释:  修饰符: (原型)prototype  解  释: 使用原型对象的属性来创建继承属性和共享方法.              原型属性和方法将采用引用的方式复制给类中的每个对象,他们都具有相同的值,              可以在一个对象中, 更改原型属性的值,新的值将覆盖默认值*/

     

    // 函数名:GetHttpObject(); // 作 用 1 : 创建XmlHttpRequest对象 // 作 用 2 : 判断浏览器类型 CallBackObject.prototype.GetHttpObject  =  function()     var xmlhttp;    if (window.ActiveXObject)    {             try         {            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");        }          catch (e)         {            try             {                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");            }             catch (E)             {                xmlhttp = false;            }        }    }    else    {        alert("不能创建XmlHttpRequest对象!浏览器不支持");        return xmlhttp;    }    if (!xmlhttp && typeof XMLHttpRequest != 'undefined')     {        try      {            xmlhttp = new XMLHttpRequest();        }         catch (e)         {            xmlhttp = false;        }    }        return xmlhttp;} // 函 数 名:DoCallBack(); // 作 用 1 :向指定的URL发送请求, // 作 用 2 :并且委托ReadyStateChange()函数去处理XmlHttpRequest对象状态变化 CallBackObject.prototype.DoCallBack  =  function(URL) {     ifthis.XmlHttp )    {        ifthis.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 )        {            var oThis = this;            this.XmlHttp.open('POST', URL);            this.XmlHttp.onreadystatechange = function() { oThis.ReadyStateChange(); };            this.XmlHttp.setRequestHeader('Content-Type''application/x-www-form-urlencoded');            this.XmlHttp.send(null);        }    }} //函 数 名:AbortCallBack(); //作    用:停止当前的请求 CallBackObject.prototype.AbortCallBack  =  function()  {    ifthis.XmlHttp )    {        this.XmlHttp.abort();    }} 创建一个显示Loading的Div层  var   div;  //函 数 名:OnLoading(); //作    用:XmlHttpRequest对象的状态为1(正在加载) CallBackObject.prototype.OnLoading  =  function() {      div  =   document.createElement("DIV");         div.id   =   "div_TiShi";         div.innerHTML   =   '正在加载,请稍后.....';         div.onmousedown=function() {moveit(this)};      div.style.backgroundColor="yellow";        document.body.appendChild(div);} //函 数 名:OnLoading(); //作    用:XmlHttpRequest对象的状态为2(已加载)  CallBackObject.prototype.OnLoaded  =  function() {    div.style.display="none";    //window.alert('XmlHttpRequest对象已经加载...');} //函 数 名:OnInteractive(); //作    用:XmlHttpRequest对象的状态为3(交互中)  CallBackObject.prototype.OnInteractive  =  function() {    //window.alert('交互中...');} //函 数 名:OnComplete(); //作    用:XmlHttpRequest对象的状态为4(已经完成) CallBackObject.prototype.OnComplete  =  function(responseText, responseXml) {    } //函 数 名:OnAbort(); //作    用:停止当前的请求 CallBackObject.prototype.OnError  =  function(status, statusText) {    // Error    window.alert('错误的XmlHttpRequest对象状态!');} //函 数 名:ReadyStateChange() //作    用: 用于判断XmlHttpRequest对象的状态码,分别进行处理 CallBackObject.prototype.ReadyStateChange  =  function() {    ifthis.XmlHttp.readyState == 1 )    {        this.OnLoading();    }    else ifthis.XmlHttp.readyState == 2 )    {        this.OnLoaded();    }    else ifthis.XmlHttp.readyState == 3 )    {        this.OnInteractive();    }    else ifthis.XmlHttp.readyState == 4 )    {                        ifthis.XmlHttp.status == 0 )        {            this.OnAbort();            alert('XmlHttpRequest对象尚未初始化!');        }        else ifthis.XmlHttp.status == 200 && this.XmlHttp.statusText == "OK" )        {            this.OnComplete(this.XmlHttp.responseText, this.XmlHttp.responseXML);         }        else        {             this.OnError(this.XmlHttp.status, this.XmlHttp.statusText, this.XmlHttp.responseText);           }    }} 根据不同的请求,和具体的异步交互,再对应的作修改. 下一次将用这个框架实现一个"加减乘除的简单计算",代码整理中......

    最新回复(0)