AJAXでのリロードに関して

教えて下さい。

あるページを一定の時間でリロードしたいと考えています。

その際に、javascript を使用すれば、以下のような記述で何分か単位で
自動リロードが可能ですが、それをAJAXにて実現するにはどのように記述
すれば良いでしょうか???

***** javascript の場合

<TITLE>ページをリロードする方法</TITLE>
<SCRIPT TYPE="text/javascript">
<!--
var timer = "300000";//指定ミリ秒単位
function ReloadAddr(){
window.location.reload();//ページをリロード
}
setTimeout(ReloadAddr, timer);
//-->
</SCRIPT>

よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

私はあまりライブラリーを使わず自分でプログラムを書く方なので、一通りの機能を書いていますが、ざっくり書くと以下のような感じです。



そもそもAjaxとはどんな物かお分かりだという前提ですが、

createXmlHttpRequest関数はJavascript上でのHTTPクライアントを生成する関数です。
ブラウザによって処理の仕方が多少違うので、だいたいのブラウザに対応できるようにしたものです。

getAjaxData関数はAjaxを使ってサーバからデータをGETメソッドで取ってきて、<div id="ajax"></div>の間に書き込む処理をします。

そして、setInterval() で1秒に一回getAjaxData関数を呼び出しています。
setTimeout() だと一回限りなので、繰り返し一定間隔でコンテンツを書き換えるなら setInterval() がいいと思います。

<html>
<head>
<script type="text/javascript">
<!--
function createXmlHttpRequest() {
var xmlhttp = null;
try {
xmlhttp = new XMLHttpRequest();
} catch(e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
return null;
}
}
}
return xmlhttp;
}

function getAjaxData() {
xmlhttp1 = createXmlHttpRequest();
if (! xmlhttp1 || xmlhttp1.readyState == 1 || xmlhttp1.readyState == 2 || xmlhttp1.readyState == 3){
return;
}
xmlhttp1.open("GET", "./hoge.php", true);
xmlhttp1.onreadystatechange = function() {
if (xmlhttp1.readyState == 4 && xmlhttp1.status == 200) {
document.getElementById("ajax").innerHTML = xmlhttp1.responseText;
}
}
xmlhttp1.send(null);
}
setInterval("getAjaxData()", 1000);
//-->
</head>
<body>
<div id="ajax"><!-- Ajaxで書き換える部分 --></div>
</body>
</html>

この回答への補足

ありがとうございました! なんとかできるようになりました。

補足日時:2010/10/21 18:10
    • good
    • 0

目的はなんだろう?


そもそも、AJAXはおろか、Javascriptもいらないじゃないか...

<meta http-equiv="refresh" content="300">

SEOはよく知らんけど..

この回答への補足

ご回答あありがとうございました! 

確かに上記の方法でもjavascript でも実現は可能ですが、リロードした
際に画面が初期の状態(スクロールしてあっても最上部へ戻ってしまう)に
なってしまいますが、ajax を使用した場合はそれがないかと。。。

私の仕入れた情報が間違っているのかもしれませんが、、、、

補足日時:2010/10/21 18:13
    • good
    • 0

ReloadAddr関数の中の window.location.reload(); の替わりにAjaxを使ってページ内を書き換える処理を入れるだけです。

この回答への補足

ご回答ありがとうございます。

ajax に関して無知なもので申し訳ありません。

ajax を使用してページを書き換える記述はどのように記述したら良いでしょうか。。。

教えて頂ければ幸いです。

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

補足日時:2010/10/21 13:39
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい

Q指定されるdiv の部分の再読み込み処理について

javascript についてあまりわからないですが、javascript で以下のようなことをしたいですが、よくやり方がわかないので、わかっている方は教えていただきたいです。
<div id="sample">
この部分には、DBからデータを取り出す処理が入っているとする
</div>

form でsubmitをすると、id が sampleのところの処理を更新してくれる
ようなjavascript はどうやって実現しますか?
よろしくお願いします。

Aベストアンサー

超適当に書いて見た。適切に直してね
<script>
function Getdata() {
var xmlHttp = (window.ActiveXObject)?new ActiveXObject("Msxml2.XMLHTTP"):new XMLHttpRequest();
xmlHttp.open("POST","DB_Access.php",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var Querydata="prm1=val1&prm2=val2&prm3=val3"; //<=から取ればよい。
xmlHttp.send("Querydata");
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("sample").innerHTML=xmlHttp.responseText;
}
};
}
</script>
<form action="#">
------
<input type="submit" onclick="Getdata();return false;">
</form>

超適当に書いて見た。適切に直してね
<script>
function Getdata() {
var xmlHttp = (window.ActiveXObject)?new ActiveXObject("Msxml2.XMLHTTP"):new XMLHttpRequest();
xmlHttp.open("POST","DB_Access.php",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var Querydata="prm1=val1&prm2=val2&prm3=val3"; //<=から取ればよい。
xmlHttp.send("Querydata");
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.stat...続きを読む

QjQueryでloadした部分に.jsが効かない

jQueryでloadした部分に.jsが効かない

indexなどのページに、別のhtmlで作ったページをjQueryのloadで読み込んでいますが、
読み込んだ部分に、jQueryや他のjavaスクリプトが適応されないページがあり解消ができません。

問題点としましては、同じjavascript、同じhtmlを読み込んでいるはずなのに、
A.html、B.htmlにおいて動作が違うと言う点です。

具体例としましては、
A、Bは全く同じjQueryとロールオーバー用javascript(smartRollover)、ヘッダhtml、サイドhtml、フッタhtmlを読み込み、
内容部分だけ違うという程度ですが、
A.htmlではページ内全てロールオーバーが可能、
B.htmlでは内容部は可能、load読み込み部は不可能です。

A内容、B内容には量的にかなり差があり、比較でA>>>Bです。
そういった経緯から試しにAの内容を空にしてみると、Aも動かなくなりました。

上の結果から量が多いページだと適応されると判断し、結果としてload読み込みのタイミングでは?
と思っておりますが、自分では解消することができませんでした。

ちなみに使用しているjqueryはjquery-1.4.2.min.jsです。

この場合どのような解消方法、または別の問題点が考えられるのでしょうか?
どなたかに助言を頂きたく思いますので、宜しくお願いいたします。

jQueryでloadした部分に.jsが効かない

indexなどのページに、別のhtmlで作ったページをjQueryのloadで読み込んでいますが、
読み込んだ部分に、jQueryや他のjavaスクリプトが適応されないページがあり解消ができません。

問題点としましては、同じjavascript、同じhtmlを読み込んでいるはずなのに、
A.html、B.htmlにおいて動作が違うと言う点です。

具体例としましては、
A、Bは全く同じjQueryとロールオーバー用javascript(smartRollover)、ヘッダhtml、サイドhtml、フッタhtmlを読み込み、
内容部分だけ違う...続きを読む

Aベストアンサー

処理の順序を考えてみればわかると思いますが、

想像では、ご使用のjsはhtml読込み時( onload )にイベントの設定を行なっているのだと思います。
一方、loadで読込まれるコンテンツは、その時点ではまだ存在していないため、イベントの設定がなさません。
そのために、ご質問のような事象がおきていると推測されます。
(質問文からだけで推測していますので、違う原因かも知れません)

後から要素が追加されても、イベント設定を反映することができるlive関数を用いるようにすればうよろしいかと。
 http://api.jquery.com/live/
 http://semooh.jp/jquery/api/events/live/type%2C+fn/

あるいは、loadで追加したコンテンツには別途で同様の設定するとか…

Qjavascriptでセッションを取得

javaのsession.setAttribute()でセットした値をjavascriptで取得することは可能なのでしょうか?
可能であれば、手法を教えていただければと思います。
よろしくお願いします。

Aベストアンサー

セッションIDの保存はcookieかURLに連結する方法しか有りませんから、
JavaScriptでdocument.cookieや<a href="">を解析するなどしてセッションIDを取得することは可能だと思います。

セッションIDとセッションの値・内容との関連づけはサーバーで行われていますから、
その値を取得するにはAjaxなどで読み込むとかしないと無理だと思います。

QAjaxでのチャットのページ更新方法について

Ajaxなどの技術を使い、1秒毎など定期的に更新するというもの。F5連打と同じだが、ブラウザでページ自体を更新する必要はないため、一見更新しているようには見えない。

これって、PHPスクリプトの中でどうやって実現できるのでしょうか。
できましたら、PHPの中に埋め込める形でのAjaxを用いたコードを教えていただけると、幸いなのですが。どうぞよろしくお願いします。

Aベストアンサー

検索すればたくさんでてきそう…

例えば
http://php-archive.net/php/ajax-chat/
http://confetto.s31.xrea.com/php/chat/
http://hain.jp/index.php/tech-j/2007/11/19/p195
とか、
http://www.moongift.jp/2009/07/lace/
http://web2driver.com/ajax/index.php?Ajax%A5%C1%A5%E3%A5%C3%A5%C8%28Ajax%20Chat%29

QjQueryでクリックされた要素のidを関数で取得

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.alphabet').click(function(){
function alertAlphabet(){
alert($(this).attr('id'));
};
alertAlphabet();
});
});
</script>

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">...続きを読む

Aベストアンサー

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQueryオブジェクト
alert(obj.attr('id'));
};
</script>
</head>
<body>
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
</body>
</html>

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQu...続きを読む

QonClickで関数呼出し後に、結果に応じてsubmitを実行する方法

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しません・・・
onClick部分にonClick="return func(),submit();"と記述した場合、
func関数の実行結果がtrueでもfalseでも遷移してしまいます。
そこで、なんとなくonClick="return func()&&submit();"と記述してみたところ、
func関数がtrueの時のみうまく遷移するようになりました。

これは偶然そう動作しているのでしょうか、それとも上記は正しい記述方法なのでしょうか?
正しい記述方法ならいいのですが、上記以外に正式な記述方法があれば
教えていただけないでしょうか?

※TYPE="submit"にすればいいとは思うのですが、buttonで実現したいと
考えております。

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しませ...続きを読む

Aベストアンサー

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右式を結果とする演算子です。よって、funcメソッド、submitメソッド両方を評価するため、funcメソッドの戻り値に関係なく、submitされます。

3.&&で区切った場合、
論理演算子「&&」は、左右ともにtrue(0以外)の場合のみtrueとする演算子です。また、2項論理演算子は左式から評価し、左式だけで全体の結果がわかる場合、右式を評価しません。よって、funcメソッドがfalseを戻した場合、その時点でsubmitを評価しなくても演算結果は必ずfalseとなるのでそこで打ち切られ、trueを戻した場合、submitを評価しないと演算結果を得られないため、遷移したわけです。「&&」を「||(論理和)」に変更すると逆の結果得たと思います。

さて、では3の「&&」が正しいかと言われたら、文法上は正しいです。ただし、他人がみてわかるとは思えません。
そこで、以下の記述はいかがでしょう。読んでみてソースを理解できますか。


<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="func()">
</FORM>

(中略)

// funcの定義
function func() {
 if (a==0) {
  alert("処理しない");
  return ;
 }
 document.FormName.submit();
}

要は、ボタンを押されたら、funcを呼び出せ。
funcでは、aが0ならば、そこで終了しろ。
そうでなければ、documentオブジェクト内のFormNameと言う名前のオブジェクトのsubmitメソッドを呼べ。
です。

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右...続きを読む

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

Qテーブルの最後(最新)のレコードを抽出したい

宜しくお願いします。
PHP MYSQL の組み合わせで使っています

以下のようにして、最後のレコードを取り出したいのですが
まったく違う事をしているのかもしれません。

$sql =" select * from テーブル where フィールド='max' " ;

フィールドはauto_incrementで番号を振っています。
これで最大のつもりなのですが・・・。

他にも、レコードを入れた時間も記録したフィールドがあるのですが
どうしてよいか?判りません。

テーブルの最新のレコードを出したいのです。
**その中の一つのフィールドを取り出すのですが、
  それはうまくいっているみたいです 
  (max の所に数字を入れると表示します)

お手数かけますが、どなたかご教授お願いいたします。

Aベストアンサー

#2回答者です。

MySQL 4.1以前(サブクエリを使えない)なら、以下のような方法が考えられます。

select * from 表名
order by 列名 desc limit 1

Qrequire_once()でファイルが読み込めません

すいません、色々やったみたのですがよく分からなかったので教えてください。

PHPのテンプレートのSmartyを使いたいと思い、公式サイトからダウンロードして/usr/local/lib/php/Smartyにコピーしました。

その後、php.iniのinclude_pathにて".:/usr/local/lib/php/Smarty"と設定し、require_once("Smarty.class.php");としたのですが、

failed to open stream: No such file or directoryや
Failed opening required 'Smarty.class.php'

というエラーが出て読み込めません。また、phpinfo()を見る限りではphp.iniはきちんと読みにいっているようでした。

ためしに/usr/にSmartyを置き、include_pathもそのように変更してみたのですが読み込めません。カレントディレクトリに配置した場合は上手く読み込めました。また、Smartyでなくてもどのファイルでも読み込めない状況です。

環境はFedora6、Apache2.0、PHP5です。何かアドバイスよろしくお願いします。

すいません、色々やったみたのですがよく分からなかったので教えてください。

PHPのテンプレートのSmartyを使いたいと思い、公式サイトからダウンロードして/usr/local/lib/php/Smartyにコピーしました。

その後、php.iniのinclude_pathにて".:/usr/local/lib/php/Smarty"と設定し、require_once("Smarty.class.php");としたのですが、

failed to open stream: No such file or directoryや
Failed opening required 'Smarty.class.php'

というエラーが出て読み込めません。また、phpinfo()を見る限...続きを読む

Aベストアンサー

Smarty.class.phpのパーミッションはどうですか?

include_path上にファイルが存在しても、Webサーバを動かしているユーザから読めなければ、ファイルが読めずエラーになります。

一時的に
chmod 755 Smarty.class.php
としてみてはどうでしょう?

これで動くようなら、所有者を変更するかして正しいパーミッションに戻せばよいと思います。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報