目的:
property,jquery等好这些框架非常优秀，也非常好用。然而很想去了解一下它们的神秘面孔。最近公司在做一个项目，其中也用到了不少ajax，可公司不让用这些框架（不清楚为什么，也很郁闷）所以，只好研究一下其它的框架，自己写一个。
在这里帖出出，与大家交流
知识要点:
1.无类型对象 2.xmlHttpRequest
无类型对象：在js中可以用大括号“{}”来直接定义对象，而不必通过new来创建
var
person
=
{
id
=
"
1001
"
,
name
=
"
json
"
,
age
=
20
}
//
注意最后一行age属性淌有逗号
访问属性：
1,person.id | person.name | person.age
2,persion["id"] | person["name"] |person["age"]
属性复制：
在js里由于对象的属性可以通过[]来访问，因此，用for循环可以实现对象的赋值
如 由于person和teacher的属性相同，因此把teacher的值赋给person可用下列方
var
person
=
{
id
=
"
1001
"
,
name
=
"
json
"
,
age
=
20
}
var
teacher
=
{
id:
"
1002
"
,
name:
"
teacher
"
,
age:
40
}
for
(
var
property
in
teacher)
{
person[property]
=
teacher[property];
}
xmlHttpRequest :ajax中核心内容,主要是创建js异步请求对象，具体的可以在网上查查，呵呵。。其实我也不太懂，就只会用。
好了下面正式开始创建框架
Utils.js 代码
Code
//创建一个类
//创建类有好种方法，这里采用最简单的function
var Class = function() { }
//创建一个扩展函数，前面所讲的for循环,设置类的属性
var extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}
//原型法扩展类Class
Class.prototype.Ajax = function(options) {
//定义一个内部无类型对象
var opt = {
method: "post",
url: "",
data: null,
isxml: false,
beforeSend: function() { },
success: function(data) { },
error: function(data) { }
};
//设置无类型对象的属性
if (options)
extend(opt, options);
//创建xmlHttpRequest
var xmlHttp = null;
try {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
} catch (err) {
alert(err + "\n\n" + "您的浏览器不支持AJAX!");
return;
}
//打开
xmlHttp.open(opt.method, opt.url, true);
if (opt.method == "post") {
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
//返回值 是否为xml或text
var result = opt.isxml ? xmlHttp.responseXML : xmlHttp.responseText;
//成功时执行函数
opt.success(result);
ajax_Success(result);
}
}
try {
//触发全局的发送之前所要调用的函数
ajax_BeforeSend();
//触发发送前所要调用的函数
opt.beforeSend();
//发送
xmlHttp.send(opt.data);
}
catch (err) {
//出错时执行的函数
opt.error(err.description);
ajax_Error();
}
}
//定义全局ajax事件
var ajax_BeforeSend = function() { }
var ajax_Success = function() { }
var ajax_Error = function() { }
//创建应用时的对像
var Ming = new Class();
页面调用代码为：
Code
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title></title>
<script src="js/Utils.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" >
function show() {
Ming.Ajax({
method: "get",
url: "WebForm1.aspx?oper=add",
beforeSend: function() {
document.getElementById("state").innerHTML = "正在提交";
},
success: function(data) {
alert(data);
document.getElementById("state").innerHTML = data;
},
error: function(data) {
document.getElementById("state").innerHTML = data;
}
});
}
ajax_BeforeSend = function() {
document.getElementById("update").innerHTML = "谢谢您的回复:)正在提
交";
}
ajax_Success = function() {
document.getElementById("update").innerHTML = "给你带来麻烦了,请于
管理员联系!</br>网站导航:<a href='http://www.baidu.com'>首页</a>";
}
ajax_Error = function() {
document.getElementById("update").innerHTML = "给你带来麻烦了,请于
管理员联系!</br>网站导航:<a href='http://www.baidu.com'>首页</a>";
}
window.onload = show;
</script>
</head>
<body>
<form id="form1" >
<div id="state">
</div>
<div id="update"></div>
</form>
</body>
</html>
呵呵。。至此一个简单的ajax框架已经完成，虽然内容有点简单，不过以后会加其它的内容，慢慢就丰富起来的.
