寝太郎の江戸風呂。ね！

[PR]

2024/04/26 (Fri.)

静的HTML向けパラメータ取得&クエリストリング構築用ライブラリ

パラメータからクエリストリングを組立てる、また、クエリストリングからキーと値を取得する。

各種のWEBサービスの API が JSON に対応しているので、静的な HTML でも、JavaScript を用いて、動的なページが作成できます。

WEBサービスの API にリクエストする URL を組み立て、返ってきたデータをコールバック関数で処理します。リクエストする URL の組み立てにあたっては、数種類のパラメータを組み合わせて、クエリストリングを作成する必要があります。今回は、パラメータからクエリストリングを組み立てる関数を考えましょう。

また、静的HTMLファイル自身に対してもクエリストリングを付加してリクエストできます。このクエリストリングをキーと値のペアに分解すれば、これをWEBサービスの API に対するパラメータとして使用できます。クエリストリングからキーと値のペアを取得するメソッドも作りましょう。

さて、これから作成する関数は、次の２つに対応することを主な目的とし、付随的なメソッドを付け加えることにします。

(1) ブラウザのアドレスバーに表示される URL からパラメータを取り出して、ハッシュオブジェクトにする。

　　これは、現在のページの URL が
　　http://rakuten.netarrows.nobody.jp/ranking.html?genreId=1234
    ならば
　　{genreId:'1234'}
    という形のハッシュオブジェクトを取得しようというもの。

(2) ハッシュオブジェクトから WEB API にリクエストする URL を生成する。

    {developerId:'abcd',
     operation:'ItemRanking',
     version:'2010-08-05',
     callBack:'callback',
     genreId:'1234'
    }
    という形のハッシュオブジェクトから
　　http://api.rakuten.co.jp/rws/3.0/json?
　　developerId=abcd
　　&operation=ItemRanking
　　&version=2010-08-05
　　&callBack=callback
　　&genreId=1234
    という API へのリクエスト用 URL を生成するもの。

[1] URLからのパラメータの取り出し。

これは、window.location.search の文字列から先頭の"?"を消去し、"&"で区切った文字列を、さらに"="で区切ります。

getParams=function(){
    var param={}

    var a=location.search.slice(1).split('&');

    for(var i=0;i

さらに特定のパラメータの値を取り出したいなら、

getParam=function(key){
    var param=getParams();

    return return param[key];;
}

[2] ハッシュオブジェクトから WEB API にリクエストする URL を生成する。

これは、(1)と逆のことを行います。 まず、ハッシュオブジェクトからクエリストリングを生成しましょう。

buildQueryString=function(param){
       var a=[];

       for(k in param){

         a.push(k+'='+param[k]);

       }

       return a.join('&');

}

次に元となるURL にパラメータを付加します。

buildUrl=function(param,baseUrl){
    var queryString=param?'?'+buildQueryString(param);''
    return baseURL+queryString;
}

[3]URL生成関数を統合する。

上記で個別に記述した関数を wL という名前の元に統合しましょう。 処理上、wL() と wL.get() に分けます。

(1) wL()

a) wL()

　引数がない場合、 　　window.location オブジェクトを返します。 　　したがって、wL().hash　は window.location.hash と同じです。

b) wL(param,url)

引数２つ。 　　第二引数に第一引数のパラメータをクエリストリングにした文字列を返します。 　　パラメータのクエリストリング化にあたっては、wL.get()を使用します。 　　第二引数の指定がない場合には、window.location.pathname が指定されたものとみなします。

wL=function(param,path){
  if(!param){
     return window.location;
  }else{
     path=path?path:window.location.pathname;
     window.location.href=wL.get(param,path);     
  }
}

(2) wL.get()

a) wL.get()

引数なし。

　　window.location にクエリストリングがある場合、キーと値をペアとするハッシュオブジェクトを返します。

　　例えば、"?p=A&q=B"の場合、 　　　　{p:"A", q:"B"} を返します。

　　内部的には、wL.get(window.location.search) を実行し、b) wL.get(param) を利用しています。クエリストリングがある場合には、3)の「引数が "=" のある文字列の場合」によって、ハッシュオブジェクトが取り出されます。

　　window.location にクエリストリングがない場合、null を返します。

b) wL.get(param)

引数１つ。

　　1) 引数が配列の場合

　　　　各配列要素を"&"で結合した文字列を返します。 　　　　例えば、["p=A","q=B"] の場合 　　　　　　　　 "p=A&q=B" を返します。 　　　　なお、配列の要素がハッシュオブジェクトの場合、次の「ハッシュオブジェクトの場合」で文字列に変換したうえで結合します。

　　2) 引数がハッシュオブジェクトの場合

　　　　キーと値を"="で結合した文字列をさらに"&"で結合した文字列を返します。 　　　　例えば、{p:"A",q:"B"} の場合 　　　　　　　　"p=A&q=B" を返します。

　　3) 引数が "=" のある文字列の場合

まず "&" で区切り、さらに"="で区切りキーと値のペアとなるハッシュオブジェクトを返します。

　　4) 引数がクエリストリングのキーの場合

　　　　その値を返します。 　　　　例えば、クエリストリングが"?p=A&q=B"の場合、 wL.get('p')　は "A" を返します。

　　5) #始まり文字列

　　　　そのまま返します。 　　　　window.location.hash に値を入れられるようにするためです。

　　6)それ以外

　　　　null を返します。 　　　　処理を分岐出きるようにするためです。

c) wL.get(param,path)

引数２つ。 　　第二引数に wL.get(param) の結果を付加した文字列を返します。 　　wL.get(param) の結果に　"="　が含まれている場合には、"?"を第二引数の後に付け加えます。 　　例えば、wL.get({p:"A",q:"B"},"http://www.example.com/api")は、 　　"http://www.example.com/api?p=A&q=B" を返します。

wL.get=function(param,path){
  if(!param){
    if(window.location.search){
      return wL.get(window.location.search);
    }else{
      return null;
    }
  }else if(!path){
    if(typeof param=='object' && param.length){
       for(var i=0,s='';i

jQuery の getJSON を利用する場合

param={
 q:'twitter',
 callback:'callback'
};
path='http://search.twitter.com/search.json';
$.getJSON(wL.get(param,path)+'&jsoncallback=?',callback);

参考

wL.js

2011/04/18 (Mon.) Trackback() Comment(0) JavaScript