JavaScriptで「Wikipedia API」を利用する

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

サンプル・プログラム

プログラムの解説：jQuery

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

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

プログラムの解説：Wikipedia API

  40: //
  41: // Wikipedia API を呼び出して表示する
  42: //
  43: function WikipediaAPI() {
  44:     //検索語
  45:     var query = document.getElementById('query').value;
  46:     //API呼び出し
  47:     $.ajax({
  48: //      url: 'http://wikipedia.simpleapi.net/api',
  49:         url: 'https://ja.wikipedia.org/w/api.php',
  50:         data: {
  51:             output: 'json',
  52:             keyword: query
  53:         },
  54:         type: 'GET',
  55:         dataType: 'jsonp',          //Access-Control-Allow-Origin対策
  56:         timeout: 1000,
  57:         success: function(json) {
  58:             console.log(json);
  59:             if (json != null && json.length > 0) {
  60:                 $('#word').html('');
  61:                 //結果表示
  62:                 for (i = 0; i < json.length; i++) {
  63:                     $('#word').append(
  64:                         '<dt>' + (i + 1) + '：<a href="' +
  65:                         json[i].url + '">' +
  66:                         json[i].title + '</a>' +
  67:                         ' (' + json[i].datetime +
  68:                         ' 更新)</dt>' +
  69:                         '<dd>' + json[i].body + '</dd>'
  70:                     );
  71:                 }
  72:             } else {
  73:                 console.log(url);
  74:                 $('#word').html('検索結果なし');
  75:             }

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

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

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

JavaScriptで「Wikipedia API」を利用する

サンプル・プログラム

プログラムの解説：jQuery

プログラムの解説：Wikipedia API

参考サイト