iPentec.com / Doc / JavaScript

REST Webサービスを呼び出す - JavaScript

JavaScriptでREST Webサービスを呼び出す手順を紹介します。

補足

SOAP/WSDLのWebサービスAPIを呼び出す方法についてはこちらの記事を参照してください。
(純粋なJavaScriptではなく、ASP.NETと組み合わせた実装例を紹介しています。)

概要

SOAPやWSDLを利用したWeb APIはライブラリが整備されているプログラム言語からの呼び出しは比較的容易ですが、JavaScriptからの呼び出しは大変です。JavaScriptからWeb APIを呼び出す場合は、REST形式のWebサービスを作成するほうが、実装が容易です。この記事では、REST WebサービスのAPIをJavaScriptから呼び出すコードを紹介します。

事前準備: Webサービスの実装

呼び出し先のWebAPIを準備します。今回の例では、WCF Webサービスを作成しREST形式のAPIを提供する実装をしています。 WebAPIの実装についてはこちらの記事を参照してください。
作成したWebサービスはサーバーに配置しています。

プログラム例

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>

  <script type="text/javascript">

    function onButtonClick() {
      var str1 = document.getElementById("text1").value;
      var str2 = document.getElementById("text2").value;
      callAdd(str1,str2);
    }

    function callAdd(value1, value2) {
      var xmlhttp = new XMLHttpRequest();

      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
            var elem = document.getElementById("output");
            elem.innerText = xmlhttp.responseText;
          } else {
            alert("status = " + xmlhttp.status);
          }
        }
      }
      var url = "https://(WebAPIの配置URL)/RestService/add/" + value1 + "/" + value2;
      xmlhttp.open("GET", url);
      xmlhttp.send();
    }
  </script>
</head>
<body>
  <h2>WCF REST APIのJavaScritp呼び出しデモ</h2>

  Input 1:<input id="text1" type="text" /><br />
  Input 2:<input id="text2" type="text" /><br />
  <button onclick="onButtonClick()">API呼び出し</button><br/>
  Output:<div id="output"></div>
</body>
</html>

解説

ボタンのクリックにより、下記の onButtonClick 関数が実行されます。テキストボックスに入力した文字列を取得し、callAdd() 関数を呼び出します。

    function onButtonClick() {
      var str1 = document.getElementById("text1").value;
      var str2 = document.getElementById("text2").value;
      callAdd(str1,str2);
    }

callAdd 関数の実装は下記のコードです。
XMLHttpRequestオブジェクトを作成し、WebAPIのURLにアクセスします。APIの引数はURL中に設定します。 APIからのレスポンスは、onreadystatechange イベントで受け取ります。
ステータスコードが200であれば、正常なレスポンスと判定し、出力エリアに、WebAPIからのレスポンス値を表示します。 XMLHttoRequestの動作の詳細についてはこちの記事も参照してください。

    function callAdd(value1, value2) {
      var xmlhttp = new XMLHttpRequest();

      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
          if (xmlhttp.status == 200) {
            var elem = document.getElementById("output");
            elem.innerText = xmlhttp.responseText;
          } else {
            alert("status = " + xmlhttp.status);
          }
        }
      }
      var url = "https://(WebAPIの配置URL)/RestService/add/" + value1 + "/" + value2;
      xmlhttp.open("GET", url);
      xmlhttp.send();
    }