Javascript

【Javascript】Tips ネットワーク編　サーバー接続をチェックする 1

Javascript関連情報

更新日：2003年03月15日

Tips ネットワーク編　サーバー接続をチェックする 1

高橋登史朗

JavaScriptで簡単に外部サーバーの状態を調べて動作を分岐する方法です。

JavaScript Tips
ネットワーク編

サーバーの接続をチェックする

リンクしている外部のサーバーが止まったり回線の具合が悪くてリンク切れになってしまうということは案外頻繁に起きています。でも、そんな時でも自動でリカバリーして途切れなく情報を提供していたいものですね。そこで、今回から数回にわたりJavaScriptで簡単に外部サーバーの状態を調べて動作を分岐する方法について紹介します。

■　[1]　画像利用/読み込みエラー(onerror)の使い方

今回はまず、画像の読み込みに失敗したときに発生するonerrorイベントの使い方を確認します。サーバートラブルなどで画像の読み込みが失敗したら別のサーバーの画像を読みに行くといった処理に使えるイベントです。

まず最初に、画像を用意してください。画像の表示自体が目的ではなくサーバーのチェックのためのものですからなるべく小さいたとえば1ドットの軽いものなどがベストです。その画像をチェックしたいサーバーに置いておいてください。今回は、1.gifという画像を仮にgame.gr.jpというサーバーに置いてテストしていますが、実際に使うときはみなさんのサーバーにテスト用画像を置いて実施してください。

1: 指定した画像がなければ別のサーバーの画像を読み込む
2: 指定した画像がない場合→ダイアログを表示する
3: 指定した画像がある場合→何もしない
4: 関数化してみる

　( 画像のイベントハンドラonerrorとonloadはJavaScript1.1から実装されているので JavaScriptが動作する現在のブラウザなら完全に動作すると想定してもよい安全なテクニックです。)
1: 指定した画像がなければ別のサーバーの画像を読み込む
```
  <img src = "http://test.game.gr.jp/about/tips/net/1/0.gif"
       onerror = "this.src='http://www.fureai.or.jp/?tato/about/0.gif'">
```
http://test.game.gr.jp/about/tips/net/1/0.gifは存在しないので onerrorによって http://www.fureai.or.jp/?tato/about/0.gifを読みにいきます。
2: 指定した画像がない場合→ダイアログを表示する
```
  <img src = "http://test.game.gr.jp/about/tips/net/1/0.gif"
       width   = "0"
       height  = "0"
       onerror = "alert('読み込めませんでした')">
```
http://test.game.gr.jp/about/tips/net/1/0.gifは存在しないので onerrorによって '読み込めませんでした'のダイアログが表示されます。これは、相手側のサーバーが動作していない場合も同じ結果となります。サーバー動作検知用として利用するためにwidth=0 height=0にして画像自体は表示されないようにしてみます。
3: 指定した画像がある場合→何もしない
```
  <img src = "http://game.gr.jp/about/tips/net/1/1.gif"
       width   = "0"
       height  = "0"
       onerror = "alert('読み込めませんでした')">
```
http://game.gr.jp/about/tips/net/1/1.gif(ここでは1ドットの小さな画像を使っています)は存在するので onerrorは起動せずダイアログは表示されません。
4: 関数化してみる
```
  <script type="text/javascript">
  
  </script>

  <img src = "http://test.game.gr.jp/about/tips/net/1/0.gif"
       width   = "0"
       height  = "0"
       onerror = "worksForErr(event)">
```
1～3までのサンプルはインラインの処理なので複数の処理をしたいときなどにはソースが煩雑でメンテナンスも不便になりやすいものです。そこで、スクリプト処理を関数へ取り出してみます。 http://test.game.gr.jp/about/tips/net/1/0.gifは存在しないので onerrorから関数worksForErr(e)が起動し、その中のダイアログが表示されます。ちなみに、引数のeにはイベントオブジェクトが渡されていますので必要であれば利用することができます。

画像のonerrorイベントは、画像のためのものでありながら、同時にサーバーが生きているかどうかをチェックするための道具としても利用することができます。

次回は、画像の読み込み完了時に発生するイベントonloadを利用する方法について見ていきます。

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！