难舍Javascript 篇 之 AJAX

难舍Javascript 篇 之 AJAX

        其实很长时间我都是在用第三方库，比如jquery ，prototype.js ，ext.js 关注过我blog的朋友不难发现我不喜欢造轮子，有现成的就用现成的。但是如今那些库都变得很庞大。 虽然jquery 的库，所提供的功能非常实用，基本也感觉没啥冗余。 不过一般一个web 页面基本都用不了，那么4、5000行的库，有人就为了用个ajax 跑去使用ext 。。。。其实我们不妨把自己所需要的一些js 公共函数 封装成比较独立的脚本。这样能省掉不少流量，况且 关于GPL 的开源协议，也能将部分用户拒之门外的，必定这是一个商业社会。

    试看淘宝，网易，腾讯，搜狐…… 别人都有自己的脚本库。我也想过在金山做那么一个脚本库，连怎么把这么多脚本小库，组织起来，怎么提供一个内部的脚本服务器，比如就像google 的，开发都按需申请加载 这些我都想好了。本人JavaScript 脚本也基本差不多达到了，然而，听说是更有价值的事情等着我了……

ajax.js:

/* *
 * @author  [email protected]
 * @brief   封装 ajax 接口
  */  
 
var  Ajax  =  
{ 
     /* *
     * @brief 创建XMLHTTP 对象
      */
    _creatXmlHttp :  function ()
    {
        
         if (window.XMLHttpRequest) 
        { 
             return   new  XMLHttpRequest();
        }
         else   if (window.ActiveXObject)   
        { 
             var  aVersions  =  ['MSXML2.XMLHTTP. 6.0 ','MSXML2.XMLHTTP. 3.0 ','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];   
            
             for ( var  i = 0 ; i < aVersions.length; i ++ )
            { 
                 try  
                {
                     return   new  ActiveXObject(aVersions[i]);
                } catch (e)
                { 
                }
            }   
        }
    },
    
     /* *
     * @brief 发送请求，以及绑定回调函数
     * @param {Object} option [可选]
     * {
     *         [method],[async],url,data,[success],[encode],[error]
     * }
      */
    sendRequest :  function (_option)
    { 
         var  xmlhttp  =  Ajax._creatXmlHttp();
         var  option   =  _option;
        
         if ( ! xmlhttp)
        { 
            alert( " Your browser against Ajax. " );
             return   false ;
        }
        
        Ajax._CheckParam(option);
        
        xmlhttp.open(option.method, option.url, option.async);
        
        xmlhttp.setRequestHeader('Content - type','application / x - www - form - urlencoded; charset = '  +  option.encode);
        
        xmlhttp.onreadystatechange  =  Ajax._BindCallBack(xmlhttp,option);
        
        xmlhttp.send(option.data  ||   null );
        
         return  xmlhttp;
    },
    
     /* *
     * @brief 绑定回调
      */
    _BindCallBack :  function (xmlhttp,option)
    { 
         return   function ()
        { 
             if  (xmlhttp.readyState  ==   4 ) 
            { 
                 if  (xmlhttp.status  >=   200   &&  xmlhttp.status  <   300  ) 
                {
                     if (option.success  !=   null )
                    {
                        option.success(xmlhttp.responseText);
                         delete  xmlhttp;
                        xmlhttp  =   null ; 
                    }
                } else
                {
                     if (option.error   !=   null )
                    {
                        option.error(xmlhttp.responseText);
                         delete  xmlhttp;
                        xmlhttp  =   null ;
                    }
                } 
            }
        }
    },
    
     /* *
     * @brief 参数校验 补齐默认值
     * @param {Object} option
      */
    _CheckParam :  function (option)
    { 
         
         if ( ! option.method)
        { 
            option.method  =   " post " ;
            
        } else   if (option.method.toLowerCase()  ===   " get " )
        { 
            option.method  =   " get " ;
        } else
        { 
            option.method  =   " post " ;
        }
         
         if (option.async  ===  window.undefined)
        { 
            option.async  =   true ;
        }
        
         if ( ! option.url)
        { 
            option.url  =  window.location.href;
        }
        
         if ( ! option.encode)
        { 
            option.encode  =   " UTF-8 " ;    
        }
        
         if  (option.method  ==  'get'  &&   typeof (option.data)  ==  'string')
        {
            option.url  +=  (option.url.indexOf(' ? ')  ==   - 1   ?  ' ? ' : ' & ')  +   " data= "   +  option.data;
            
            option.data  =   null ;
        }
        
         if (option.method  ==  'post')
        { 
            option.data  =   " data= "   +  option.data;
        }
        
    }
} 

test.html

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html >
     < head >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" />
         < script  type ="text/javascript"  src ="public/js/ajax.js" ></ script >
         < script  type ="text/javascript"  src ="public/js/json2.js" ></ script >
     </ head >
     < body >
         < div  id ="test1" > aaaa </ div >
         < script  type ="text/javascript"  defer ="true" >
             var  param  =  { 
                    method :  " get " ,
                    async  :  true ,
                    url    :  " test.php " ,
                    data   :  " testtest " ,
                    success:  function (txt)
                    { 
                        alert(txt); 
                    },
                    
                    encode :  " UTF-8 " ,
                    
                    onerror :  function (txt)
                    { 
                        alert(txt);
                    }
                    
            };
            
             var  x  =  JSON.stringify(param);
            
            alert(x);
            
            alert( typeof  x );
            
             var  y  =  JSON.parse(x);
            
            alert( typeof  y);
            
             for ( var  i  in  y)
            { 
                alert( " y. "   +  i  +   " : "   +  y[i]);
            }
            
             // alert(param);
            
            Ajax.sendRequest(param);
            
             var  param1  =  { 
                    url    :  " test.php " ,
                    async  :  false ,
                    data   :  " aaaaa "                 
            };
            
             var  ret  =  Ajax.sendRequest(param1).responseText;
            
            alert(ret);
         </ script >
     </ body >
</ html >

关于解析JSON 的部分：

 http://www.JSON.org/json2.js

 http://www.JSON.org/js.html