Ajax
今からでも遅くない Ajax基本のキ - 第2回 基本的なAjaxアプリケーションを作成してみよう(前編):ITpro を見ながら遊んでみる。
HTML+JavaScript
関数分けて書こうと思ったんですが、あまりにも“ハマり”過ぎて、ほぼ丸写しになりました。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="shortcut icon" href="favicon.ico" /> <title>base.html</title> <script type="text/javascript"> //<![CDATA[ /** * 検索ボタンが押されたら起動します */ function requestData(){ // XMLHttpRequestオブジェクトを生成します try { // Win IE6以上の場合 xmlReq = new ActiveXObject( "Msxml2.XMLHTTP" ); } catch (e){ // Win IE以外のXMLHttpRequestオブジェクト実装ブラウザ用 xmlReq = new XMLHttpRequest(); } // onreadystatechangeプロパティにイベントハンドラを設定します if( xmlReq ){ xmlReq.onreadystatechange = function() { // readystateプロパティが完了の場合 if( xmlReq.readyState == 4 ){ // statusプロパティが成功の場合 if( xmlReq.status == 200 ){ // テキスト形式で受信したデータを表示します document.getElementById( "content" ).innerHTML = xmlReq.responseText; // stateプロパティが成功以外の場合 } else{ // ステータスコードを表示します document.getElementById( "content" ).innerHTML = "status = " + xmlReq.state; } // readystateプロパティが完了以外の場合 }else { // 通信中を設定します document.getElementById( "content" ).innerHTML = "running....."; } } } // open( method, url, sync )メソッドを設定します xmlReq.open( "GET", "/cgi-bin/search.pl?q=" + encodeURI(document.form.q.value), true ); // send( body )メソッドを設定します xmlReq.send( null ); } //]]> </script> </head> <body> <form id="form" name="form"> <input type="text" name="q" size="55" value="" /> <input type="button" name="btn" value="検索" onclick="requestData()" /> <pre id="content"></pre> </form> </body> </html>
サーバサイドプログラム
iTunesのデータにXPathを適用して該当データを取得するプログラムを流用することにしました。フォームの入力値がチェックされている前提です。暇があったらリファクタリングしてみよう。
#!/usr/bin/perl use strict; use warnings; use Encode; use XML::XPath; use XML::XPath::XMLParser; # フォームに入力された値を読込みます my $data = $ENV{'QUERY_STRING'}; # ハッシュ(keyとvalue)に分けます (my $key, my $value) = split(/=/, $data); # ファイルとXPathクエリを解析するオブジェクトを作成します my $xpath = XML::XPath->new( filename => "data.xml" ); # フォームに入力された値のパスを適用して、一致するノードリストを取得する my $nodeset = $xpath->find( "/plist/dict/dict[contains(./dict/strings, $value)]" ); # リスト内の各ノードを出力する print "Content-type: text/plain\n\n"; foreach my $node ( $nodeset->get_nodelist ){ print encode( 'utf-8',XML::XPath::XMLParser::as_string( $node ) ) . "\n"; }