「細かいことはいいから、JSのAjaxってどうやって書いて、どんな挙動する??」っていうのを知りたい人向けです。

こんなのができます

やることはシンプルです。

以下のソースコードを、任意のファイル名＋拡張子htmlで作成します。
作成ファイルをブラウザで開いてください。
以上で、JSのAjaxが使えるようになる、はずです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS overflow</title>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script>

      $(function () {
          $('#ajax-button').click(
              function () {

                  $.ajax({
                      url: 'http://www.ekidata.jp/api/p/20.json',
                      type: 'GET',
                      dataType: 'script',
                      timeout: 1000,
                      success: function (data, dataType) {
                          for (var i = 0; i < 10; i++) {
                              var text = xml.data["line"][i]["line_name"];
                              document.write(i + 1, '番目の中身は、', text, 'でした</br>');
                          }
                      },
                      error: function (XMLHttpRequest, textStatus, errorThrown) {
                          alert("ng");
                          console.log("ng", XMLHttpRequest, textStatus, errorThrown);
                      }
                  });

              });
      });

  </script>
</head>
<body>
<input type="button" id="ajax-button" value="push button"/> <br/>
<div id="text"></div>
</body>
</html>

簡単に、ソースコードの説明

ボタンをトリガーにJavascriptの処理が開始されます。
2. その中でajaxでの処理も開始されます。
3. Ajaxでは外部APIからデータを取得します。
4. 取得したレスポンスから１つずつ順に取り出してブラウザに表示する、を１０個繰り返します。
そして終わりです。

今回使ったAPI
駅データ.jp が準備しているものを使わせていただきました。都道府県コードは固定値で20をセットしています。
[余談] POSTの中身を変えたり、ループする回数を変えても良さそう。

助けてくれた資料達...thanks!!

はじめてのAjax(jQuery) 2018年版... "Ajaxとは??" の説明がありがたかった。

Ajaxとは「Asynchronous JavaScript + XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。
　Ajaxを使用することで画面遷移をせずにHTMLを更新することが可能なので、ユーザビリティの向上やサーバ負荷の軽減に繋がります。AngularJSなどで作成したシングルページアプリケーションはこの技術を中心に構成されています。

JavascriptのAjaxについての基本まとめ...実装するに当たっての一通りの流れがわかる
実装に当たっては以下の２つを参考にしました。
- Ajaxで外部APIに通信する方法がうまくいかない
- はじめてAjaxを実装する人へ、効率的な学習方法について書きました

読んでいただいてありがとうございます。
ご不明点、または間違いあればコメントいただけると幸いです。