top of page

JSONP ガンマン時計

JSONP では、JSONテキストを、callback 関数で取り出すことができます。
クロスドメインで、別のサイトのAPIから、Ajaxで非同期に情報を取得する練習です。

WebAPIとしては、GAS(Google Apps Script) に、ガンマン時計を仕込みました。

JSONP実験

​メモ

  • Google Apps Script (GAS) に JSONPを返却するAPIを仕込んだ。

  • jQuery の $.ajax では、jsonpを指定すると、callback 関数名のデフォルトは"callback"。明示指定不要。

  • 返却時には、"callback"関数の引数としてJSONテキストが、渡される。

    • ただし、callback関数は、名無しの function で受ける。以下のように。で、out引数が JSONテキスト

    • success: out => { }

    • out.message が、目的の JSONテキスト

  • で、JSONテキストを、非同期に textarea に、表示。今回は、成形の前後の2パターンを表示。

  • サンプル

<script>
    const endpoint = "https://script.google.com/macros/s/AKfycbxyreXaAJ4Xyn4QF7tNpUd5LFprjM8v1g8fC4PED66Swd0hhvw/exec?type=jsonp&clocksize=26";
    $.ajax({
        type: 'GET',
        url: endpoint,
        dataType: 'jsonp',
        data: {
        },
        success: out => {
//            alert(out.message);
            showJson(out.message);
            gunClockAsync(out.message);
        }
    });
</script>

bottom of page