JavaScriptプログラムにおけるJSON取得とコールバック

Windows8開発でJavaScriptを始められる方、Webページ制作からプログラミングに移行される方も多いと思うので今回はデータ通信の基本、JSONについてご説明します。

「XMLならやってるけど、JSONはやった事ない」という人は必見です。そもそもJSONってなあに？という人はまずは下記サイトをご覧下さい。

[参考]※ThinkIT

http://thinkit.co.jp/article/70/1

元々、JavaScriptとの親和性も高く、JSONを利用することで冗長なXMLと比べて通信時のデータ量を削減できるなどのメリットもあります。サーバサイドも一括で開発する際には更に通信速度を向上させるライブラリも多数出ているので通信データ量が増大している昨今では必須の技術です。

実装時、アプリ側のコードは以下のようになります。

今回のコードは外部APIを利用する事を想定しています。

json取得と４つのコールバック

            // test log
            console.log("test");
            // get element this p tag
            var progress_el = document.getElementById("progress");
            var response_el = document.getElementById("response");

            // http request準備
            var xhr =newXMLHttpRequest();
            xhr.open("GET","{ API URL }");
            xhr.responseType ="json";// others arraybuffer, blob, document(html or xml), text, ms-stream
            xhr.timeout =10000;

            // ４つのコールバック

            // 取得した
            xhr.onload =function(){
                if(this.status ===200){
                    // receive
                    var response =this.response;
                    console.log(""+ response);
                    response_el.textContent = response.toString();
                    progress_el.textContent ="complate!";
                }else{
                    // faild

                }
            };

            // 取得中
            xhr.onprogress =function(e){
                if(e.lengthComputable ===true){
                    progress_el.textContent = parseInt(e.loaded *100/ e.total,10)+"%";
                }else{
                    progress_el.textContent ="loading...";
                }
            };
            
            // タイムアウト
            xhr.ontimeout =function(){
                progress.textContent ="timeout";
            };

            // エラー
            xhr.onerror =function(e){
                progress.textContent ="error!";
            };

            // request send
            xhr.send();

※コードはWin8devメンバーの平川さん提供

 

実際、通信といってもコードの行数はすごく簡略化出来ます。

そして、見てみるとそんなに難しい事はしていません。

 

アプリを作る際、SNS等のデータを上手く使った方が更に幅が広がります。

まだ通信はちょっとという方は是非お試し下さい。