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

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

ajax.js:

/**
 * @author  hechangmin@gmail.com
 * @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


posted on 2010-03-23 23:05 -274°C 阅读(2425) 评论(0)  编辑  收藏 所属分类: web前端

只有注册用户登录后才能发表评论。


网站导航:
 

常用链接

留言簿(21)

随笔分类(265)

随笔档案(242)

相册

JAVA网站

关注的Blog

搜索

  •  

积分与排名

  • 积分 - 872768
  • 排名 - 37

最新评论