Edited at

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

More than 1 year has passed since last update.

参考ページまとめ

大変勉強になります。

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">