其实很长时间我都是在用第三方库，比如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 阅读(2547)
评论(0) 编辑 收藏 所属分类:
web前端