Ajax, JavaScript関連の参考ページまとめ

参考ページまとめ
大変勉強になります。

img src="" で無駄リクエストが飛ぶ問題
https://lealog.hateblo.jp/entry/2014/03/27/224121

非同期処理中の Now Loading を jQuery で表示させる方法 ※ロード中のくるくる表示
https://webllica.com/jquery-now-loading/

くるくる画像作成 ※これは感動しました。
http://loadergenerator.com

XMLHttpRequest
http://webos-goodies.jp/archives/50548720.html

バイナリデータの表示
https://qiita.com/Yarimizu14/items/f56123c738f12ad1844a

jQueryのajaxだとバイナリ関係がうまくいかなかった。
XMLHttpRequestでformデータを作成しblobで取り出して表示が正解ぽい。

今後もやりそうなので、メモ

<script type="text/javascript">
    $("#process").click(function(){
        var form = $('#my_form').get()[0]
        var formData = new FormData( form );

        var request = new XMLHttpRequest();
        request.responseType = 'blob';
        request.onreadystatechange = function()
        {
          if( request.readyState == 4 && request.status == 200 )
          {
              var image = document.getElementById("image");
              var url = window.URL || window.webkitURL;
              image.src = url.createObjectURL(request.response);
            }
          }
        }
        request.open("POST", "sample/"); //POST先
        request.send(formData);
    });
    });
</script>

  <form id="my_form" method="post" action="sample/" enctype="multipart/form-data">
    <input type="file" name="image" size="30">
    <input id="process" type="button" value="実行" />
  </form>
  <img id="image" src="about:blank">