別サーバからajaxでjsonデータを取得する

別サーバからjsonデータ（ランキングデータ）を取得して、サイトに表示させたいというご要望があり、一部躓いたのでメモしておきます。

jsonpを使用しても取得することができなかった（私のやり方が誤っていた可能性もあり）、またクライアントサーバに変更が加えられなかったため、phpの「file_get_contents」を利用して取得することにしましたので、その手法です。

CONTENTS

phpの準備
ajaxで取得する
まとめ

phpの準備

まず、別サーバにあるjsonファイルは下記のようになっています。

[
  {
    "name": "AAA",
    "score": 1000
  },
  {
    "name": "BBB",
    "score": 900
  },
  {
    "name": "CCC",
    "score": 800
  },
]

これを下記のようにphpの「file_get_contents」で取得し、例として getRankingJson.php という名前で保存します。

■ getRankingJson.php

<?php
  $context = stream_context_create(
    [
      'http' => [
        'ignore_errors' => true
      ]
    ]
  );
  $jsonFile = file_get_contents('https://△△△△.△△/ranking.json', false, $context);
  echo $jsonFile;
?>

ブラウザからこのファイルにアクセスして、別サーバにあるjsonファイルと同じようにjsonが表示されていることが確認できればOKです。

https://△△△△.△△/ranking.json

この部分はjsonファイルのURLに置き換えてください。

ajaxで取得する

今回はjQueryを使っているので、jQueryは読み込ませる前提で、下記のようにしました。

■ app.js

$(function () {
  let data = [];

  // 別ドメインのjsonが取得できないためphp(file_get_contents)で取得 
  let jsonRankingUrl = '/app/getRankingJson.php'; // ランキングデータ取得用URL 

  // ランキングデータ取得
  $.ajax({
    type: 'GET',
    url: jsonRankingUrl,
    dataType: 'json'
  }).then(
    function (json) {
      for (let i = 0; i < json.length; i++) {
        data.push({
          name: json[i].name,
          score: json[i].score,
        });

        let rankingNum = i + 1;

        let rankingHtml = '<li>';
        rankingConts = '<p>'+ rankingNum + '位</p><p>' + data[i].name + '</p><p>' + data[i].score + '</p>';
        rankingHtml = rankingHtml + rankingConts + '</li>';
        $('ol').append(rankingHtml);
      }
    },
    function () {
      alert('ランキングデータの取得に失敗しました。');
    }
  );
});