嗨！！歡迎來到：如何偵測URL資源是否存在, Ajax way

網頁標題：如何偵測URL資源是否存在, Ajax way

如何偵測URL資源是否存在, Ajax way
Tags: 偵測URL ajaxKa-Yue 說: JavaScript have onerror event too.

Good question. PHP 的偵測動作是在 server-side ，它可能增加 Server 不必要的網路負荷。如果改由 JavaScript 進行偵測動作，就可以把偵測動作分派給 client 去做。這是一種 Ajax 的應用。

我將使用img網頁元件進行偵測動作。可先參考《Rendering images with title and box》了解關於img的onload 與 onerror 的資訊。

按此直接觀看原始碼
透過 JavaScript 在 Client 進行偵測動作時，是以非同步模式運行。故程式架構會比 PHP 的同步偵測模式複雜，但效率比同步模式快上許多。

上面的例子只是精簡版。我以前寫過 Ajax 版的無效連結偵測程式[可指定並行工作線程數(threads)]，輸入一個網址及指定的偵測層數後，可以從首頁往子網頁深入偵測無效連結。輸入同一個網址及同樣的探索層數， Ajax版比 PHP 版快上3-10倍有餘 (視使用者在 Ajax 版指定的並行偵測線程數而定)。

這個精簡的範例因為使用 img 實作，故有個缺點：它會把整份文件下載回 client 。如果想同 PHP 版那般只取 HEAD ，則須改用XmlHttpRequest 實現。但此時將面臨 XmlHttpRequest 的相同來源安全限制策略 (Same Origin Policy) ，故僅能偵測相同來源下之URL是否存在，用途受限。

http://blog.roodo.com/rocksaying/archives/3216885.html

[code]

<html> <body> <script type="text/javascript"> function checkUri(checkCase) { 　　var uri = document.createElement('img'); 　　var cmdMap = { 　　　　'success':'onload', 　　　　'error':'onerror', 　　　　'status':'status', 　　　　'uri':'src' 　　}; 　　uri.$checkCase = checkCase; 　　for (var p in cmdMap) { 　　　　uri[cmdMap[p]] = checkCase[p]; 　　} } function successHandler() { 　　this.$checkCase.status = '200'; } function errorHandler() { 　　this.$checkCase.status = '404'; } var testCaseSet = [ 　　{uri:'http://www.google.com.tw/intl/en_com/images/logo_plain.png'}, 　　{uri:'http://www.google.com.tw/intl/en_com/images/logo_plain.xxx'} ]; var initProperties = { 　　'success': successHandler, 　　'error': errorHandler, 　　'status': null }; for (var i = 0, checkCase; checkCase=testCaseSet[i]; ++i) { 　　for (var p in initProperties) 　　　　checkCase[p] = initProperties[p]; 　　checkUri(checkCase); } var checkTimer = window.setInterval( 　　function() { 　　　　var checkOk = true; 　　　　for (var i = 0, checkCase; checkCase=testCaseSet[i]; ++i) { 　　　　　　if (!checkCase.status) { 　　　　　　　　checkOk = false; 　　　　　　　　break; 　　　　　　} 　　　　} 　　　　if (checkOk) { 　　　　　　window.clearInterval(checkTimer); 　　　　　　report(); 　　　　} 　　}, 　　200 ); function report() { 　　var div = document.createElement('pre'); 　　var msg = []; 　　for (var i = 0, checkCase; checkCase=testCaseSet[i]; ++i) { 　　　　msg.push( 　　　　　　checkCase.uri + 　　　　　　': ' + 　　　　　　(checkCase.status == '200' ? 'OK' : 'ERROR') 　　　　); 　　} 　　div.innerHTML = msg.join(' '); 　　document.getElementsByTagName('body')[0].appendChild(div); } </script> </body> </html> 
[/code]

執行

回 · js 網路程式大搜羅這一篇文章封面

本文張貼者：校校鴿〔張貼時間：民國102年3月23日（星期六）11點13分〕 | 寫信給校校鴿

部落格首頁

學習的故鄉首頁

本站公告：〔您越需要我們，我們就越有創意〕	本站說明書：〔發現故鄉還有改進的地方，請來信告訴原丁們〕
觀察應用學習點數：〔咱的故鄉有您的參與，會使我們有更大的發揮空間，展現更豐富精彩的學習畫面〕	〔期待藉由無障礙網頁設計，能讓視障小朋友更愛看書、更愛寫作且更愛學習〕：盲用電腦「心得分享」

〔為了讓我們有乾淨的學習環境，請勿任意在本站散播商業廣告與不合法文件或聯結〕：本站宣示