[转帖]Mootools源码分析-33 -- Request

原帖地址：http://space.flash8.net/space/?18713/viewspace-406767.html

原作者：我佛山人

 

var  Request  =   new  Class({
     // 继承Chain,Events和Options的接口实现
    Implements: [Chain, Events, Options],

    options: {
         /* onRequest: $empty, //开始事件
        onSuccess: $empty,  //成功事件
        onFailure: $empty,  //失败事件
        onException: $empty, */   // 异常事件
        url:  '' ,     // Ajax请求的地址
        data:  '' ,     // Ajax提交的地址
        headers: {     // Ajax请求的HTTP头数据
             // 来源信息
             ' X-Requested-With ' :  ' XMLHttpRequest ' ,
             // 接受的内容类型
             ' Accept ' :  ' text/javascrīpt, text/html, application/xml, text/xml, */* '
        },
         // 是否异步请求
        async:  true ,
         // 提交方式
        method:  ' post ' ,
         // 多次请求冲突时的处理方式
        link:  ' ignore ' ,
         // 判断状态成功的方法
        isSuccess:  null ,
         // 判断状态成功的方法
        emulation:  true ,
         // 是否使用url编码
        urlEncoded:  true ,
         // POST请求时使用的编码
        encoding:  ' utf-8 ' ,
         // 动态执行字符脚本
        evalscrīpts:  false ,
         // 动态执行返回字符脚本
        evalResponse:  false
    },

     // 构造函数
    initialize:  function (options)    {
         // 使用浏览器特性创建一个XmlHttpRequest对象
         this .xhr  =   new  Browser.Request();
         this .setOptions(options);
         // 判断状态成功的方法，如果参数中不提供，使用默认方法
         this .options.isSuccess  =   this .options.isSuccess  ||   this .isSuccess;
         this .headers  =   new  Hash( this .options.headers);
    },

    onStateChange:  function ()    {
         // 如果状态码不等于4或者没有正执行的请求，直接返回
         if  ( this .xhr.readyState  !=   4   ||   ! this .running)     return ;
         // 设置标记
         this .running  =   false ;
         // 初始化状态码
         this .status  =   0 ;
         // 设置状态码
        $ try ( function ()    {
             this .status  =   this .xhr.status;
        }.bind( this ));
         // 如果状态码显示请求成功
         if  ( this .options.isSuccess.call( this ,  this .status))    {
             // 提取响应数据
             this .response  =  {text:  this .xhr.responseText, xml:  this .xhr.responseXML};
             // 请求成功
             this .success( this .response.text,  this .response.xml);
        }     else     {
             // 响应数据全为null
             this .response  =  {text:  null , xml:  null };
             // 请求失败
             this .failure();
        }
         // 置空状态改变事件监听
         this .xhr.onreadystatechange  =  $empty;
    },

     // 判断请求状态是否成功
    isSuccess:  function ()    {
         // 状态码大于等于200小于300时为成功
         return  (( this .status  >=   200 )  &&  ( this .status  <   300 ));
    },

     // 处理返回字符中包含的脚本
    processscrīpts:  function (text)    {
         // 如果返回字符为纯脚本，直接解释执行
         if  ( this .options.evalResponse  ||  ( / (ecma|java)scrīpt / ).test( this .getHeader( ' Content-type ' )))     return  $exec(text);
         // 混合字符时过滤出脚本，根据配置参数是否执行包含脚本
         return  text.stripscrīpts( this .options.evalscrīpts);
    },

     // 请求成功
    success:  function (text, xml)    {
         // 触发事件
         this .onSuccess( this .processscrīpts(text), xml);
    },

     // 触发请求成功事件
    onSuccess:  function ()    {
         // 同时触发请求完成和请求成功事件
         this .fireEvent( ' onComplete ' , arguments).fireEvent( ' onSuccess ' , arguments).callChain();
    },

     // 请求失败
    failure:  function ()    {
         // 触发事件
     this .onFailure();
    },

     // 触发请求失败事件
    onFailure:  function ()    {
         // 同时触发请求完成和请求失败事件
         this .fireEvent( ' onComplete ' ).fireEvent( ' onFailure ' ,  this .xhr);
    },

     // 设置请求的HTTP头部数据
    setHeader:  function (name, value)    {
         this .headers.set(name, value);
         return   this ;
    },

     // 获取响应的HTTP头部数据
    getHeader:  function (name)    {
         return  $ try ( function ()    {
             return   this .xhr.getResponseHeader(name);
        }.bind( this ));
    },

     // 检查约束，类似Fx的同名方法
    check:  function ()    {
         // 如果请求线程没有在运行中，返回真允许运行当前线程的请求
         if  ( ! this .running)     return   true ;
         // 如果当前有正运行的请求线程
         switch  ( this .options.link)    {
         // 配置了link参数为cancel时，直接取消正执行的线程，启用新线程
         case   ' cancel ' :  this .cancel();     return   true ;
         // 等待当前线程执行完成再执行新线程
         case   ' chain ' :  this .chain( this .send.bind( this , arguments));     return   false ;
        }
         return   false ;
    },

     // 发送请求
    send:  function (options)    {
         // 检查约束
         if  ( ! this .check(options))     return   this ;
         // 设置标记
         this .running  =   true ;

         // 根据参数类型处理
         var  type  =  $type(options);
         if  (type  ==   ' string '   ||  type  ==   ' element ' ) options  =  {data: options};

         // 实现更灵活的使用,可以将配置参数延后在send时
         var  old  =   this .options;
        options  =  $extend({data: old.data, url: old.url, method: old.method}, options);
         var  data  =  options.data, url  =  options.url, method  =  options.method;

         // 不同类型的处理
         switch  ($type(data))    {
         // 如果是HTML Element,读取它的值,并根据name值构成name=value的名值对
         case   ' element ' : data  =  $(data).toQueryString();  break ;
         case   ' object ' :  case   ' hash ' : data  =  Hash.toQueryString(data);
        }

         // put和delete提交方式时的处理,因为Ajax不支持put和delete,所以通过添加一个_method给后台处理
         if  ( this .options.emulation  &&  [ ' put ' ,  ' delete ' ].contains(method))    {
             var  _method  =   ' _method= '   +  method;
            data  =  (data)  ?  _method  +   ' & '   +  data : _method;
            method  =   ' post ' ;
        }

         // POST方式指定编码时的处理,需要设置HTTP头部信息
         if  ( this .options.urlEncoded  &&  method  ==   ' post ' )    {
             var  encoding  =  ( this .options.encoding)  ?   ' ; charset= '   +   this .options.encoding :  '' ;
             this .headers.set( ' Content-type ' ,  ' application/x-www-form-urlencoded '   +  encoding);
        }

         // GET方式时的处理,直接将提交的数据加在请求地址后面
         if  (data  &&  method  ==   ' get ' )    {
             // 判断请求地址中有否包含问号
            url  =  url  +  (url.contains( ' ? ' )  ?   ' & '  :  ' ? ' )  +  data;
            data  =   null ;
        }

         // 打开请求端口,注意以下代码中xhr对象的方法的执行顺序
         this .xhr.open(method.toUpperCase(), url,  this .options.async);

         // 监听请求的响应状态更改事件
         this .xhr.onreadystatechange  =   this .onStateChange.bind( this );

         // 设置所有HTTP头部信息
         this .headers.each( function (value, key)    {
             if  ( ! $ try ( function ()    {
                 this .xhr.setRequestHeader(key, value);
                 return   true ;
                 // 出错时触发异常事件
            }.bind( this )))  this .fireEvent( ' onException ' , [key, value]);
        },  this );

         // 触发onRequest事件
         this .fireEvent( ' onRequest ' );
         // 发送数据
         this .xhr.send(data);
         // 如果是同步执行,不需要事件监听,直接进到状态处理方法
         if  ( ! this .options.async)     this .onStateChange();
         return   this ;
    },

     // 取消请求
    cancel:  function ()    {
         // 如果没有正运行的线程，不必操作，直接返回
         if  ( ! this .running)     return   this ;
         // 设置标记
         this .running  =   false ;
         // 中止请求
         this .xhr.abort();
         // 置状态改变监听为空
         this .xhr.onreadystatechange  =  $empty;
         // 创建新请求线程
         this .xhr  =   new  Browser.Request();
         // 触发onCancel事件
         this .fireEvent( ' onCancel ' );
         return   this ;
    }
});

// 就地执行的匿名函数
( function ()    {
     // HTTP的方法处理
     var  methods  =  {};
     // 处理用于Request继承实现的方法
    [ ' get ' ,  ' post ' ,  ' GET ' ,  ' POST ' ,  ' PUT ' ,  ' DELETE ' ].each( function (method)    {
        methods[method]  =   function ()    {
             // 优先处理参数中字符类型的为请求地址,另一个有定义的参数为提交数据
             var  params  =  Array.link(arguments, {url: String.type, data: $defined});
             // 最终仍需要通过调用send方法执行
             return   this .send($extend(params, {method: method.toLowerCase()}));
        };
    });
     /*
    扩展实现,现在可以使用Request.get,Request.put之类的方法了,并且方法名不区分大小写,如:
    Request.get('http://wfsr.net/action.aspx', 'id=1');
     */
    Request.implement(methods);
})();

// 单件模式,根据Request为Element实现的扩展
Element.Properties.send  =  {
     // setter
    set:  function (options)    {
         // 先从临时对象取实例
         var  send  =   this .retrieve( ' send ' );
         // 如果存在,取消执行
         if  (send) send.cancel();
         // 删除缓存的Request实例,缓存配置参数
         return   this .eliminate( ' send ' ).store( ' send:options ' , $extend({
            data:  this , link:  ' cancel ' , method:  this .get( ' method ' )  ||   ' post ' , url:  this .get( ' action ' )
        }, options));
    },

     // getter
    get:  function (options)    {
         // 如果提供了配置参数并且未存在实例
         if  (options  ||   ! this .retrieve( ' send ' ))    {
             // 如果没有缓存配置参数,调用setter缓存
             if  (options  ||   ! this .retrieve( ' send:options ' ))     this .set( ' send ' , options);
             // 根据缓存参数,缓存Request实例
             this .store( ' send ' ,  new  Request( this .retrieve( ' send:options ' )));
        }
         // 返回缓存中的实例
         return   this .retrieve( ' send ' );
    }
};

// Element的send方法
Element.implement({
     // Element可以直接执行send方法实现Ajax请求了
    send:  function (url)    {
         // 读取缓存中的Request实例
         var  sender  =   this .get( ' send ' );
         // 发送请求,Request的配置参数需要单独设置
        sender.send({data:  this , url: url  ||  sender.options.url});
         return   this ;
    }
});

 

转载于:https://www.cnblogs.com/maapaa/articles/mootools-s-33.html