JavaScriptのクロスドメイン対策

2007/05/26 | JavaScript/Ajax

JavaScriptで異なるドメインに対してリクエストを送ることはできないと書いたけど、コメントをもらって回避策があることを知った。JavaScriptのdojoというフレームワークを使って回避できるということだったが、なにぶんJavaScriptにうといので、もろもろ検索して探ってみた。JavaScriptのフレームワークといえばprototype.jsがメジャーと思いそちらでも調べてみたら、やっぱりできそうな感じ。ん〜、やっぱりフレームワークを少しかじらなくてはいけないのか、と思ってたらいい検索キーワードに出会えた。

「クロスドメイン」

一般的には「JavaScriptではクロスドメインな制御ができない」とでもいわれているようだ。そこでこれをキーワードにいろいろと検索してみた。それで見つけたのがこのページ

理屈としてはこんな感じ。
○JavaScriptの外部スクリプトならどこからでも呼び出せる。
 <script src=”http://example.com/hoge.js”></script>
○これをボタンクリック時などに実行できればいい。
○普通はHTMLが読み込まれた時点でのみ、ファイルの読み込みされるのでタダ記述するだけではだめ。
○イベントドリブンで処理する。以下のスクリプトで動的に読み込ませることができる。
 var s=document.createElement(‘script’);
 s.src=”http://example.com/hoge.js”;
 document.body.appendChild(s);

これでいい。おそらく戻り値が必要な場合はJASON形式で返してやれば何とかなるのだろう(今回はリクエストさえ送ることができればいいので省略)。これでずいぶんすっきりした。

しかしJavaScriptのフレームワーク、奥が深い。まぁGmailでもGoogle Mapsでもそうだけど、サーバサイドプログラミングばっかりやっていた人間にとっては驚くほど魅力的だ。JavaScript・・・できなきゃだめだろうな。

「書き込みできません」って?

2007/05/25 | JavaScript/Ajax

「AJAXを使ってデータをPOSTし、非同期通信して、結果を返してinnerHTMLで表示」というルーチンを考え、実際そのようなプログラムを書いてみた。
テストをする段階になって、いろんなサーバで試してみたのだが、うまくいくときといかない場合がある。なぜなぜ???。
エラーが出るときはIEで「書き込みできません」というメッセージが出る。これはどうも外部ホストと通信しようとした際に表示されるエラーらしい。つまり、読み込み元のHTMLがおいてあるホストと異なるホストへ通信しようとするとエラーが生じることがわかった(セキュリティ上の理由で)。
つまりHTMLファイルのURLホスト名と、呼び出すJavaScriptの配置してあるホスト名が違うとエラーが出るのだ。むやみに外部のホストにAJAXでデータを送信させない、ということだ。
ちなみにこの問題は回避できない。まったく違う代替案を探る必要がある。

ラジオボタンの値の取得

2007/05/24 | JavaScript/Ajax

毎回悩むところなのだが、JavaScriptでラジオボタン(type=”radio”)の値の取得方法がわからなかった。基本的にシングルアンサーなのだから、プルダウン(type=”select”)と同じと思って、selectedIndexとか使ったけど全然だめだめ。調べてみたら一発で取得できないことがわかった。
以下取得するためのJavaScript。

function radioValue(obj){
  var i;
  for(i=0;i<obj.length;i++){
    if(obj[i].checked){
      return obj[i].value;
    }
  }
  return ”;
}

上記関数を書いて、取得したいラジオボタンをオブジェクトとして引数で与える。
JavaScript、きっと永遠に好きになれない。

呼出元の文字コードとJavaScript出力の文字コード

2007/05/23 | JavaScript/Ajax

例えばGoogle Adsense。不特定多数にJavaScriptのタグを渡して、それぞれ各自のウェブページにそのタグを貼ってもらうとき、当然貼られる先のウェブページの文字コードはさまざまだ。貼ってもらうJavaScriptで文字を出力するのだが、例えば以下の組み合わせのような場合、
 ウェブページ:Shift_JIS
 JavaScript:UTF-8
特別なことをしないと文字化けして表示される。これを回避するために例えば以下のようなことを考えた。
 ○JavaScriptが貼られているウェブページのURLをJavaScriptで取得
 ○取得したURLのHTMLを丸ごと取得して、文字コード判別
 ○プログラムで判別した文字コードに変換してJavaScriptから出力
しかし、これ、貼られた先のウェブページが表示されてから、JavaScriptの出力が完了するまで少なからず時間がかかることは言うまでもない。

そこでいいことを思いついた(思い出した)。AJAXな仕組みを作るときは基本的に文字コードはUTF-8で作ることが多いが、違う文字コードのウェブページでそういうJavaScriptを使いたいときがある。こういう場合の対処法でJavaScriptを呼び出す際の記述で以下のようにするとうまくいくことがある、と書いてあった。

<script type="text/javascript" src="http://example.com/script.js" charset="UTF-8">

JavaScriptを呼び出す際に「charset属性を指定してやる」というもの。この手法で見事簡単に異なる文字コード間でも正しく出力できることを確認できた(IE、Opera、FireFoxで確認)。
あまりに簡単に面倒なルーチンを回避できたのでちょっとうれしくなった。

フォームで[Enter]キーが押された際に・・・

2007/01/21 | JavaScript/Ajax

HTMLフォームの処理でユーザインターフェースを考えた際のもんんだいに対する対応。
例えば入力フォーム中のテキストボックス(<input type="text">)に入力する時で[Enter]エンターキーが押されると、サブミットするつもりでないのにフォームを処理してしまうことがある。フォームの作り方にもよるが、これだとフォームがサブミットされてしまい、最悪の場合、今まで入力したデータがパーになってしまうこともある。
これを防ぐ方法。<input type="submit">を使わない方法で対応するのがよさそうだ。どうも[Enter]キーが押される=サブミットという図式が成り立つので、<input type="submit">をなくしてしまえばよい、というわけだ。
しかしそれではフォームをサブミットする方法がなくなるので代替の方法を用意しておかないといけない。ここでは簡単なJavaScriptを使う。

<input type="button" onClick="document.(フォーム名).submit()">

これで意図しないサブミット処理をなくすことができる(ただしJavaScriptが動作することが前提であるわけだが)。今はエンドユーザの使い勝手をよくするためにJavaScriptは必須な機能。昔は「JavaScriptをOnにしてください」なんて書いてあるサイトを見ると、ちょっとナンセンスと思っていた。できれば「JavaScriptはOnであることが当たり前」として、そうじゃない設定をしてあるブラウザは、イレギュラーなブラウザとしてブラウザ側で何らかの機能を実装して欲しいと思う(例えばJavaScriptを使ったページを見たら「このページはJavaScriptが使われているので、Onにしないと表示が乱れます」といったダイアログを出すとか・・・)。
そもそもセキュリティホールが多すぎるんだろうね。でも、これはActivXに絡んだIEの問題なように思うけれど・・・(もちろんIE以外でもバグはあるわけなんだけどね)。

流行はAjaxを初めとするJavaScript。
難しい・・・。


守谷市(まちの情報ポータル) 無料アンケートレンタルjpForm.net