WebAPIとajax #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

<!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);
    }
};