JavaScript
api
開発環境
Ajax

5分以内に開発環境でJavascriptのAjaxを動かしてみたい人へ


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


こんなのができます :point_down_tone3:

js-ajax-sample.gif


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


  1. 以下のソースコードを、任意のファイル名+拡張子htmlで作成します。

  2. 作成ファイルをブラウザで開いてください。

  3. 以上で、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>


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


  1. ボタンをトリガーにJavascriptの処理が開始されます。


    1. その中でajaxでの処理も開始されます。

    2. Ajaxでは外部APIからデータを取得します。

    3. 取得したレスポンスから1つずつ順に取り出してブラウザに表示する、を10個繰り返します。



  2. そして終わりです。

今回使ったAPI

駅データ.jp が準備しているものを使わせていただきました。都道府県コードは固定値で20をセットしています。

[余談] POSTの中身を変えたり、ループする回数を変えても良さそう。


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


Ajaxとは「Asynchronous JavaScript + XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。

 Ajaxを使用することで画面遷移をせずにHTMLを更新することが可能なので、ユーザビリティの向上やサーバ負荷の軽減に繋がります。AngularJSなどで作成したシングルページアプリケーションはこの技術を中心に構成されています。



読んでいただいてありがとうございます。

ご不明点、または間違いあればコメントいただけると幸いです。