前回作成したヤマトの伝票情報取得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)
関連記事
[…] マッシュアップや他アプリとの連携も考慮して、WebAPIも公開しています。 RESTfulなURLで、使い方も簡単です。 仕様や制限は、下記のページを参照してください。 xml/json/yamlでのダウンロード ヤマト運輸の配送状況を確認するAPIを作ってみた jsonpの仕様 ヤマトの伝票情報取得APIをJSONP対応しました […]
[…] ヤマトの伝票情報取得APIがJSONP対応しました ※2012/2/1追記:営業所データの取得APIを追加しました […]