首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

对ajax的一个小封装

Posted on 2007-05-13 12:25  小城  阅读(695)  评论(1)    收藏  举报
一个页面内可以区分每个ajax远程调用,不会冲突!!!
/*--------------------------------------------------------------------------*/
/* @author : xich(小城) 2007-1-17
 * 
/*--------------------------------------------------------------------------
*/
/*  实现对Ajax操作的简单封装, version 1.1.0
 *  声明: 以下内容有借于prototype1.5.0框架的写法
 *
/*--------------------------------------------------------------------------
*/
/*来自prototype1.5.0的写法
var Try = {
  these: function() {
    var returnValue;

    for (var i = 0; i < arguments.length; i++) {
      var lambda = arguments[i];
      try {
        returnValue = lambda();
        break;
      } catch (e) {}
    }

    return returnValue;
  }
}
var Ajax = {
  getTransport: function() {
    return Try.these(
      function() {return new ActiveXObject('Msxml2.XMLHTTP')},
      function() {return new ActiveXObject('Microsoft.XMLHTTP')},
      function() {return new XMLHttpRequest()}
    ) || false;
  }
}
*/
var Ajax = {
  getTransport: 
function() {
    
var httpRequest ;
    
if(window.XMLHttpRequest)
    {
        
//Mozilla, Safari 等浏览器
        httpRequest = new XMLHttpRequest();
        
if(httpRequest.overrideMimeType)
            httpRequest.overrideMimeType('text
/xml')
    }
    
else if(window.ActiveXObject)
    {
        
//IE浏览器
        try{
            httpRequest 
= new ActiveXObject("Msxml2.XMLHTTP");
            
//alert("Msxml2.XMLHTTP");
        }
        
catch(e){
            
try{
                httpRequest 
= new ActiveXObject("Microsoft.XMLHTTP");
            }
            
catch(e){
            }        
        }
    }
    
return httpRequest;
  }
}

//写类的构造函数
var Class = {
  create: 
function() {
    
return function() {
      
this.initialize.apply(this, arguments);
    }
  }
}

AjaxRequest 
= Class.create();

AjaxRequest.prototype 
= {

    initialize: 
function(URL) {
    
this.xmlHttpRequest = Ajax.getTransport();
    
this.URL = URL;
    },

    doRequest:
function(){
        
var obj = this.xmlHttpRequest;    //因为下面的this指针没用,所以变为obj传进去
        var me = this;
        
this.xmlHttpRequest.onreadystatechange = function ()
        {
            
if(obj.readyState == 4)
            {
                
if(obj.status == 200)    //请求成功
                    me.onSuccess(obj.responseXML,obj.responseText);
                
else                    //请求失败
                    me.onFailure(obj.status);        
            }
            
        }
         
this.xmlHttpRequest.open("GET",this.URL,true);
         
this.xmlHttpRequest.send(null);
    },
    onSuccess:
function () {},
    onFailure:
function () {}
}


//Example:
/*

//实例一个请求
var oAjax = new AjaxRequest("xmlData.asp");
//实现事件接口代码
oAjax.onSuccess = function(xmlDoc){
    document.getElementById("res").innerHTML = xmlDoc.getElementsByTagName("message")[0].text;
}
oAjax.onFailure = function(st){
        document.getElementById(""+id).innerHTML = "操作失败!" + st;
}
//开始请求,成功调用onSuccess(xmlDoc)返回参数为xmlDoc,失败调用onFailure(status)参数返回出错状态码
oAjax.doRequest();    
*/