「細かいことはいいから、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の処理が開始されます。
- その中でajaxでの処理も開始されます。
- Ajaxでは外部APIからデータを取得します。
- 取得したレスポンスから１つずつ順に取り出してブラウザに表示する、を１０個繰り返します。
- そして終わりです。
今回使ったAPI
駅データ.jp が準備しているものを使わせていただきました。都道府県コードは固定値で20をセットしています。
[余談] POSTの中身を変えたり、ループする回数を変えても良さそう。
助けてくれた資料達...thanks!!
- はじめてのAjax(jQuery) 2018年版... "Ajaxとは??" の説明がありがたかった。
Ajaxとは「Asynchronous JavaScript + XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。
Ajaxを使用することで画面遷移をせずにHTMLを更新することが可能なので、ユーザビリティの向上やサーバ負荷の軽減に繋がります。AngularJSなどで作成したシングルページアプリケーションはこの技術を中心に構成されています。
- JavascriptのAjaxについての基本まとめ...実装するに当たっての一通りの流れがわかる
- 実装に当たっては以下の２つを参考にしました。
読んでいただいてありがとうございます。
ご不明点、または間違いあればコメントいただけると幸いです。