其實很長時間我都是在用第三方庫，比如jquery ，prototype.js ，ext.js 關(guān)注過我blog的朋友不難發(fā)現(xiàn)我不喜歡造輪子，有現(xiàn)成的就用現(xiàn)成的。但是如今那些庫都變得很龐大。 雖然jquery 的庫，所提供的功能非常實用，基本也感覺沒啥冗余。 不過一般一個web 頁面基本都用不了，那么4、5000行的庫，有人就為了用個ajax 跑去使用ext 。。。。其實我們不妨把自己所需要的一些js 公共函數(shù) 封裝成比較獨立的腳本。這樣能省掉不少流量，況且 關(guān)于GPL 的開源協(xié)議，也能將部分用戶拒之門外的，必定這是一個商業(yè)社會。
試看淘寶，網(wǎng)易，騰訊，搜狐…… 別人都有自己的腳本庫。我也想過在金山做那么一個腳本庫，連怎么把這么多腳本小庫，組織起來，怎么提供一個內(nèi)部的腳本服務(wù)器，比如就像google 的，開發(fā)都按需申請加載 這些我都想好了。本人JavaScript 腳本也基本差不多達到了，然而，聽說是更有價值的事情等著我了……
ajax.js:
/**
* @author hechangmin@gmail.com
* @brief 封裝 ajax 接口
*/
var Ajax =
{
/**
* @brief 創(chuàng)建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 發(fā)送請求，以及綁定回調(diào)函數(shù)
* @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 綁定回調(diào)
*/
_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 參數(shù)校驗 補齊默認值
* @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>
關(guān)于解析JSON 的部分：
http://www.JSON.org/json2.js
http://www.JSON.org/js.html
posted on 2010-03-23 23:05
-274°C 閱讀(2568)
評論(0) 編輯 收藏 所屬分類:
web前端