关于Ajax的一揽子工程
－－异步数据交互
/*内部培训用的，写得非常基础*/
Ajax不仅仅就是XMLHttpRequest这么简单。
在以前，我们写客户端的代码一般是实现几个效果，做一下数据校验这些简单的事情。那时，客户端的代码一般不会太多，也不会很复杂，而且大部分情况下这些代码并不是业务过程的核心代码，一定程序上，这些代码是可有可无的，如果它们不能很好的工作，也并不会影响大局。
但现在情况不同了，我们用Ajax做的工程，一方面客户端代码量急骤增加。代码量急聚增中后，代码的管理难度急骤增加，这时我们就需要用到一些工程化管理方法来组织我们的代码，所以我们可以看到很多成熟的Ajax客户端框架都采用了模拟面向对象的方式来实现。另一方面，客户端的不少代码直接和我们的业务逻辑相关，可以说客户端的脚本直接决定我们的程序能不能完成任务，这样的话，我们在写客户端脚本时，不能不更加小心，由此，我们可以看到，Ajax已经涌现出了不少的设计模式，人们也更加重视对Web standard的遵守，也更加重视的cross-browser(跨浏览器)能力。
因此，可以说关于Ajax，有一揽子注意事项，有一揽子工程。
今天我们先来解决最基础的问题：异步数据交互方式。
总的来说，常用的异步数据交互方式有二种：frameset/iframe和XMLHttpRequest。
frameset的一般做法是在框架中做一个高度或宽度为0的隐藏帧。代码如下：
然后再用脚本操作hiddenFrame负责刷数数据，并把返回给自己的内容更新到显示帧。比如在显示页面的一个按钮注册如下click事件处理程序：
function requestCustomerInfo() {
var sId = document.getElementById("txtFormFiled").value;
top.frames["hiddenFrame"].location = "GetNewData.aspx?id=" + sId;
}
然后，隐藏的帧去获取数据，获取数据之后，同样通过脚本来更新显示帧中的内容：var sId = document.getElementById("txtFormFiled").value;
top.frames["hiddenFrame"].location = "GetNewData.aspx?id=" + sId;
}
<script type="text/javascript">
window.onload = function () {
var divInfoToReturn = document.getElementById("divInfoToReturn");
top.frames["displayFrame"].document.getElementById("divInfo").innerHTML = divInfoToReturn.innerHTML;
};
</script>
</head>
<body>
<div id="divInfoToReturn"><%=Your return content
%><div>
</body>
采用这种方式实现post比较的麻烦，需要用DOM操作把显示帧中的form以及form中的值都复制一份到隐藏帧，再通过隐藏帧来代替显示帧提交表单，一般是通过显示帧中的表单提交按钮的onclick事件截获表单提交事件来实现。window.onload = function () {
var divInfoToReturn = document.getElementById("divInfoToReturn");
top.frames["displayFrame"].document.getElementById("divInfo").innerHTML = divInfoToReturn.innerHTML;
};
</script>
</head>
<body>
<div id="divInfoToReturn"><%=Your return content
</body>
HTML4.0以后我们可以采用iframe，iframe不需要帧集，可以放在文档的任何地方，可以通过脚本创建，所以它更灵活。
];
}
//众多的ActiveX的XMLHttp版本}
var XML_VERS = ["MSXML2.XmlHttp.5.0", "MSXML2.XmlHttp.4.0",
"MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp",
"Microsoft.XmlHttp"];
function XmlHttp(){}
//创建Requestor
XmlHttp.createRequest = function () {
if (XMLHttpRequest) {//Non-IE
return new XMLHttpRequest();
}
else if (ActiveXObject) {//IE
for( var i = 0 ; i < XML_VERS.length ; i ++){
try{
var oXmlHttp = new ActiveXObject(XML_VERS[i]);
return oXmlHttp;
} catch (e){}
}
}
};