Ajaxでブラウザ上にJSONファイル内容を表示する

業務でAjax通信に初めて触れる機会がありました。

今回はWeb開発初心者ひさぽん（htmlもjavascriptもよくわからない）がいきなり挫折しそうになったところを、

同じような初心者のために忘備録として残します。

まず、AjaxとかJSONって何？？？ってところから始まると思いますが、

それはググってもらうとして、内容を大雑把に理解したところで、

実際に試してみる段階となります。

■やりたいこと

ブラウザ上にJSONファイルの中身を表示する

■作成するもの

・htmlファイル

・JSONファイル

以下、参考にしたサイト

https://www.sria.co.jp/blog/2014/10/lets-use-ajax-part-1-try-it-with-ajax-and-json/

↑を参考に実際にやってみましたが、タイトルバーにタイトルしか表示されませんでした。

なんで！？

つまづきポイント①

Ajaxを使うためにはjQueryが必要です。

「jQueryをHTMLページに組み込む」必要があります。以下を追加します。

（基本中の基本とかどこかのサイトに書いてありましたが、そんなの知らんわ！）

つまづきポイント②

＞url: 'json/data.json',

これどこにあるの？

→ファイルパスフルパス指定では動きませんでした。htmlと同じところにあれば動きます。

つまづきポイント③

文字化け ☆

日本語（SJIS）の場合は、以下を追加します。

    beforeSend: function(xhr){

    xhr.overrideMimeType('application/json;charset=Shift_JIS');

},

■結果

やっと表示されました。

作成したhtmlファイル↓

    <html>

    <head>

        <script src="http://autoproject.sakura.ne.jp/imc_show/js/jquery.js"></script>

    </head>

        <body>

            <script type="text/javascript">

                $.ajax({

                    beforeSend:
    function(xhr){

                    xhr.overrideMimeType('application/json;charset=Shift_JIS');

},

                    type: 'GET',

                    url: 'test.json',

                    dataType: 'json',

                    success:
    function(json){

                        document.write(json[0].id + " " + json[0].name);

}

});

            </script>

        </body>

    </html>

作成したJSONファイル↓

[
{"id":"1","name":"エクセレンス1"},
{"id":"2","name":"エクセレンス2"},
{"id":"3","name":"エクセレンス3"},
{"id":"4","name":"エクセレンス4"},
{"id":"5","name":"エクセレンス5"},
{"id":"6","name":"エクセレンス6"},
{"id":"7","name":"エクセレンス7"},
{"id":"8","name":"エクセレンス8"}
]

たったこれだけの作業なのに、かなりいろいろググりました。

（本当はforeachしてファイル内容全部表示しようと思ったけどそれすらもやめたレベル）

今回はローカルにJSONファイルがありますが、実際の業務ではどうなるんです。。？

そのあたりの知識が０なので、Ajax通信について、先輩方ぜひ教えてください。