Ajaxを使ってデータを非同期で表示させる

先日の投稿でAWSの利用状況をAPIを使って取得する方法を書きました

それを元にダッシュボードっぽいものを作りました
AWS運用管理ダッシュボード画面

AWSのAPIでは一気に情報を引き出せるものは少なく、このように複数の情報を引き出そうと処理を変更して流してしまうとPHPでは処理が終わるまで画面が表示されません
画面が真っ白になった状態が続いてしまうということになってしまいます
そこで、個別に処理をさせるのは変わりませんが、Ajaxを使うことによって処理が遅いものは遅延させ、処理ができたものから表示させることにしました
全体の処理時間自体は変わらないのですが、UIが目に見えているというのはユーザーにとってストレス低減にも繋がるようになります

例として『[AWS API] EC2インスタンスの数を取得する』を元に処理します

EC2インスタンスの数を取得する

AWSのAPIを叩くPHPスクリプトは下記です
JavaScritp側で表示の処理をさせるのでPHPでは結果をJSONで吐き出させています

これで、PHPから吐き出される結果は

となります

値を表示させるHTMLの用意

指定したID属性の部分に値が表示されます。ここでは『ec2_info』としています

Ajaxの用意

これで、裏側では処理は続いているのに画面自体は表示が進んでいきます

変数の値を表示させたいだけなのにひと手間かかるのと、JavaScriptを使って表示処理をしているとエラー箇所が分かりにくくなるのが難点ですが、何よりも作ってる側が一番ストレスを感じなくてよくなるかもしれません

処理している間にローディング画像を表示させるとちょっとかっこよく見えますしね