ヤマトの伝票情報取得APIをJSONP対応しました

前回作成したヤマトの伝票情報取得APIをJSONP対応しました。


JSONP呼び出しURL

以下の形式でコールします。
(“123456789012″には伝票Noを指定します。)

http://nanoappli.com/tracking/api/123456789012/CallbackFuncName


Ajax Demo:

ヤマト伝票No(12桁) :



HTMLソース


ヤマト伝票No(12桁) :<input id="inputArea" vtype="text" />
<input id="btnInput" type="button" onClick="btnInput_Click();" value="入力" />
<div id="result"></div>




JavaScriptソース


//-----------------------------------------------------
// 入力ボタンがクリックされたときのハンドラ
//-----------------------------------------------------
function btnInput_Click() {
    var inputStr      = document.getElementById( 'inputArea' ).value;
    getData( inputStr );
 
    return false;
};
 
//-----------------------------------------------------
// jsonpでデータを取得
//-----------------------------------------------------
function getData( inputStr ) {
    var s = document.createElement('script');
    s.charset = 'UTF-8';
    s.src     = 'http://nanoappli.com/tracking/api/' + inputStr + '/displayData';
    document.body.appendChild(s);
};
 
//-----------------------------------------------------
// 取得データを画面に表示
//-----------------------------------------------------
function displayData( json ) {
    nodeParent = document.getElementById( 'result' );
    nodeParent.appendChild( document.createTextNode( "応答コード: " + json.result   ) );
    nodeParent.appendChild( document.createElement( "br" ) );
 
    nodeParent.appendChild( document.createTextNode( "状態: " + json.status   ) );
    nodeParent.appendChild( document.createElement( "br" ) );
 
    nodeParent.appendChild( document.createTextNode( "伝票No: " + json.slipNo   ) );
    nodeParent.appendChild( document.createElement( "br" ) );
 
    if ( json.result == 0 ) {
        nodeParent.appendChild( document.createTextNode( "商品種別: " + json.itemType ) );
        nodeParent.appendChild( document.createElement( "br" ) );
 
        var olNode = document.createElement('ol');
        for ( var loopItem = 0; loopItem < json.statusList.length; loopItem++ ) {
            var detail = json.statusList[ loopItem ];
            var detailText = detail.status + " at " + detail.date + " " + detail.time;
            detailText += " [" + detail.placeCode + ":" + detail.placeName + "]" ;
 
            var liNode = document.createElement( "li" );
            liNode.appendChild( document.createTextNode( detailText ));
            olNode.appendChild( liNode );
        }
        nodeParent.appendChild( olNode );
    }
};






JSONP対応の調査メモ(for JSONP developer)

API作成にあたって調査した際のメモです。
JavaScript初心者で、かつJSONPの仕組みを新たに作りたい人向けのドキュメントです。
(本APIの利用者向けでは有りません)
dankogai作のAWS APIからJSONの仕組みを理解する(1/2)
dankogai作のAWS APIからJSONの仕組みを理解する(2/2)

関連記事

コメントを残す

メールアドレスが公開されることはありません。