本文要做的功能效果如下:
表单提交数据到服务器A,如果服务器A访问不了就提交到服务器B
要使用JS实现上面的所讲功能,要考虑跨域问题,有使用过ajax的xmlhttp方法检测远程文件不存在返回404的方案,这种方案在测试时由于ajax存在跨域问题,所以就不采用了,也使用过img的onerror与onload事件这种方案来处理,但是这种方案会造成提交表单IE会弹窗,浏览器又拦截了弹窗,所以又不采用此方案,哪怎么办呢?搞得挺久,最终还是利用js操作img来处理完成。
也许说了这么多,你还看不懂我所表达的意思,暂不管这些,下面看代码你就清楚了。
第1步、创建一个test.htm文件,内容如下:
Code [http://www.xueit.com]<html>
<script src="getMessage.js"></script>
<body>
<form name="mfrm">
<input id="SendType" type="hidden" value="s129" name="SendType" />
<input id="title" name="title" />
<input onClick="return getMessage(this.form);" type="button" name="imageField" />
</form>
</body>
</html>第2步:创建getMessage.js文件,内容如下:
Code [http://www.xueit.com]function getMessage(frm){
var sendtype = frm.SendType;
var title = frm.title;
//创建模拟form表单
var objfrm = document.createElement("form");
var objsendtype = document.createElement("input");
var objtitle = document.createElement("input");
//利用操作img来处理目标接收数据的服务器页面
var objImg = document.createElement("img");
objImg.id="TmpSmsImg";
objImg.src="http://www.xueit.com/images/logo.gif"; //默认服务器A图片
document.body.appendChild(objImg);
var imgWidth=document.getElementById("TmpSmsImg").width;
document.body.removeChild(objImg);
if (imgWidth == "210") //如果图片存在,就可以获取到宽度等于预定值,默认接收数据的服务器A的页面
{
objfrm.action = "http://www.xueit.com/testGet.aspx";
}
else //图片不存在,另一台接收数据的服务器B的页面
{
objfrm.action = "http://demo.xueit.com/testGet.aspx";
}
//下面是表单的属性
objfrm.id = "TmpForm";
objfrm.name = "TmpForm";
objfrm.target = "_blank";
objfrm.method = "post";
objfrm.style.display = "none";
objsendtype.type = "hidden";
objsendtype.name = "SendType";
objsendtype.value = Utf2Gb(sendtype);
objtitle.type = "hidden";
objtitle.name = "title";
objtitle.value = Utf2Gb(title);
//附加
objfrm.appendChild(objsendtype);
objfrm.appendChild(objtitle);
//表单提交
document.body.appendChild(objfrm);
objfrm.submit();
document.body.removeChild(objfrm);
//clear obj
objtitle =null;
objsendtype=null;
objfrm = null;
}
//处理编码函数
function Utf2Gb(str)
{
if (str!=null&&str!="")
str = escape(str);
return str;
}以上代码主要是利用img图片,如果图片所在服务器正常运行的话,图片会加载到当前页面的body区域中,所以再获取这个img图片的宽度,如果宽度等于你知道的预定值,就代表默认服务器正常,否则代码服务器A不正常,就把数据提交到服务器B处理。
评论