<form method=”POST”>で送信するポストデータが、まとまった情報を送信するのに適しているのに対して、ちょっとしたキー情報を受け渡しするのに向いているのがクエリ情報である。
クエリ情報とは、リンクなどのURLの末尾「?~」以降に付加された簡易なデータのことで、「キー名=値」で記述する。
このクエリ情報を、Location.serchプロパティを利用することで取得することができる。
①次のソースプログラムはLocation.serchを使ってクエリ情報を連想配列に取り出す例である。
function get_query(){ // 解析済みのクエリ情報を格納するためのを用意 var result = {}; // クエリ情報の2文字目以降(?を除く部分)を抽出 var str = location.search.substring(1); // &で分割し、キー名=値という文字列を順に取得 var params = str.split('&'); for(var i=0; i<params.length; i++){ // キー名=値を=で分割し、キーと値を取得 var kv = params[i].split('='); // 値はエンコードされている可能性があるので、あらかじめデコード result[kv[0]] = decodeURIComponent(kv[1]); } // できあがった連想配列を戻り値として返す return result; }
②別ウィンドウを生成するurlに次のようなクエリ情報を設定する。
var surl = 'http://sample.sakuraweb.com/java6/query2.html'; var title = encodeURI('こんにちは'); var name = encodeURI('柴原'); var url = surl + '?title=' + title + '&name=' + name; window.open(url,'サンプル','width=600,height=600');
③開かれたウィンドウでは上記で示したしたLocation.serchを使ってクエリ情報(titleとnameキーの値)を取り出して表示する。
addListener(window,'load',function(){ var q = get_query(); var msg = q.title + ' ' + q.name + 'さん'; document.getElementById('result').textContent = msg; });
サンプル
次の「ウィンドウを開く」をクリックすると、別ウィンドウに伝えられた②のクエリ情報を③で表示する。