こんにちは。今日は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の機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。