目次

オブジェクトなJavaScriptの基礎講座

ゲット引数オブジェクト(ページ間データの受け渡し)

◆ はじめに

前回は、ウィンドウ間データの受け渡しをご説明致しましたが、今回は、ページ間データの受け渡しをご説明致します。

普通、ページ間データの受け渡しは、CGIのpostやgetでサーバー側で処理をしますが、実は、JavaScriptを使えば、クライアント側だけでも可能です。

また、クライアント側だけで可能な方法は2通りあり、クッキーを使用する方法とsearchメソッドを使用する方法があります。今回は、searchメソッドを使用する方法をご説明致します。

尚、クッキーを使用する方法は「クッキーオブジェクト」を参照してください。

注意

尚、本プログラムのような、外部から引数で値を受け取るプログラムは、「与えられた引数が信頼できる値であると、頭から信用しないこと」が、肝要です。改造時は、XSS(Cross Site Scripting)脆弱にならないよう気をつけてください。

◆ ページ間データの受け渡しの方法

searchメソッドを使ったページ間データの受け渡しは、URLの引数(?以降)を求めることにより実現することが出来ます。

たとえば、location.search でURLの引数の ?modefg=9&xxx=77&yyy=888&zzz=9999 という文字列を取得することができます。

しかし、取得した文字列をプログラム内で使用する時に、NAME(modefg,xxx,...)と値(9,77,...)に分割したり、いろいろと編集が必要です。そこで、そこを、以下の『ゲット引数オブジェクト』が担当するわけです。

まずは、ソースをご覧ください。

◆ ゲット引数オブジェクト

function getHikisuu(){
     getHikisuu.data = new Array();
     getHikisuu.string = location.search.substring(1);//?をサプレス
     getHikisuu.string = getHikisuu.string.split('&');
     for(var i = 0; i != getHikisuu.string.length; i++) {
         getHikisuu.data[ck_shikibetushi(getHikisuu.string[i].split('=')[0])] 
                               =  Escape(unescape(getHikisuu.string[i].split('=')[1]));
     }

     function ck_shikibetushi(shiki){ //識別子(プロパティ)の命名チェック
         shiki_TOP = shiki.substring(0,1);
         if(shiki_TOP.match(/[a-zA-Z_$]/g) == null){
            alert(shiki+"の引数が不正です。(一文字目は、ASCII、_、$、のいずれかです。)");
            return null;
         }
         else if(shiki.match(/[^a-zA-Z0-9_$]/g) != null){
            alert(shiki+"の引数が不正です。(命名文字は、ASCII、数字、_、$、のいずれかです。)");
            return null;
         } 
         return shiki;
     }

     function Escape(str){ //文字参照へ変換 
          str = str.replace( /\&/g, '&' );
          str = str.replace( /</g, '&lt;' ); 
          str = str.replace( />/g, '&gt;' ); 
          str = str.replace( /\"/g, '&quot;' );
          str = str.replace( /\'/g, '&#39;' );
          return str;
    }
} new getHikisuu();

説明

クリックする側のURLの引数は、以下の形式限定です。

?NAME1=値1&NAME2=値2&NAME3=値3...&NAMEn=値n

『ゲット引数オブジェクト』側で、引数をlocation.searchで求め、各々NAMEをgetHikisuu.data配下のプロパティにして、そこに各々の値を代入しています。

まず、「&」で分割してstring配列を作り、string配列数分、今度は「=」で分割して、NAMEはプロパティにし、値はそのプロパティに代入します。

要は、NAMEを連想配列のインデックスにして、そこが示すところへ値を代入しています。(連想配列のインデックスはプロパティと等価)

尚、location.search.substring(1);は、引数の1カラムめの「?」が邪魔なので削っています。 unescape関数は、URLデコードをしています。

注意事項

NAMEnの実際の名前(プロパティ)は、一文字目がASCII、_、$のいずれかで、一文字目以外が、ASCII、_、$、数字のいずれかとしてください。

値nは、任意とします。

使用方法

たとえば、A.htmに以下のリンクがあったとします。

<a href="t207081.htm?modefg=9&xxx=77&yyy=888&zzz=9999">aaaaaa</a>

そして、以下のt207081.htmで『ゲット引数オブジェクト』を利用することにより、getHikisuu.data配下にNAMEnプロパティが作成され、そのプロパティで各々の値nを参照することができます。

<script type="text/javascript">
function getHikisuu(){
     getHikisuu.data = new Array();
     getHikisuu.string = location.search.substring(1);//?をサプレス
     getHikisuu.string = getHikisuu.string.split('&');
     for(var i = 0; i != getHikisuu.string.length; i++) {
         getHikisuu.data[ck_shikibetushi(getHikisuu.string[i].split('=')[0])] 
                               =  Escape(unescape(getHikisuu.string[i].split('=')[1]));
     }

     function ck_shikibetushi(shiki){ //識別子(プロパティ)の命名チェック
         shiki_TOP = shiki.substring(0,1);
         if(shiki_TOP.match(/[a-zA-Z_$]/g) == null){
            alert(shiki+"の引数が不正です。(一文字目は、ASCII、_、$、のいずれかです。)");
            return null;
         }
         else if(shiki.match(/[^a-zA-Z0-9_$]/g) != null){
            alert(shiki+"の引数が不正です。(命名文字は、ASCII、数字、_、$、のいずれかです。)");
            return null;
         } 
         return shiki;
     }

     function Escape(str){ //文字参照へ変換 
          str = str.replace( /\&/g, '&amp;' );
          str = str.replace( /</g, '&lt;' ); 
          str = str.replace( />/g, '&gt;' ); 
          str = str.replace( /\"/g, '&quot;' );
          str = str.replace( /\'/g, '&#39;' );
          return str;
    }
} new getHikisuu();
document.write("<p>");
document.write("modefgの値は、" + getHikisuu.data.modefg +"<br>");
document.write("xxxの値は、" + getHikisuu.data.xxx +"<br>");
document.write("yyyの値は、" + getHikisuu.data.yyy +"<br>");
document.write("zzzの値は、" + getHikisuu.data.zzz +"<br>");
document.write("</p>");
</script>

<p>もう一度<br>
<a href="t207081.htm?mo_$defg=9&xxx=1%3C1&yyy=%41%42222&zzz=3333">t207082.htm?modefg=9&xxx=11&yyy=222&zzz=3333</a></p>

サンプル

以下をクリックしてください。

t207081.htm?modefg=9&xxx=77&yyy=888&zzz=9999

目次