今天需要实现这么一个页面,需要同时向四台服务器发送请求。
一开始考虑在服务器端实现,但是还得自己加个HttpClient的包,后来想到Ajax刚好也可以实现这个目标,于是有了如下代码:
<html> <head> <mce:script language="javascript"><!-- var XMLHttp = { _objPool: [], _getInstance: function () { 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 () { if (window.XMLHttpRequest) { var objXMLHttp = new XMLHttpRequest(); } else { var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.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; }, // 发送请求(方法[post,get], 地址, 数据, 回调函数) sendReq: function (method, url, data, callback) { var objXMLHttp = this._getInstance(); with(objXMLHttp) { try { open(method, url, true); // 设定请求编码方式 setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); send(data); onreadystatechange = function () { if (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304)) { callback(objXMLHttp); } } } catch(e) { alert(e); } } } }; // --></mce:script> </head> <body> <mce:script type="text/javascript"><!-- var windowCount = 0; XMLHttp.sendReq('GET', 'http://<%=serverIP1%>/services/book/deleteBookCache.jsp?id=<%=p_id%>','', test); XMLHttp.sendReq('GET', 'http://<%=serverIP2%>/services/book/deleteBookCache.jsp?id=<%=p_id%>','', test); XMLHttp.sendReq('GET', 'http://<%=serverIP3%>/services/book/deleteBookCache.jsp?id=<%=p_id%>','', test); XMLHttp.sendReq('GET', 'http://<%=serverIP4%>/services/book/deleteBookCache.jsp?id=<%=p_id%>','', test); function test(objXMLHttp){ alert(objXMLHttp.responseText); windowCount ++; if (windowCount==4) { window.close(); } } // --></mce:script> </body> </html>
本地测试通过,但是传上服务器之后发现 弹出框报错 [object error]。显然是没有获得返回的对象。
后来在网上找到资料说Ajax跨域请求是会有问题的。
具体原因:(出自http://www.blogjava.net/itspy/archive/2007/02/11/99262.html)
分析2:为什么要限制AJAX跨域访问[注3]:
可以肯定的说是出于安全的需要,但我没有找到什么资料明确这个问题分析,我只能通过看其它资料来自己体会了,我自己发现的一个安全问题就是:AJAX可能会把用户的cookie信息泄漏出去,比如我往别用户的Gmail信箱里面发嵌有JS脚本的邮件.这些脚本读取gmail.com域中的cookies信息,然后通过AJAX发送给我的个人网站,这样我的个人网站就可以得到这个用户的Gmail的cookies.我然后把它提取出来,我就可以不用密码来访问这个用户的Gmail邮箱了.这个只是我能想到的,我想如果能够让AJAX能够跨域访问的话,肯定还有其它一些安全问题.
网上有Ajax跨域请求的解决方案,何奈我是新手也懒得去试。现在只能回归服务器端的解决方案了。