WEB前端开发

该封装在Liner的基础修改了一些，主要修改的是获取的数据。

接口：
  get, post 常用普通接口。
  e_handler 出错处理句柄，可选。
  _object 创建浏览器兼容XHR的包装。
 
参数：
 @type:        “xml”,”html”,”javascript”,”json”数据类型；
 @url:      请求的响应页面；
 @sdata:  POST的数据；
 @callback: 处理响应数据的回调函数；

 以下参数可选
@fdata:  传递给回调函数的数据，默认null；
@asyn:  是否异步，默认true。
 
返回值：
如果是异步，返回异步请求对象；否则不返回。
 
  回调函数有两个参数：(req, data)
  @req:  异步请求对象（XMLHttpRequest 或 ActiveXObject）
  @data:  传入的附加数据。

代码如下：

function MTajax(){
    // 默认出错处理
    this._eh = this._error;
}
MTajax.prototype={
 debug_enable : false,
 // GET 请求
 //（URL, 回调函数[, 回调函数附加数据, 是否异步]）
 get : function (type, url, callback, fdata, asyn){
     fdata = (fdata === undefined)? null: fdata;
     asyn = (asyn === undefined)? true: asyn;
     var _self = this;
     var X = this._object();
     if (asyn) {
   X.onreadystatechange = function(){
    _self._callback(type, X, callback, fdata, _self);
   };
  }
     X.open('GET', url, asyn);
     if (this.debug_enable) {
   this._debugger(callback);
  }
     X.send(null);
     if(asyn){
         return X;
     }else{
         this._callback(type, X, callback, fdata, _self);
     }
 },
 // POST 请求
 //（URL, POST数据, 回调函数[, 回调函数附加数据, 是否异步]）
 post : function (type, url, sdata, callback, fdata, asyn){
     fdata = (fdata === undefined)? null: fdata;
     asyn = (asyn === undefined)? true: asyn;
     var _self = this;
     var X = this._object();
     if (asyn) {
   X.onreadystatechange = function(){
    _self._callback(type, X, callback, fdata, _self);
   };
  }
     X.open('POST', url, asyn);
 
     if (this.debug_enable) {
   this._debugger(callback);
  }
     X.setRequestHeader('Content-length', sdata.length);
     X.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
     X.send(sdata);
     if(asyn){
         return X;
     }else{
         this._callback(type, X, callback, fdata, _self);
     }
 },
 e_handler : function (func){
     if(func !== undefined) this._eh = func;
 },
 //创建一个兼容的XHR对象
 _object : function(){
     var A;
     if(typeof XMLHttpRequest != 'undefined') {
         A = new XMLHttpRequest();
     }else{
         var _msxmlhttp = ['Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP'];
         for(var i = 0; i < _msxmlhttp.length; i++) {
             try {
                 if(A = new ActiveXObject(_msxmlhttp[i])) break;
             } catch (e) {
                 A = null;
             }
         }
     }
     if(!A)
         alert("Could not create connection object.");
     return A;
 },
 _callback : function (type, req, callback, data, obj){
  if(req.readyState == 4) {
  //debugger;
   var ct = req.getResponseHeader("content-type");
      var ajaxData = !type &amp;amp;amp;amp;&amp;amp;amp;amp; ct &amp;amp;amp;amp;&amp;amp;amp;amp; ct.indexOf("xml") >= 0;
      ajaxData = type == "xml" || ajaxData ? req.responseXML : req.responseText;
      if (type == "javascript") {
    ajaxData=eval( req.responseText );
   }
   if (type == "json") {
    ajaxData=eval("("+req.responseText+");");
   }
   
         if(req.status != 200) {
             //req.onreadystatechange = null;
             if(obj._eh) obj._eh(ajaxData, callback);
         }else{
             callback(ajaxData, data);
             //req.onreadystatechange = null;
         }
     }
 },
 // Debug: 显示采用的回调函数。
 _debugger : function (func){
     alert('running: ' + this._fname(func));
 },
 
 // 默认的出错处理
 _error : function (req, callback){
     alert(req.statusText + '\nShould run: ' + this._fname(callback));
 },
 
 // 提取函数名（含参数）
 _fname : function (func){
     var S = func.toString();
     return S.slice(9, S.indexOf(')', 10)) + ')';
 }
 
};
if (ajax_obj == null) var ajax_obj = new MTajax();

查看demo：http://www.css88.com/demo/ajax_test/

===================分割线=====================

重新整合了一下，讲参数改成一个options对象,参数说明如下：

{
   type:options.type||”GET”,   //请求类型：GET或者POST;
   datetype:options.datetype||”", //数据类型： “xml”,”html”,”javascript”,”json”;
   url: options.url,         //URL;
   sdata: options.sdata,       //POST数据;
   callback: options.callback,     //回调行数;
   fdata:options.fdata||null,    //回调函数附加数据;
   asyn:options.asyn||true,          //是否异步;
  }

源代码：

function MTajax(){
    this._eh = this._error;
}
MTajax.prototype={
 debug_enable : false,
 ajax:function (options){
  var type=options.type||"GET";
  var datetype=options.datetype||"";
  var url=options.url||"";
  var sdata=options.sdata||null;
  var callback=options.callback||function(){};
  var fdata=options.fdata||null;
  var asyn=options.asyn||true;
  
     var _self = this;
     var X = this._object();
     if (asyn) {
   X.onreadystatechange = function(){
    _self._callback(datetype, X, callback, fdata, _self);
   };
  }
     X.open(type, url, asyn);
     if (this.debug_enable) {
   this._debugger(callback);
  }
  if(type==="GET"){
    X.send(null);
  }else{
   X.setRequestHeader('Content-length', sdata.length);
      X.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      X.send(sdata);
  }
     if(asyn){
         return X;
     }else{
         this._callback(datetype, X, callback, fdata, _self);
     }
 },
 //创建一个兼容的XHR对象
 _object : function(){
     var A;
     if(typeof XMLHttpRequest != 'undefined') {
         A = new XMLHttpRequest();
     }else{
         var _msxmlhttp = ['Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP'];
         for(var i = 0; i < _msxmlhttp.length; i++) {
             try {
                 if(A = new ActiveXObject(_msxmlhttp[i])) break;
             } catch (e) {
                 A = null;
             }
         }
     }
     if(!A)
         alert("Could not create connection object.");
     return A;
 },
 _callback : function (type, req, callback, data, obj){
  if(req.readyState == 4) {
   var ct = req.getResponseHeader("content-type");
      var ajaxData = !type && ct && ct.indexOf("xml") >= 0;
      ajaxData = type == "xml" || ajaxData ? req.responseXML : req.responseText;
      if (type == "javascript") {
    ajaxData=eval( req.responseText );
   }
   if (type == "json") {
    ajaxData=eval("("+req.responseText+");");
   }
   
         if(req.status != 200) {
             if(obj._eh) obj._eh(ajaxData, callback);
         }else{
             callback(ajaxData, data);
         }
     }
 },
 // Debug: 显示采用的回调函数。
 _debugger : function (func){
     alert('running: ' + this._fname(func));
 },
 
 // 默认的出错处理
 _error : function (req, callback){
     alert(req.statusText + '\nShould run: ' + this._fname(callback));
 },
 
 // 提取函数名（含参数）
 _fname : function (func){
     var S = func.toString();
     return S.slice(9, S.indexOf(')', 10)) + ')';
 }
 
};
if (ajax_obj == null) var ajax_obj = new MTajax();

看demo：http://www.css88.com/demo/ajax_test2/

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《一个简易的ajax封装》