どうもかわうそです!
今日は『JavaScript | ajaxをJavaScriptとjQueryで書いてみた【振り返り】』というテーマで書いていきます。
かわうそはひそかに、『JavaScriptを社内一、極めたい 』 と思っています。
今回のajaxも、今までjQueryでなんとなくコピペして使っていました。
JavaScriptでどうやって書くんだろう?と気になったので、ちょっと調べて自分でも書いてみました。
この記事は、自分用の振り返り、備忘録的なものになっています。
ajaxとはそもそも
JavaScriptを使って非同期でhttp通信を行い、xml形式でデータをやり取りする
って感じ。
これを英語にして、省略するとAjax。
もはや XML形式ではなくJSONしか使わない気がするので、A-JSON(エージェイソン)とかどうだろう。
JavaScriptでajaxをしてみたよ
こちらの記事を参考にさせていただきました。
分かりやすかった!
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9SmF2YXNjcmlwdCVFMyU4MSVBRUFqYXglRTMlODElQUIlRTMlODElQTQlRTMlODElODQlRTMlODElQTYlRTMlODElQUUlRTUlOUYlQkElRTYlOUMlQUMlRTMlODElQkUlRTMlODElQTglRTMlODIlODEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWIxOThkNmRkYjQ3NDM1Y2ZmNTM1ZDcyY2QyYWQ0MjMy&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrYXRzdW5vcnkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTYyM2U2YWQzNDVkZmRkZDNkNjVjM2Q2ZTg1ZDM4N2Ri&blend-x=142&blend-y=436&blend-mode=normal&txt64=aW4g6YGL5Za26ICF44Ku44Or44OJ&txt-width=770&txt-clip=end%2Cellipsis&txt-color=%23212121&txt-font=Hiragino%20Sans%20W6&txt-size=36&txt-x=156&txt-y=536&s=638f2a6d253914e00148925470768f79)
今回書いてみたコード
js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
let req = new XMLHttpRequest(); let data; setInterval(function(){ req.open('GET', 'shipment.php', true); req.send(null); },1000); req.onreadystatechange = function() { if(req.readyState == 4) { if(req.status == 200 ){ data = req.responseText; document.getElementById('get_shipment').innerText = data; }else{} }else{} } |
php
1 2 3 4 5 |
date_default_timezone_set('Asia/Tokyo'); $today = date('Y-m-d'); // 現在日付取得 $time = date('G-i-s'); // 現在時刻取得 $postTime = $today. ":" .$time; echo $postTime; |
phpで現在時刻を取得し、それをajaxで持ってくるだけの簡単な内容です。
感想としては思っていたよりもコードが短く澄んだ!という印象です!
JavaScriptの学習を続けてきた成果か、理解はそんなに難しくなかったです。
XMLHttpRequestオブジェクトの作成
1 |
let req = new XMLHttpRequest(); |
これで、『XMLHttpRequest()オブジェクト 』 を作成しています。
これ以降はreq
を使用し、用意されているプロパティやメソッドを使っていくんだなぁ、と流れを想像できました。
httpリクエストを作っていく
phpファイルのどうやってアクセスするかの仕組みを作っていきましょう。
とはいえ、書くのは二行だけ。
1 |
req.open('GET', 'shipment.php', true); |
こちらでhttpリクエストの設定をしています。引数に指定の値を入力していきます。
通信形式はGET、リクエスト先のurl、非同期モードで通信をするかどうか = true をぶち込みました。
1 |
req.send(null); |
sendメソッドでリクエストを送ります。GETなのでnullでok。
POSTの場合は、何かしらぶち込んでください。
GETは取得、POSTは付与や更新で使用すると思います。(たぶん。。。)今回は取得ですね。
非同期通信の場合は、リクエストがサーバーに届くと取得結果がイベントとして返ってきます
この辺が参考になるかもです。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9R0VUJUUzJTgxJUE4UE9TVCVFMyU4MSVBRSVFOSU4MSU5NSVFMyU4MSU4NCVFMyU4MSVBQiVFMyU4MSVBNCVFMyU4MSU4NCVFMyU4MSVBNiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YjYzMGE3OTg5YWRhYTE0MDg4YzIxZjI5ZjYwOWUyNzA&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrYW5hdGF4YSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OGE0NGY4ZDgxYTkxNzZlOGI2MjA0MzhjZjEwNTE1ZGY&blend-x=142&blend-y=486&blend-mode=normal&s=6243aca5a47d39211512a765b43dc476)
![](https://kawauso-29.com/wp-content/uploads/simplicity-cache/adec6b7fe735d4bf667370b32e75dcc6.png)
最終的に毎秒通信をするために、setInterval
で通信を1秒ごとに送るようにしました。
※ 処理が重なってしまう可能性があるので、ほんとはsetTimeout
がいいと思います。後述するjQueryではsetTimeout
を使用。
1 2 3 4 |
setInterval(function(){ req.open('GET', 'shipment.php', true); req.send(null); },1000); |
これでajaxの通信自体が可能になったはず。
次は返ってきたイベントの処理が必要です。
onreadystatechange メソッドで通信状態を監視
1 2 3 4 5 6 7 8 |
req.onreadystatechange = function() { if(req.readyState == 4) { if(req.status == 200 ){ data = req.responseText; document.getElementById('get_shipment').innerText = data; }else{} }else{} } |
いきなりでてきたこいつonreadystatechange
ですが、落ち着いて対応しましょう。
その文字のごとく、通信状態が変化したときに呼び出されるメソッドです。
readyState == 4
で通信が完了したかどうかを判定しています。
※つまり最初のelseは、通信が完了していない = 通信中ってことです。
ただ通信自体が終わった = 成功したのか失敗したのかが判定されていません。
通信が成功していれば req.status == 200
です。
その時、echoで返されるphpファイルの結果を、指定のHTMLのテキストに上書きしなさいって処理ですね。
![](https://kawauso-29.com/wp-content/uploads/simplicity-cache/adec6b7fe735d4bf667370b32e75dcc6.png)
![](https://kawauso-29.com/wp-content/uploads/simplicity-cache/adec6b7fe735d4bf667370b32e75dcc6.png)
これで思った通りの動きが始まりました!
jQueryでのajax
続いてはjQueyでのajaxです。
jQueryはたくさんコードがあると思うので、詳しい説明は省きますね!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function(){ function callBackAjax(){ $.ajax({ url: 'shipment.php', type: 'GET', dataType: 'text', timeout: 5000 }) .done(function(data){ data = data; document.getElementById('get_shipment').innerText = data; setTimeout(callBackAjax, 1000); }) .fail(function(){ }); } callBackAjax(); }); |
今回は、setTimeout
を使うことで、前の処理が終わった後に、次の処理を予約するようにしています。
処理の終了時に、setTimeout
自身を呼び出して無限ループさせています。
リレーでいうと、ゴールで自分自身にバトンを渡して、また走って・・・なんという無限地獄
jQueryのほうが直感的
結局jQueryのほうがいろいろと直感的で分かりやすくて使いやすいですね。
設定をオブジェクトで渡せるというのもありますが、無理してJavaScriptを使う必要性は感じませんでした。
とはいえ、レベルアップのためには、jQueryだけでは見えない裏側のJavaScriptの動きは知っておくべきだと思います。
イレギュラー処理やセキュリティなど、もっと勉強しないと実際の現場では使えないことが大きそうです。
例えばtimeout機能を付けないと、スマホで通信していて、地下鉄に入って電波がなくなった・・・
なんてシーンで、どれだけ待っても通信が終わらずページが表示されない => 離脱原因
になったりもするみたいです。
もっともっと勉強していきます!