本文和大家重点讨论一下使用Javascript巧妙操作img做网站异常提交数据处理,通过两步就可以实现表单提交数据到服务器A,如果服务器A访问不了就提交到服务器B功能,具体内容请看下文详细介绍。
使用Javascript巧妙操作img做网站异常提交数据处理
本文要做的功能效果如下:
表单提交数据到服务器A,如果服务器A访问不了就提交到服务器B
要使用JS实现上面的所讲功能,要考虑跨域问题,有使用过ajax的xmlhttp方法检测远程文件不存在返回404的方案,这种方案在测试时由于ajax存在跨域问题,所以就不采用了,也使用过img的onerror与onload事件这种方案来处理,但是这种方案会造成提交表单IE会弹窗,浏览器又拦截了弹窗,所以又不采用此方案,哪怎么办呢?搞得挺久,最终还是利用js操作img来处理完成。
也许说了这么多,你还看不懂我所表达的意思,暂不管这些,下面看代码你就清楚了。
第1步、创建一个test.htm文件,内容如下:
Code
- <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文件,内容如下:
Code
- 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处理。
【编辑推荐】
- Javascript中split函数用法指导手册
- 深入剖析JavaScript和Java的区别
- JavaScript数组元素删除问题解决方案
- JavaScript对象的定义及创建实例
- 解析Javascript中replace()方法使用