Ajax 异步请求
现在到处都有这方面的教程，我重点说一下我自己搞的一个框架。
特点：
支持Form的无闪提交（方法有点笨）
支持ＭＶＣ框架，即支持传统网页架构
多线程并发请求（要语言支持线程）
动态加载文件，只加载有用的！处理了Ajax框架臃肿的JS文件问题。
采用no table的全div + css布局
a. 获得XMLHTTPRequest对象，网上到处都找得到了，不多说：
1
function
newXMLHttpRequest()
{
2
var xmlreq = false;
3
if (window.XMLHttpRequest) {
4xmlreq = new XMLHttpRequest();
5} else if (window.ActiveXObject) {
6try {
7xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
8} catch (e1) {
9try {
10xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
11} catch (e2) {
12
}
13}
14}
15return xmlreq;
16
}
function
newXMLHttpRequest()
{2
var xmlreq = false;3
if (window.XMLHttpRequest) {4
xmlreq = new XMLHttpRequest();5
} else if (window.ActiveXObject) {6
try {7
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");8
} catch (e1) {9
try {10
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");11
} catch (e2) {12
}13
}14
}15
return xmlreq;16
}
这里提供一个通用的支持多浏览器的方法。
b.提出异步请求
//
这里用Bcandy作为方法名是为了感谢一个对我来说很重要的人，她一直在支持我
function
Bcandy(Tid,url,parm,js)
{if(url == ""){return;}//这是一个加载信息提示框，也可以不要！document.getElementById("load").style.visibility = "visible";//加载相应页面的JS文件if(js != null){//加载ＪＳ文件LoadJS(js);}// 获取一个XMLHttpRequest实例var req = newXMLHttpRequest();// 设置用来从请求对象接收回调通知的句柄函数var handlerFunction = getReadyStateHandler(req,Tid);req.onreadystatechange = handlerFunction;// 第三个参数表示请求是异步的req.open("POST", url, true);// 指示请求体包含form数据req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");// 发送参数req.send(parm);}
function
getReadyStateHandler(req,Tid)
{// 返回一个监听XMLHttpRequest实例的匿名函数return function () {// 如果请求的状态是“完成”if (req.readyState == 4) {// 成功接收了服务器响应if (req.status == 200) {//下面一句是重点，这里显示了返回信息的内容部分，也可以加以修改。进行其它处理document.getElementById(Tid).innerHTML = req.responseText;document.getElementById(Tid).style.visibility = "visible";//这一句是实现加载信息提示框的隐藏，也可以不要。document.getElementById("load").style.visibility = "hidden";} else {// 有HTTP问题发生document.getElementById("load").style.visibility = "hidden";alert("HTTP error: "+req.status);}}}}
//
动态加载ＪＳ文件
function
LoadJS(file)
{var head = document.getElementsByTagName('HEAD').item(0);var script = document.createElement('SCRIPT');script.src = file;script.type = "text/javascript";head.appendChild(script);}
这就是基本的框架了，因为使用了request.responseText;所以，可以直接请求一个页面jsp,servlet但在使用Struts框架的请求时要进行特殊处理，因为Form不支持异步请求。建议在这些页面上不要加入<html><body>标签，就像.net里的asxm文件！而且在使用Struts框架时有点要注意的是，Mapping对象直接返回null就可以了，因为我们会在下面讲到并发多线程。来处理这个问题的。
总的来看，有点像是积木搭建起来的。这样方便文件的修改和扩展，互相之间并不影响，而且，实现了代码和标签分离。在进行传统页面改版时，也不用重新编写全部代码。只要修改一小部分就可以完美实现Ajax带来的无闪刷新快感。
－－－原创，发表于http://www.blueidea.com/bbs/NewsDetail.asp?id=2402179
======================================================================
下面提供一个更为完善的方法：
var
XMLHttp
=
{ _objPool: [], _getInstance: function (){//＝＝＝＝＝＝＝＝＝＝＝＝＝从XMLHttpRequest实例对象池中取得一个实例 for (var i = 0; i < this._objPool.length; i ++){ if (this._objPool[i].readyState == 0 || this._objPool[i].readyState == 4){ return this._objPool[i]; } } // IE5中不支持push方法 this._objPool[this._objPool.length] = this._createObj(); return this._objPool[this._objPool.length - 1]; }, _createObj: function (){//＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝创建XMLHttpRequest实例对象 if (window.XMLHttpRequest){ var objXMLHttp = new XMLHttpRequest(); }else{ var MSXML = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP']; for(var n = 0; n < MSXML.length; n ++){ try{ var objXMLHttp = new ActiveXObject(MSXML[n]); break; }catch(e){} } } // mozilla某些版本没有readyState属性 if (objXMLHttp.readyState == null){ objXMLHttp.readyState = 0; objXMLHttp.addEventListener("load", function (){ objXMLHttp.readyState = 4; if (typeof objXMLHttp.onreadystatechange == "function"){ objXMLHttp.onreadystatechange(); } }, false); } return objXMLHttp; }, loadJs: function(file,type0){ var head = document.getElementsByTagName('HEAD').item(0); var script = document.createElement('SCRIPT'); script.src = "Js/"+file+".js"; if(type0 == "jscript"){ script.type = "text/jscript"; }else if(type0 == "vbscript"){ script.type = "text/vbscript"; }else{ script.type = "text/javascript"; } head.appendChild(script); }, showLoadInfo:function(){ try{ document.getElementById("load").style.visibility = "visible"; document.getElementById("browser").style.visibility = "hidden"; }catch(e){} }, // 发送请求(方法[post,get], 地址, 数据, 回调函数) //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝发送异步请求 sendReq: function (method, url, data, callback){ var objXMLHttp = this._getInstance(); with(objXMLHttp){ try{ // 加随机数防止缓存 if (url.indexOf("?") > 0){ url += "&randnum=" + Math.random(); }else{ url += "?randnum=" + Math.random(); } open(method, url, true); // 设定请求编码方式 setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); send(data); onreadystatechange = function (){ if (objXMLHttp.readyState == 4) { if (objXMLHttp.status == 200) { callback(objXMLHttp); //document.getElementById("load").style.visibility = "hidden"; }else if(objXMLHttp.status == 404){ alert("找不到文件"); }else{ alert("HTTP error: "+objXMLHttp.status); } } } }catch(e){ alert("Error\n"+e); } } }}
;
<!--
＝＝＝＝＝＝＝＝＝＝＝＝不要修改以下代码！！＝＝＝＝＝＝＝＝＝＝＝＝＝＝
->
glbEncode
=
new
Array();
//
重编码
function
reCode(b)
{ var s=rsB(b+" "); s=escape(s).replace(/%u/gi,"").replace(/(.{2})(.{2})/g,"%$2%$1").replace(/%([A-Z].)%(.{2})/ig,"%@$1$2"); var uniS=s.match(/\%@(.{4})/g); s=s.replace(/@/g,""); if(uniS){ var k; for(var i=0;i<uniS.length;i++){ k=uniS[i].substring(2,6); if(!glbEncode[k]){ glbEncode[k]=escape(vbChar(eval("0x"+k))).substring(1,6); } } tempA=s.split("%"); for(var i=0;i<tempA.length;i++){ if(tempA[i].length!=2){ tempA[i]=glbEncode[tempA[i]]; } } s=tempA.join("%"); } return unescape(s);}
这里应用面向对象的方法，在系统加载的时候生成一个对象池，应用的时候，直接从池出提取，可以满足高频率的异步访问。同时提供了不同回调函数的接口
在我的另一篇文章里提供了一个更完善的获取XMLHttp对象的方法，详见http://ycoe.cnblogs.com/archive/2006/03/20/353941.html
注：原创文章，可以随意复制发表，版权问题，请注明作者和出处，谢谢合作！