javascript コンソール画面でXMLHttpRequest(XHR)通信してみた

• javascriptのコンソール画面でxhr通信をしたかったので、やったついでにメモしておく
• console.logで出力できるやり方は結構載ってたが、変数に入れるやり方があまり見つからなかった
• 今回はgoogle books apiを叩いてみた。任意のisbnを入れればjsonがhogeに返ってくる

main.js

function getHttpRequest(url, c){
    // インスタンス作成
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
        // 処理が成功したらresponseTextをコールバック
        if(xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300){
            c(JSON.parse(xhr.responseText));
        }
    }
    var method = "GET";
    xhr.open(method, url);
    xhr.send();
}
// 任意のisbn
var isbn = *******;
// google booksのgetエンドポイント
var url = "https://www.googleapis.com/books/v1/volumes?q=isbn:"+isbn;
// 変数にjsonを入れたい時. console.log(res)で出力してもよし
var hoge;
getHttpRequest(url, function(res){
    hoge = res['items'][0];
})

hoge.volumeInfo.titleとかすると書籍名が取れたりする

• 実はfetchの方が良かったかもっていう。。。