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";
}

実行結果

ワサワサ問題起きるし、直したいところも、調べたいこともたくさんあるけど、いちいちやってたらキリがないのでここまで。