はじめに
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
<!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と呼ばれる。
ニュースを取得して表示
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抜粋
$.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"
});
}
});
{
"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"
}
]
}
}
選択肢組立
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);
}
};