Javascript操作img解決網站提交數據異常問題

作者：admin 2010-10-08 15:35:32

這里和大家分享一下使用Javascript巧妙操作img做網站異常提交數據處理，要實現表單提交數據到服務器A，如果服務器A訪問不了就提交到服務器B功能，這里向大家提供了一個簡潔實用的方法。

本文和大家重點討論一下使用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()方法使用

責任編輯：佚名來源： lianglong.org

Javascript img