Twitterのシェア数をAjaxを利用して非同期で取得

Question

jQueryでは次のコードでTwitterのシェア数を取得出来ますが、これをVanillaに置き換えるとどの様なコードになるのでしょうか…？

// Twitterのシェア数を取得
function get_social_count_twitter( url, selecter ) {
    jQuery.ajax({
        url:'//urls.api.twitter.com/1/urls/count.json',
        dataType:'jsonp',
        data:{
            url:url
        },
        success:function( res ){
            jQuery( selecter ).text( res.count || 0 );
        },
        error:function(){
            jQuery( selecter ).text( '0' );
        }
    });
}

追記
回答を頂く前に自己解決してしまったので、そのコードも一応記載しておきます。

function insert_script( url ) {
   // script 要素を生成
   var script = document.createElement( 'script' );
   // スクリプトのソースを指定
   script.src = url;
   // 非同期読み込みを有効にする
   script.async = true;
   // body タグにノードを追加
   document.body.appendChild( script );
}

// Twitterのシェア数を取得
function get_social_count_twitter( url, selector ) {
    // url をエンコード
    var url = encodeURIComponent( url );
    // コールバックを生成(キャッシュ対策としてUTCに変換した現在時刻を付加)
    var callback = 'jsonp_twitter_' + ( new Date ).getTime();
    // script 要素に指定するURL
    url = '//urls.api.twitter.com/1/urls/count.json?url=' + url + '&callback=' + callback;
    // script 要素を追加
    insert_script( url );
    // シェア数を表示する要素
    var selector = document.querySelector( selector );

    // 返り値(JSONP)を利用した処理を実行
    window[callback] = function( res ) {
        // シェア数を表示するためのテキストノードを生成
        var count = document.createTextNode( res.count );
        // selector にテキストノードを追加
        selector.appendChild( count );
    };
}

Answer 1

JSONPということで、<script>要素を自動生成して動かすことになります。

function get_social_count_twitter( url, element) {
  //一意なコールバックの生成
  var callback_name = 'callback_' + (new Date).getTime();
  window[callback_name] = function(res){
    element.innerHTML = res.count || '0';
  }
  //これを呼び出すJSONPの生成
  var script = document.createElement('script');
  script.src =
    '//urls.api.twitter.com/1/urls/count.json?callback=' + 
    callback_name + '&url=' + encodeURIComponent(url);
  document.body.appendChild(script);
  //読み込んだscript経由でコールバックを実行
}

なお、もとのjQueryでもこのプレーンJS版でも、（jQueryでタイムアウトを入れた場合を除いて）エラー時の処理は実行されません。

Comments

[flat]

回答して下さりありがとうございます。
実は自己解決してしまったのですが、自己解決した方法と提示して頂いたコードがほぼ同じ内容だったのでほっとしました。