JavaScriptで「Wikipedia API」を利用する

(1/1)
jQuery を利用すると、簡単に WebAPI を利用することができる。
今回は、「PHP で「Wikipedia API」を利用する」を JavaScript に移植する。

サンプル・プログラム

プログラムの解説:jQuery

0021: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

jQueryGoogle Developers に登録されているものを利用する。

プログラムの解説:Wikipedia API

0040: //
0041: // Wikipedia API を呼び出して表示する
0042: //
0043: function WikipediaAPI() {
0044:     //検索語
0045:     var query = document.getElementById('query').value;
0046:     //API呼び出し
0047:     $.ajax({
0048:         url: 'http://wikipedia.simpleapi.net/api',
0049:         data: {
0050:             output: 'json',
0051:             keyword: query
0052:         },
0053:         type: 'GET',
0054:         dataType: 'jsonp',          //Access-Control-Allow-Origin対策
0055:         timeout: 1000,
0056:         success: function(json) {
0057:             if (json != null && json.length > 0) {
0058:                 $('#word').html('');
0059:                 //結果表示
0060:                 for (i = 0; i < json.length; i++) {
0061:                     $('#word').append(
0062:                         '<dt>' + (i + 1) + ':<a href="' +
0063:                         json[i].url + '">' + 
0064:                         json[i].title + '</a>' +
0065:                         '&nbsp;(' + json[i].datetime +
0066:                         ' 更新)</dt>' +
0067:                         '<dd>' + json[i].body + '</dd>'
0068:                     );
0069:                 }
0070:             } else {
0071:                 $('#word').html('検索結果なし');
0072:             }
0073:         }
0074:     });
0075: }

Wikipedia API の呼び出し方法については、「PHP で「Wikipedia API」を利用する」で紹介したとおりである。

ところが、jQuery から WebAPI を呼び出そうとすると、ブラウザによっては "Access-Control-Allow-Origin" に関わるエラーが出る。
これは、ドメインが異なるサイトのデータを勝手に取得しないようにする仕組みである。サーバ側が対応していない WebAPI では XML でデータを取得することができなくなる。
回避策としては、取得形式を JSONP に変更することである。

$.ajax に渡すパラメータを変更するだけで、JSONP で取得できるようになる。
取得に成功(success)したら、それに続く関数を逐次実行する。ここでは、画面表示に使っている。

参考サイト

(この項おわり)
header