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