Javascript操作img解決網(wǎng)站提交數(shù)據(jù)異常問題
本文和大家重點(diǎn)討論一下使用Javascript巧妙操作img做網(wǎng)站異常提交數(shù)據(jù)處理，通過兩步就可以實(shí)現(xiàn)表單提交數(shù)據(jù)到服務(wù)器A，如果服務(wù)器A訪問不了就提交到服務(wù)器B功能，具體內(nèi)容請(qǐng)看下文詳細(xì)介紹。
使用Javascript巧妙操作img做網(wǎng)站異常提交數(shù)據(jù)處理
本文要做的功能效果如下：
表單提交數(shù)據(jù)到服務(wù)器A，如果服務(wù)器A訪問不了就提交到服務(wù)器B
要使用JS實(shí)現(xiàn)上面的所講功能，要考慮跨域問題，有使用過ajax的xmlhttp方法檢測(cè)遠(yuǎn)程文件不存在返回404的方案，這種方案在測(cè)試時(shí)由于ajax存在跨域問題，所以就不采用了，也使用過img的onerror與onload事件這種方案來(lái)處理，但是這種方案會(huì)造成提交表單IE會(huì)彈窗，瀏覽器又?jǐn)r截了彈窗，所以又不采用此方案，哪怎么辦呢？搞得挺久，最終還是利用js操作img來(lái)處理完成。
也許說了這么多，你還看不懂我所表達(dá)的意思，暫不管這些，下面看代碼你就清楚了。
第1步、創(chuàng)建一個(gè)test.htm文件，內(nèi)容如下：
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步：創(chuàng)建getMessage.js文件，內(nèi)容如下：
Code
- functiongetMessage(frm){
- varsendtype=frm.SendType;
- vartitle=frm.title;
- //創(chuàng)建模擬form表單
- varobjfrm=document.createElement("form");
- varobjsendtype=document.createElement("input");
- varobjtitle=document.createElement("input");
- //利用操作img來(lái)處理目標(biāo)接收數(shù)據(jù)的服務(wù)器頁(yè)面
- varobjImg=document.createElement("img");
- objImg.id="TmpSmsImg";
- objImg.src="http://www.xueit.com/images/logo.gif";
- //默認(rèn)服務(wù)器A圖片
- document.body.appendChild(objImg);
- varimgWidth=document.getElementById("TmpSmsImg").width;
- document.body.removeChild(objImg);
- if(imgWidth=="210")//如果圖片存在，
- 就可以獲取到寬度等于預(yù)定值，默認(rèn)接收數(shù)據(jù)的服務(wù)器A的頁(yè)面
- {
- objfrm.action="http://www.xueit.com/testGet.aspx";
- }
- else//圖片不存在，另一臺(tái)接收數(shù)據(jù)的服務(wù)器B的頁(yè)面
- {
- 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;
- }
- //處理編碼函數(shù)
- functionUtf2Gb(str)
- {
- if(str!=null&&str!="")
- str=escape(str);
- returnstr;
- }
以上代碼主要是利用img圖片，如果圖片所在服務(wù)器正常運(yùn)行的話，圖片會(huì)加載到當(dāng)前頁(yè)面的body區(qū)域中，所以再獲取這個(gè)img圖片的寬度，如果寬度等于你知道的預(yù)定值，就代表默認(rèn)服務(wù)器正常，否則代碼服務(wù)器A不正常，就把數(shù)據(jù)提交到服務(wù)器B處理。
【編輯推薦】
- Javascript中split函數(shù)用法指導(dǎo)手冊(cè)
- 深入剖析JavaScript和Java的區(qū)別
- JavaScript數(shù)組元素刪除問題解決方案
- JavaScript對(duì)象的定義及創(chuàng)建實(shí)例
- 解析Javascript中replace()方法使用
