JavaScriptで10の練習問題 #5

キーワードを入れてYahoo!の検索結果を出力

究極に楽をするならiframeのsrcに検索クエリ付きのURLを渡す。
でも、それではあまり勉強にならないので、今回はJSONPを使ってみることにする。
Yahoo Developer Network でAPIキーを取得して開始。

function yahooSearch(apiKey) {
    this.apiKey = apiKey;
}
yahooSearch.prototype = {
    init: function () {
        var self = this;
        self.form   = document.MyForm;
        self.input  = self.form.text;
        self.submit = self.form.submit;
        self.view   = document.getElementById('view');
        self.form.onsubmit = function () {
            self.jsonp();
            return false;
        };
    },
    param: function () {
        return [
            'http://api.search.yahoo.com/WebSearchService/V1/webSearch',
            '?appid='+ encodeURIComponent(this.apiKey),
            '&results=10',
            '&format=html',
            '&language=ja',
            '&output=json',
            '&callback=callbackFunc',
            '&query='+ encodeURIComponent(this.input.value)
        ].join('');
    },
    jsonp: function () {
        // submitを無効にする
        this.submit.disabled = true;
        // <script type="text/javascript" src="Request URL"></script>をねじ込む
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', this.param());
        document.body.appendChild(script);
    },
    render: function (r) {
        // 例外処理とか適当
        if (r.Error) {
            this.view.innerHTML = 'Error: 検索結果がありません！';
            this.submit.disabled = false;
            return false;
        }
        // 表示
        var items = r.ResultSet.Result;
        var array = [];
        for (var i = 0, len = items.length; i < len; i++) {
            array[i] = '<a href="'+ items[i].Url +'">'+ items[i].Title +'</a>';
        }
        this.view.innerHTML = array.join('<br>');
        // submitを有効にする
        this.submit.disabled = false;
    }
}

var study_05 = new yahooSearch('API Key');

window.onload = function () {
    (function () {
        study_05.init();
    })();
}

// この関数で受け取る
function callbackFunc(r) {
    (function () {
        study_05.render(r);
    })();
}

JSONPって名前だけしか知らなかったけど、こう言うことだったんですね。
面白い。

今回使用したHTML

<form name="MyForm">
  <input type="text" name="text" value="">
  <input type="submit" name="submit" value="検索">
</form>
<div id="view"></div>