GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

脱jQuery派のあなたに!Wijmoで実現するHTTP通信

こんにちは。今日はWijmoのHTTP通信機能をご紹介します。

フロントエンド開発において、皆さんはどのようにHTTP通信を実現されているでしょうか。例えば郵便番号検索のWeb APIを呼び出す場合、JavaScriptの標準機能のみを使用して実装を行なうと、コードは以下のようになると思います。

JavaScript標準APIによるHTTP通信の実装例

//------------------------------------------
// HTTP通信で郵便番号検索Web APIを呼び出すサンプル
//------------------------------------------

// リクエストを初期化
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://postcode-jp.appspot.com/api/postcode' + '?postcode=' + document.getElementById('postcode').value);
// 状態が変更されたときの処理
xhr.onreadystatechange = function() {
  // 処理が完了した場合
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {
      // 受信成功した場合
      var response = JSON.parse(xhr.responseText);
      document.getElementById('address').value = response.data[0].allAddress;
    } else {
      // 受信失敗した場合
      alert('正しい郵便番号を入力してください。');
    }
  }
};
// リクエストを送信
xhr.send();

気持ち的にはちょっと通信したいだけなのですが、意外と複雑なコードを記述しなければなりません。このような問題に対し、jQueryを利用してHTTP通信を実現する方法が良く知られているかと思います。

以下は、先ほどのコードと同じ動作をjQueryで実装した場合の例です。

jQueryによるHTTP通信の実装例

//------------------------------------------
// HTTP通信で郵便番号検索Web APIを呼び出すサンプル
//------------------------------------------
// リクエストを送信
$.ajax('https://postcode-jp.appspot.com/api/postcode', {
  // クエリデータ
  data: {
    postcode: document.getElementById('postcode').value
  },
})
.done(function(data) {
  // 受信成功した場合
  document.getElementById('address').value = data.data[0].allAddress;
})
.fail(function() {
  // 受信失敗した場合
  alert('正しい郵便番号を入力してください。');
});

随分とスッキリした実装なりました。JavaScriptの標準API利用と比べて、jQueryによるHTTP通信(ajaxメソッドの利用)には、次のような利点があります。

  • HTTPリクエストのクエリ(http://xxx?value1=1&value2=2)をデータとして指定できる
  • 受信成功時/失敗時の処理の定義方法が直感的で分かりやすい
  • 少ないコードで実装できる

すばらしいメリットの数々ですね。しかし、お客様のご要望やチームの開発方針によってjQueryが利用できない場合、一体どうしたら良いでしょうか。

そんなときWijmoをお持ちであれば、以下のようにしてHTTP通信を実現することが可能です。

WijmoによるHTTP通信の実装例

//------------------------------------------
// HTTP通信で郵便番号検索Web APIを呼び出すサンプル
//------------------------------------------
// リクエストを送信
wijmo.httpRequest('https://postcode-jp.appspot.com/api/postcode', {
  // クエリデータ
  data: {
    postcode: document.getElementById('postcode').value
  },
  success: function(xhr) {
    // 受信成功した場合
    var response = JSON.parse(xhr.responseText);
    document.getElementById('address').value = JSON.parse(xhr.responseText).data[0].allAddress;
  },
  error: function() {
    // 受信失敗した場合
    alert('正しい郵便番号を入力してください。');
  }
});

jQueryを利用した場合とかなり近い感覚、コード量で実装ができました。なお、今回ご紹介した上記3つの方法によるはサンプル動作はこちらで確認可能です。

FlexGridやFinantialChartなど、その強力な収録コントロールが魅力的なWijmoですが、今回ご紹介したHTTP通信機能をはじめとして、クリップボード操作機能やグローバリゼーション機能といった「縁の下の力持ち」的機能もたいへん充実しています。Wijmoをお持ちでしたら是非、これらの機能もお試しいただければ幸いです。