JavaScript
jsonp
JSON
Ajax

ピュアなJSでAPIリクエストをするメモ(jsonとjsonp)

More than 3 years have passed since last update.

いつも忘れるので、メモ。

フロントエンドJavaScriptからAPIを叩いてレスポンスを受け取って、コールバックを呼び出すまで。

JSONのデータをリクエスト

(function(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState==4 && this.status==200) {
        // responseをhogehogeする
    }
};
xhr.responseType = 'json';
xhr.open('GET',endpoint,true);
xhr.send();
})();

毎回書くのは面倒なので、簡単でよいなら以下の様な関数を作ったりしている。

(function(){

var requestAjax = function(endpoint, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if (this.readyState==4 && this.status==200) {
            callback(this.response);
        }
    };
    xhr.responseType = 'json';
    xhr.open('GET',endpoint,true);
    xhr.send();
};
})();

requestAjax("http://example.com/endpoint1", function(response){
    // responseをhogehogeする
});
requestAjax("http://example.com/endpoint2", function(response){
    // responseをhogehogeする
});

JSONP

APIがCORSに対応していない場合はJSONPのオプションが用意されていたりします。

JSONPの場合scriptタグからリクエストします。

(InstagramのAPIを触った時のコードをそのまま入れます。)

(function(){
    var script = document.createElement('script');
    script.src = 'https://api.instagram.com/v1/users/5001435/media/recent/?access_token='+accessToken+'&callback=instaCallback';
    window.instaCallbackFavorites = function(response) {
        // reponseをhogehogeする
    };
    document.body.appendChild(script);
})();

(ちなみにアクセストークンをフロントに渡してしまうのはやや危険なので推奨しません)