WebAPIとajax

### はじめに
WebAPIとAjaxがどのように連携して動作しているか見てみよう


--------
### WebAPIとは(復習)
ネットワーク越しに、APIを提供することで、自システムはもとより、他社の作成した機能を自システムに取り込んだり、他社に自システムの機能を提供することが可能に！


>従来は、APIといえばOSがアプリケーションソフト向けに提供していた機能を指していたが、現在はWebサービスがアプリ開発者向けに公開している機能を「Web API」と呼んでいるほか、気象情報、グルメ紹介、テレビ番組表、交通データ、観光情報などのさまざまなAPIがある。APIを利用すると、よく使う機能をAPIから呼び出すだけで使えるため、ゼロからプログラミングする必要がなくなり、ソフトウェアの開発を省力化できる。

>公開されているWeb APIでは、「Facebook」「Twitter」「YouTube」「Googleマップ」などが有名で、スマートフォン向けのサービスやアプリ開発には欠かせない。
by　大塚商会　IT用語辞典

-------
### WebAPI特徴(復習)

* サーバで提供している(or されている)機能をhttpでネットワーク越しに使用する
* 決められたインターフェース、つまりパラメータやURL等で動作
* レスポンスは昔はXML、今はJSONが主流
* Webでajaxでよく利用される
* スマホアプリからの利用もあります

-------
### Ajaxの前にJavaScriptって？

誤解を恐れず簡単にまとめちゃうとこんな感じ

* HTML　Webサイトの内容を構造化する
* CSS　Webサイトのスタイル、デザインを設定
* JavaScript Webサイトに動きを与える

>JavaScript は Web サイトにインタラクティブ機能 (ゲーム、ボタンが押されたときやデータがフォームに入力されたときの反応、動的なスタイルの変更、アニメーションなど) を追加するプログラミング言語です。
開発者向けのウェブ技術 | MDN　参考になります
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics

-------
### JavaScript

昔はよく「とほほのWWW入門」のお世話になっていた
http://www.tohoho-web.com/js/onevent.htm

``` html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Sample</h1>
    <input type="button" value="OK" onclick="alert('OK!!')">
  </body>
</html>
```
-------
### Ajax
昔：Web サイトのデータをサーバにリクエストすると、ページを構成する要素がダウンロードされてコンピュータに表示
問題：どこかページの一部を書き換えたい場合でもページ全体を読みなおす必要があり時間かかる

そこで！Webから細かいデータ(XML、JSON等)を取得し、必要な時だけ表示するという技術誕生
「Asynchronous JavaScript and XML」の略
でもXMLじゃなくJSONでもAjaxと呼ばれる。

-------
### ニュースを取得して表示

``` js
var getNewsDone = function(result, status, xhr) {
	if (result.code == 200 && result.data.news) {
		var tags = '';
		var baseTag = '<dt class="date">#registered#</dt><dd class="ttl">#news_title#</dd><dd class="txt">#detail#</dd>';
		var len = result.data.news.length;
		for (var i = 0; i < len; i++) {
			row = result.data.news[i];
			tags += baseTag.replace(/#registered#/g, row.registered_disp)
					.replace(/#news_title#/g, row.title).replace(/#detail#/g,
							row.detail);
		}
		$('#dl_news').html(tags).fadeIn();
	}
};
var getNews = function() {
	$('#dl_news').hide().empty();
	var data = {
		lang : defLang,
	};
	$.get(apiConfig.newsUrl, data, getNewsDone);
};
$(function() {
	if ($('#dl_news').size()) {
		getNews();
	}
});
```

-------
### 共通js抜粋

``` js
$.extend({
	"get" : function(url, data, success, error) {
		error = (error === undefined) ? ajaxCommonFail : error;
		headers = {};
		if (idToken) {
			headers = {
				Authorization : idToken,
				user : user
			};
		}
		return $.ajax({
			"url" : url,
			"data" : data,
			"headers" : headers,
			"success" : success,
			"type" : "GET",
			"cache" : false,
			"error" : error,
			"dataType" : "json"
		});
	}
});
```

-------
``` json

{
	"code": 200,
	"status": "succcess",
	"data": {
		"news": [
			{
				"news_id": 4,
				"lang": "ja",
				"title": "グランドオープン！",
				"detail": "開始いたしました。",
				"registered": "2019-05-01T00:00:00+09:00",
				"registered_disp": "2019.05.01"
			}
		]
	}
}
```

-------
### 選択肢組立
``` js
var getModelCodesByModelId = function(model_id) {
	iniSelectEnginecode();
	if (model_id) {
		var data = {
			lang : defLang,
			model_id : model_id
		};
		$.get(apiConfig.modelCodeUrl, data, getModelCodesDone);
	}
};
var getModelCodesDone = function(result, status, xhr) {
	// console.log(result);
	var tags = '';
	if (result.code == 200) {
		tags += makeOptioinTags(result.data.modelCodes, 'id', 'title',
				param.enginecode);
		$('select.enginecode').append(tags);
	}
};
```