菜鸟也封装之myAJAX

 下面为大家介绍的是我多次项目使用的经验心得,以及个人对JavaScript的一个小小封装.

有何不托请大家指出 tmacyang@163.com  可以通过本E-mail和本人联系.

当我们写"原生态"AJAX代码的时候,我们会为在AJAX返回后操作那部分烦恼.我们可能会使用大量的IF...ELSE进行判断,或者重复写一样的代码.

这样myAJAX封装的脚本就诞生了,myAJAX采用的JavaScript面向对象技术,想知道有什么好处可以继续往下看.

myAJAX  =   function () ... {
    var XMLHttpReq;
    function createXMLHttpRequest()...{
   if(window.XMLHttpRequest)...{
      //Mozilla浏览器
      XMLHttpReq=new XMLHttpRequest();     
     }
     else if(window.ActiveXObject)...{
      //IE浏览器
      try...{
       XMLHttpReq=new ActiveXObject("msxml2.XMLHTTP");
      }
      catch(e)...{
       try...{
        XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
       }
       catch(e)...{
       }
       }
     }
    }
    //发送请求函数。
    this.sendRequest = function(method, url)...{
        createXMLHttpRequest();
        XMLHttpReq.open(method,url,true);
/**//******************************************************
* 使用XMLHttpReq.onreadystatechange=operateXMLRoot; *
* 无法传递参数,采用以下代码就可以解决参数传递问题。 *        
******************************************************/
        XMLHttpReq.onreadystatechange=function()...{
            if(XMLHttpReq.readyState==4)...{
                //信息成功返回，开始处理信息。
                if(XMLHttpReq.status==200)...{
                            operateXMLRoot(XMLHttpReq.responseXML);
                }
                else...{
                    alert(XMLHttpReq.status+"错误!");
                    return;
                }
            }
        };
        XMLHttpReq.send(null);//发送请求。
    }
    
    operateXMLRoot=function(root)...{
        alert(root.xml);   
    }
}

上述就是我的myAJAX代码.

我们只要把他封装进JS文件即可.

当我们要使用myAJAX时:

第一步:

把myAJAX.js放入工程目录下,然后把文件引入网页。
<script lanage="javascript" scr="myAJAX.js">

 

第二步:

//继承myAJAX类,并且重写this.operationXML(root)公共方法。
ajax=new function(){
          myAJAX.call(this);
          operateXMLRoot=function(root){
                //进行DOM操作。
          }
}

 

第三步:

存建一个方法,实例化myAJAX类,调用sendRequest方法。
function test(){

                var ajax = new myAJAX();
               ajax.sendRequest(method, url);

}

• url即提交地址。
• method提交方式,有Post,Get二类。

  怎么样是不是解决了同一页面同多个AJAX操作麻烦?

  不但在项目中多次使用,而且提供给多人使用,绝对质量合格.呵呵~~