脱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をお持ちでしたら是非、これらの機能もお試しいただければ幸いです。

製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

\  この記事をシェアする  /