使用javascript巧妙操作img做网站异常提交数据处理

本文要做的功能效果如下:
表单提交数据到服务器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处理。

时间:2010-04-02 | 分类:技术文摘 | 标签: javascript操作img 
评论列表
暂无评论
发表评论
昵称
邮箱
内容