質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

3回答

3895閲覧

時計のように画面を、静かにリフレッシュするには?

sakura-shi

総合スコア93

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2018/04/02 09:02

編集2018/04/03 07:09

■やりたいこと
フォームのない画面で、定期的に(例:1分ごと)画面をリフレッシュさせたいのですが、どのような方法がよいでしょうか?
Javascriptのreloadを使うと、明らかに画面を更新しているのが目視でわかるのではないでしょうか?
画面をみている人に、更新処理をしているということを感じさせない方法がよいです。

更新する画面

<html> <head> </head> <body> <div id="main"> <!-- デジタル時計のように一分毎に画面更新した日付+時間を表示 --> <div id="now">yy年m月d日 hh時㎜分に更新 </div>  <div id="new-value"> (ここにDBから取得した最新の値を表示) </div>  <div id="get-date"> (ここにサーバから取得した日付を表示 ただし当日日付ではなくサーバ側で計算した日付) </div> </div> </body> </html>

■サーバ側から返す値
json形式
data.new_value
data.get_date

■サーバ側にPOSTする値 なし

■試してみたこと

JS

1function doReloadNoCache() { 2 window.location.reload(true); 3} 4window.addEventListener('load', function () { 5 setTimeout(doReloadNoCache, 60000); 6 console.log("update"); 7});

その結果、一分ごとに、「・・・に接続しています」の表示がでます。
できればこの表示は避けたいです。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kszk311

2018/04/02 09:11

具体的にどんなことをやりたいのですか?
x_x

2018/04/02 09:15

Ajaxタグが付いているようですが、調べましたか?
sakura-shi

2018/04/02 12:37

具体的にやりたいことは、定期に画面を更新することで最新のDBの値を処理して表示させる、というものです。
sakura-shi

2018/04/02 12:38

ajaxタグは、いくらか調べたのでタグをつけました。が、希望するような例が見当たりませんでしたので投稿しました。
x_x

2018/04/02 13:03

まあまあ、Ajaxは答えといってもいいです。できれば、何か試してほしいところです
sakura-shi

2018/04/02 13:38 編集

$(function() { setInterval("update()", 2000); }); こんな例は見つけたのですが、update関数の中をどのように書いたらいいのかわかりません。 教えてください。
guest

回答3

0

ベストアンサー

タグでAjaxと付いているので、なんとなくはイメージできてるんじゃないのかなと思います。

・定期的に処理をする
・reloadを使わずに、DBからデータを取得してHTML更新をしたい
という2つに分けられます。

$(function() { setInterval("update()", 2000); }); こんな例は見つけたのですが

こちらで、「定期的に処理をする」の方はできていますね。

javascript

1function update(){ 2 console.log('update'); 3}

こんな感じで確認は出来ると思います。

これから、updateにAjaxの処理を入れると、下記のようになります。
「sample.php」へPOSTで送信したときの一例です。

javascript

1function update(){ 2 //Ajax 3 $.ajax({ 4 type: 'POST', 5 url: 'sample.php', 6 7 //送信するパラーメータ 8 data: { 9 'page': 2 10 }, 11 12 //成功した時の処理 13 success: function(result){ 14 console.log(result); 15 // 受けとったデータから、HTMLを更新する 16 17 } 18 }); 19} 20$(function() { 21 setInterval("update()", 2000); 22});

受け取ったデータを何らか処理してHTMLを更新するところとかは、あとはできますかね。

とりあえずJSだけで

こんな感じでできます。
現在時刻を常に→HTML(テキスト)整形の処理を、1分ごとに常に行います。

javascript

1//現在時刻を取得して更新する 2function update() { 3 4 let now = new Date(); 5 let y = now.getFullYear(); 6 let m = now.getMonth() + 1; 7 let d = now.getDate(); 8 let w = now.getDay(); 9 let h = now.getHours(); 10 let i = now.getMinutes(); 11 12 //1桁だったときに頭に 0 をつける 13 if(m < 10){ 14 m = '0'+m; 15 } 16 if(d < 10){ 17 d = '0'+d; 18 } 19 if(h < 10){ 20 h = '0'+h; 21 } 22 if(i < 10){ 23 i = '0'+i; 24 } 25 //出力 26 $('.time').html(y+'/'+m+'/'+d+' '+h+':'+i); 27} 28 29$(function(){ 30 //一回目 31 time_update(); 32 //二回目以降 33 setInterval("update()", 1000*60);/* 1分ごと */ 34});

html

1<div class="time"></div>

動作確認はこちらより
https://codepen.io/sleepzzz/pen/jzKdWZ

投稿2018/04/02 14:47

編集2018/04/03 14:27
kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-shi

2018/04/03 00:12

ありがとうございます。 POSTはしません。画面更新のみです。自身のURLを読み直すことになるのでしょうか?? update関数の中がわかりません。教えていただけませねんか?お願いします。
kszk311

2018/04/03 01:56

単に画面更新(ページ全体の更新)のみをしたいのなら、reloadを使うのが楽です。 部分更新の場合は、以下のようにJSからPHP、DBへと段階的に処理するのが一般的かなと。 1.Ajaxを利用してPHPを実行 2.PHPでDBにアクセスし、取得 3.取得した値を、JSONなりデータとして出力(JSで受け取れるように) 4.1.でリクエストしたPHPの処理が3で返されるので、その値はJSで取得し、HTMLに描画 1.の例が、今回回答したソースになります。 一例なので、もちろんPOSTじゃなくてもいいです。
sakura-shi

2018/04/03 05:46

◆POSTするデータがなくても、サーバ側(PHP)で処理して値を返し、それを表示させればいいですね?ただこれだと、一分ごとの時間表示ができません。 一分ごとの時間表示はこの場合、どのように記述したらいいでしょうか? ◆もうひとつの方法は、サーバ側で値は取得するが、PHPだけで処理し画面を読み直すことで最新のデータを表示+一分ごとの時間を表示、この方法で見ている人にリロードしているという動作がわからなければそれでよいと思います。この見ている人に、モニタのチラつきなど負荷なく、一分ごとの時間と最新データを表示させることができる、ことが大事です。
sakura-shi

2018/04/03 05:47

update関数の中に、 window.location.reload(true);と記述したらよいでしょうか?
kszk311

2018/04/03 05:57

えっと、やりたいことは、時計をサーバ側の時間で1分おきに更新したいってことですか? ブラウザ側の時間でよければ、全てJSでできますが、サーバの時間で行いたいってことですかね。
sakura-shi

2018/04/03 06:40

やりたいことは、質問にあるとおり、一分ごとにデジタル時計のようにカウントする表示+DBの最新の値を取って表示です。サーバ側でもブラウザ(ローカル)側でもよいです。
sakura-shi

2018/04/03 06:42

window.location.reload(true);これを試してみました。やはり一分毎にブラウザのほうで「・・・に接続しています」の表示がでます。これを避けるためには、ajaxで表示+JSで時計のように現在の時刻を表示かな?と思っています。 JSで一分ごとに現在の時刻表示ってできますか?
kszk311

2018/04/03 07:50

ブラウザ側の時間でもいいんですね。 まず時刻のみ、JSだけで更新する処理を追記しましたのでご確認ください。
sakura-shi

2018/04/03 14:20 編集

ありがとうございます。 この場合、update関数はどこで呼べばよいのでしょうか????? time_update関数の中で呼ぶのがスムーズでしょうか?
kszk311

2018/04/03 14:11

追記したソースの「time_update」が、質問者さんの言う「update関数」にあたります。
sakura-shi

2018/04/03 14:21 編集

やはりtime_update関数の中でupdate関数を呼ぶのがよさそうですね??????
sakura-shi

2018/04/03 14:29 編集

が疑問があります。time_update関数の中で、 window.location.reload(true); これを記述してみたのですが、1分毎ではなく5秒ごとくらいにリロードしているようです。(大量のログが出力されましたので、それで確認しました) update関数をtime_updateの中で呼ぶだけで、サーバ側から取得した最新の値を表示してくれるのでしょうか? time_updateの中でreloadすると、どうして失敗するのでしょうか???
kszk311

2018/04/03 14:31 編集

回答したソースをtime_update→updateに合わせました。 time_updateの中にupdateを入れるとかはしなくていいです。 reloadはしないです。JSでループしようとしているのに、その中でページのreloadしたら意味ないですよね。 まずは、DBにアクセスするのは置いておいて、JSの処理を確認して下さい。
sakura-shi

2018/04/03 17:39

ありがとうございます。回答いただいたコードとほぼ同じものは正常に動いています。 ただ、この時刻更新の状態にDBから取得した最新の値を表示処理を追加すると、画面更新はできているのですか? 以下(post値なし)と、時刻表示を同じファンクションに記述したらOKですか? function update(){ $.ajax({ type: 'POST', url: 'sample.php', data: {  }, //成功した時の処理 success: function(result){ console.log(result); // 受けとったデータから、HTMLを更新する } }); }
kszk311

2018/04/04 01:39

「更新する」と言われれば更新なのですが「Ajaxを使いPHP→DBへとアクセスし、取得した値から、HTMLを書き換える」ということをやります。 Ajaxの使い方はわかりますか? PHPでどんなことをやるのか(何を取得したいのか)がわからないので、教えてください。
guest

0

具体的なコードが出てないのでふんわりとしたことしか言えませんが、ここにPHPとjQueryを使った簡単な例があります。
参考にしてみてはどうでしょうか?
http://ysklog.net/jquery/ajax/2035.html

投稿2018/04/02 13:42

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-shi

2018/04/03 14:18

ありがとうございます。
guest

0

同じURLを参照するiframe要素を2つ重ねておいてopacityでクロスフェードさせるのはどうだろう?
定期的に交互にiframeの内容をリロードするようにすれば、ぱっと見気が付かないのでは?

CSS

1body{ 2 margin: 0; 3} 4iframe{ 5 position: absolute; 6 width: 100%; 7 height: 100%; 8 border: none; 9 transition: opacity 2s linear 0s; 10} 11iframe.on{ 12 opacity: 1; 13 z-index: 1; 14} 15iframe.off{ 16 opacity: 0; 17 z-index: 0; 18}

HTML

1<iframe class="on" src="http://jsrun.it/assets/C/0/h/W/C0hWw.png" scrolling="no" style="background-color:yellow;" onload="swap()"></iframe> 2<iframe class="off" src="http://jsrun.it/assets/I/8/W/E/I8WEq.png" scrolling="no" style="background-color:red;" onload="swap()"></iframe>

JavaScript

1"use strict"; 2window.onload = e => { 3 (function reload(){ 4 document.querySelector(".off").contentWindow.location.reload(true); 5 setTimeout(reload, 3000); 6 })(); 7 const iframes = [].slice.call(document.querySelectorAll("iframe")); 8 window.swap = e => 9 iframes.forEach(iframe => iframe.className = iframe.className == "on" ? "off" : "on"); 10}

動作サンプル
http://jsdo.it/defghi1977/sXVK
NOTE:
iframe要素の内容を交互にリロードしていることがはっきりするように背景色と画像を変えていますが, 実際には同じ内容とします.

投稿2018/04/02 09:59

編集2018/04/02 14:27
defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-shi

2018/04/03 14:17

ありがとうございます。 説明不足ですみません。サーバとのデータの受け渡しあるので別の方法でやってみたいと思います。 サンプルまで作成していただいてありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問