JSONScriptRequest.js：XMLHttpRequestの代わりにscript要素を使って通信するライブラリ[Ajax][JSON][API]

JavaScript

JSONPコールの際、グローバルな関数を用意してその名前を渡さなきゃいけないのはいけてないな〜と思ってXMLHttpRequestを真似して作ってみた。

ちょっと長いので、ソースは貼らずにダウンロードリンクを置いておきます。つJSONScriptRequest-0.01.tar.gz
JSONScriptRequest-0.02[Ajax][JSON][API] - ヒルズで働く@robarioの技ログJSANに上げました。

SYNOPSISはこんな感じ。

var req = new JSONScriptRequest();
req.open('GET', 'http://www.example.com/jsonapi');
req.onreadystatechange = function() {
    if (req.readyState == 4) {
        console.info(req.responseJSON);
    }
};
req.send(null);

見ての通り、インターフェイスはXMLHttpRequestです。

この例で発行されるリクエストURIは
http://www.example.com/jsonapi?callback=JSONScriptRequest._dispatchers[0]
となっていて、JSONPによって呼ばれたJSONScriptRequest._dispatchers[0]からreq.onreadystatechangeへディスパッチされます。

コールバックパラメータのcallback=の部分は、コンストラクタの引数によって変更でき、

var req = new JSONScriptRequest({callback_param: 'cb'});

とすると
http://www.example.com/jsonapi?cb=JSONScriptRequest._dispatchers[0]
となります。



試しにhttp://nais.to/~yto/clog/misc/mecapi.htmlをJSONScriptRequestで書き換えると以下のようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/ecmascript">
    <script type="text/ecmascript" src="lib/JSONScriptRequest.js"></script>
    <script type="text/ecmascript">
// <![CDATA[
function onSubmit() {
    var sentence = document.getElementById('sentence').value;
    var uri = 'http://asamasi.net/api/mecab.cgi?format=json'
    uri += '&response=surface,feature';
    uri += '&sentence=' + encodeURIComponent(sentence);

    var req = new JSONScriptRequest();
    req.open('GET', uri);
    req.onreadystatechange = function() {
        if (req.readyState == 4) {
            var json = req.responseJSON;

            var text = '';
            for (var i = 0; i < json.length; i++) {
                text += json[i].surface + ' (' + json[i].feature + ')\r\n';
            }
            document.getElementById('console').innerHTML = text;
        }
    };
    req.send(null);
}
// ]]>
    </script>
    <title>MECAPIのJSON出力で形態素解析</title>
  </head>
  <body>

    <form action="" method="get" enctype="application/x-www-form-urlencoded">
      <p>
        <input type="text" id="sentence" size="64">
        <input type="button" value="解析" onclick="onSubmit()">
      </p>
      <p>
        <textarea rows="10" cols="60" id="console">
        </textarea>
      </p>
    </form>

  </body>
</html>

で、実行結果はこうなります。

+----------------------------+　＿＿
|MECAPIのJSON出力で形態素解析| [解析]
+----------------------------+　￣￣
+-----------------------------------------------------------+
MECAPI (名詞,固有名詞,組織,*,*,*,*)
の (助詞,連体化,*,*,*,*,の,ノ,ノ)
JSON (名詞,固有名詞,組織,*,*,*,*)
出力 (名詞,サ変接続,*,*,*,*,出力,シュツリョク,シュツリョク)
で (助詞,格助詞,一般,*,*,*,で,デ,デ)
形態素 (名詞,一般,*,*,*,*,形態素,ケイタイソ,ケイタイソ)
解析 (名詞,サ変接続,*,*,*,*,解析,カイセキ,カイセキ)
+-----------------------------------------------------------+