タグ別アーカイブ: Ajax

Highslide JS で簡単にサムネイル画像ポップアップ


 
Highslide JS
 
近頃は汎用的で高機能な Ajax JavaScript ライブラリが充実してきましたが、ただサムネイル拡大表示をスマートに行いたい、という時はこちらのほうがこれを使うのがよさそうです。
一番単純な例は次のようなものです。

<!– ヘッダで定義しておく –>
<script type=”text/javascript” src=”my-highslide-dir/highslide.js”></script>
<!– 実際にサムネイル表示する –>
<a href=”拡大画像のURL” class=”highslide” onclick=”return hs.expand(this)”>
    <img src=”サムネイル画像のURL” />
</a>

JavaScript 非対応の時はただ拡大画像へのリンクになるあたりがスマートです。
画像のポップアップだけではなく、ポップアップ画像に任意の説明を付与も比較的簡単にでき、機能面でも素晴らしいですね。
 
参考サイトを参照すると詳しい使い方や利用例があります。
 
参考:
Highslide JS でサムネイル画像を拡大表示する(小粋空間)
Highslide JS のサンプルページ(caramel-tea.com)

<script src="…"> で注意すべき点


ドメイン間のデータ送信テスト(docodemo door Test)
<script src=”…”>を用いた、パスワード入力フォームの内容を悪意あるサイトに送るテスト。
 
たとえばブログペットやアクセスカウンター、アフィリエイトなどは <script src=”http://サービス提供サイト/xxx”>という形式の HTML タグをブログに埋め込みますが、埋め込んだブログがトップページからログイン可能なものであった場合、サービス提供サイト側がブログのパスワードを盗み出すことができてしまいます。
 
対策として
– 信頼できる(盗まれても問題が無い,あるいは自分で構築した)サイトのサービスのみ利用する。
-重要な情報が含まれる(入力される)ページには信頼できるサイト以外のサービスを付加しない。
などが挙げられます。
 
JSONP を利用する場合も当然注意する必要があります。

JSON で実現する快適な Ajax


AJAX で JavaScript でサーバからの出力を解釈する際に、最も用意にパースできる出力形式として、JSON(JavaScript Object Notation)形式があります。出力が XML ではなくなるため、厳密には Ajax(Asynchronous JavaScript + XML)ではなくなりますが、JSON を利用することで、JavaScript でのパース作業が格段に容易になる上、クロスドメイン呼び出しが可能になるというメリットがあります。
 
基本的な文法についてはこちらが参考になりますが、大体このようになります。

var person = {
      name: “John”, // name プロパティ
      age: 30,
      family: [ // 配列
        {name: “Jane”, age: 24}, // 配列内オブジェクト
        {name: “Richard”, age: 1}
      ]
   };
// 参照例
alert(person.name); // John が出力される
alert(person.family[0].name); // Jane が出力される

 
JavaScript で動的利用する場合、
JavaScript – JSONでデータを受信する方法2種類(s.h.log)
dojo toolkit の ScriptSrcIO(snippets from shinichitomita’s journal)
が参考になります。
これを PHP で生成する場合、PHP 5.2.0 以降デフォルトで組み込まれるようになったJSON関数(PECL:php-json)を利用します。日本語使用時の注意として、json_encode に渡す文字列の文字コードは UTF-8 にする必要があります。

  echo json_encode(array(“name”=>”John”, “age”=>30));

また、JSONP (JSON with Padding) という手法により、サーバ側からクライアントに対し非同期コールバック関数を実行させることができます。
リクエストURL:

http://foo.example.com/api/person?name=John&callback=myPersonHandler

リクエスト結果:

myPersonHandler({name: “John”, age:30});

埋め込む HTML:

<script type=”text/javascript” src=”http://foo.example.com/api/person?name=John&callback=myPersonHandler” charset=”UTF-8″><!–
    function myPersonHandler(result){
        alert(result.name + ” is ” + result.age + “years old”);
    }
//–></script>

こうすると、サーバからの結果の出力完了後に自動的に myPersonHandler が呼ばれるようになります。なお、myPersonHandler という関数名は、リクエストURL の callback パラメータを元にしているため、クライアント側で任意の関数に置き換えることが可能です。
 
参考:
PHP で JSON(Do You PHP?)
Collection & Copy – JSON 入門
JavaScript – dojo の ScriptSrcIO で動的クロスドメイン JSON 読み込み
JSONP とコールバック関数(戯れ言++ – 入門 JSON 3)

Java で Ajax


JavaをJavaScriptに変換するグーグルのツールを使ってみよう
GWT (Google Web Toolkit), おもしろい。
 
参考:
Google Web Toolkit 公式サイト
 
– Googlipse (公式または Sourceforge.net)
  Eclipse 用 GWT プラグイン。
 
Google Web Toolkitを使ってJavaでAjax開発(All About)
  Googlipse を使って開発するときの手順が参考になります。
  この記事ではデプロイについては方法が書かれていませんが、仮想ブラウザで実行中に、仮想ブラウザの上部の「Compile/Brose」ボタンでデプロイできます。詳しくはGooglipse 公式の Docs を参照のこと。
 
Google Web Toolkit 評価(Cybozu Deveoloper Network)

Ajax – Google Suggestion とかで使われてる Web の動的補完


Asynchronous JavaScript + Xml
ajax を使った郵便番号検索(ソース公開)
JavaScript で new XMLHttpRequest() , インスタンス経由で CGI に普通に GET して text/xml なレスポンスを受けてデータ反映, と. 別に XML じゃなくてもいいけどもこの組合せが前提みたい.
 
<http://antipop.zapto.org/docs/translations/ajax.html>
Client が input layer, AjaxEngine Layer に分離し, サーバに直接入力を渡さない事で非同期にでき, かつ Ajax Engine がサーバの一部の機能(検索, データ解析)を負担することでサーバ負荷をかけずに動的にする, のかな.. DHTML の動作的には目新しくないけれど面白い. ただ設計が難しそう. あとは(評価を得られる)使い道も難しそうな.
<http://jpspan.sourceforge.net/wiki/doku.php?id=javascript:xmlhttprequest>
XmlHttpRequest クラスについて.