本文向大家描述一下使用javascript巧妙操作img做网站异常提交，表如果要实现单提交数据到服务器A，如果服务器A访问不了就提交到服务器B，利用js操作img来处理完成是个不错的选择。
使用javascript巧妙操作img做网站异常提交
如果要实现表单提交数据到服务器A，如果服务器A访问不了就提交到服务器B，使用JS实现上面的所讲功能，要考虑跨域问题，有使用过ajax的xmlhttp方法检测远程文件不存在返回404的方案，这种方案在测试时由于ajax存在跨域问题，所以就不采用了，也使用过img的onerror与onload事件这种方案来处理，但是这种方案会造成提交表单IE会弹窗，浏览器又拦截了弹窗，所以又不采用此方案，哪怎么办呢？搞得挺久，最终还是利用js操作img来处理完成，下面是具体步骤。
第1步、创建一个test.htm文件
内容如下：
- <html>
- <scriptsrcscriptsrc="getMessage.js"></script>
- <body>
- <formnameformname="mfrm">
- <inputidinputid="SendType"
- type="hidden"value="s129"name="SendType"/>
- <inputidinputid="title"name="title"/>
- <inputonClickinputonClick="returngetMessage(this.form);
- "type="button"name="imageField"/>
- </form>
- </body>
- </html>
第2步：创建getMessage.js文件
内容如下：
- functiongetMessage(frm){
- varsendtype=frm.SendType;
- vartitle=frm.title;
- //创建模拟form表单
- varobjfrm=document.createElement("form");
- varobjsendtype=document.createElement("input");
- varobjtitle=document.createElement("input");
- //利用操作img来处理目标接收数据的服务器页面
- varobjImg=document.createElement("img");
- objImg.id="TmpSmsImg";
- objImg.src="http://www.xueit.com/images/logo.gif";
- //默认服务器A图片
- document.body.appendChild(objImg);
- varimgWidth=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);
- //clearobj
- objtitle=null;
- objsendtype=null;
- objfrm=null;
- }
- //处理编码函数
- functionUtf2Gb(str)
- {
- if(str!=null&&str!="")
- str=escape(str);
- returnstr;
- }
以上代码主要是利用img图片，如果图片所在服务器正常运行的话，图片会加载到当前页面的body区域中，所以再获取这个img图片的宽度，如果宽度等于你知道的预定值，就代表默认服务器正常，否则代码服务器A不正常，就把数据提交到服务器B处理。
发表评论共有0访客发表了评论
暂无评论，快来抢沙发吧！