2012-12-27 2nd

README

http://geoapi.heartrails.com/api.html を使うサンプル。

jsdoit.css

body { background-color: #DDDDDD; font: 30px sans-serif; }

jsdoit.html

<input type="button" onclick="validRequest()" value="1940021を検索">
<input type="button" onclick="invalidRequest()" value="1234567を検索">
<input type="button" onclick="errorRequest()" value="7910322を検索">

<p id="result"></p>
<div id="script"></div>

jsdoit.js

function validRequest(){
    sendRequest("1940021");
}

function invalidRequest(){
    sendRequest("1234567");
}

function errorRequest(){
    sendRequest("7910322");
}

function sendRequest(postal){
    var url = "http://geoapi.heartrails.com/api/json?method=getStations&postal=" + postal + "&jsonp=callback";
    var scr = document.createElement("script");
    scr.setAttribute("type", "text/javascript");
    scr.setAttribute("src", url);

    var div = document.getElementById("script");
    div.appendChild(scr);
    
     var result =  document.getElementById("result");
    result.innerHTML = "";
}

function callback(json){
    if(isErrorResponse(json)){
        error(json);
    }else{
        success(json);
    }
}

function error(json){
    var reason = json.response.error;
    window.alert(reason);
}

function success(json){
    var name = json.response.station[0].name || "n/a";
    
    var result =  document.getElementById("result");
    result.innerHTML = name;
}

function isErrorResponse(json){
    return json != null && json.response != null && json.response.error != null;
}