ステータスを更新する必要があるWebサイトがあります。フライトのように、出発、クルーズ、または着陸しています。視聴者にページ全体を持たせてリロードさせることなく、ステータスを更新できるようにしたいと思います。 AJAXとjQueryを使用してそれを行う方法があることは知っていますが、それがどのように機能するのか理解していません。また、ボタンを押してクリックさせたくありません。誰かがそれがどのように行われるかを知っているなら、私はそれをとても感謝しています!
一般に、何かがどのように機能するかわからない場合は、学習できる例を探してください。
この問題については、考慮してください this DEMO
AJAXを使用したコンテンツのロードは、jQueryを使用して非常に簡単に実行できます。
$(function(){
// don't cache ajax or content won't be fresh
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='http://automobiles.honda.com/images/current-offers/small-loading.gif' alt='loading...' />";
// load() functions
var loadUrl = "http://fiddle.jshell.net/deborah/pkmvD/show/";
$("#loadbasic").click(function(){
$("#result").html(ajax_load).load(loadUrl);
});
// end
});
これがどのように機能するかを理解してから、複製を試みてください。幸運を。
対応するチュートリアルを見つけることができます HERE
現在、次のイベントはajax load
関数を開始します。
$("#loadbasic").click(function(){
$("#result").html(ajax_load).load(loadUrl);
});
これを定期的に行うこともできます。 定期的にAJAXリクエストを発行する方法?
(function worker() {
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
},
complete: function() {
// Schedule the next request when the current one's complete
setTimeout(worker, 5000);
}
});
})();
この実装のデモを作成しました HERE。このデモでは、2秒ごと(setTimeout(worker, 2000);
)にコンテンツが更新されます。
データをすぐにロードすることもできます:
$("#result").html(ajax_load).load(loadUrl);
持っている THIS 対応するデモ。
JQuery Ajaxについては、公式jQueryサイトから読むことができます。 https://api.jquery.com/jQuery.ajax/
クリックイベントを使用したくない場合は、定期的に更新するためのタイマーを設定できます。
以下のコードは、ほんの一例です。
function update() {
$.get("response.php", function(data) {
$("#some_div").html(data);
window.setTimeout(update, 10000);
});
}
上記の関数は、10秒ごとにを呼び出し、response.phpからコンテンツを取得し、#some_div
で更新します。
最初にajax
を学びたいと思うと思います。 Ajax Tutorial
Ajaxの仕組みを知りたい場合、jQueryを直接使用するのは良い方法ではありません。サーバーにajaxリクエストを送信するネイティブな方法の学習をサポートします。XMLHttpRequest
についての何かを参照してください。
var xhr = new XMLHttpReuqest();
xhr.open("GET", "http://some.com");
xhr.onreadystatechange = handler; // do something here...
xhr.send();
ページを更新せずにWebページにlive feed content(たとえばlivefeed.txt)を表示する場合は、次のようにしますsimplifiedあなたのために。
以下のhtmlファイルでは、ライブデータは、idのdiv要素で更新されます"liveData"
index.html
<!DOCTYPE html>
<html>
<head>
<title>Live Update</title>
<meta charset="UTF-8">
<script type="text/javascript" src="reloader.js"></script>
</head>
<div id="liveData">
<p>Loading Data...</p>
</div>
</body>
</html>
以下のautoUpdate.jsはXMLHttpRequestオブジェクトを使用してライブデータを読み取り、1秒ごとにhtml div要素を更新します。理解を深めるために、ほとんどのコードにコメントを付けました。
autoUpdate.js
window.addEventListener('load', function()
{
var xhr = null;
getXmlHttpRequestObject = function()
{
if(!xhr)
{
// Create a new XMLHttpRequest object
xhr = new XMLHttpRequest();
}
return xhr;
};
updateLiveData = function()
{
var now = new Date();
// Date string is appended as a query with live data
// for not to use the cached version
var url = 'livefeed.txt?' + now.getTime();
xhr = getXmlHttpRequestObject();
xhr.onreadystatechange = evenHandler;
// asynchronous requests
xhr.open("GET", url, true);
// Send the request over the network
xhr.send(null);
};
updateLiveData();
function evenHandler()
{
// Check response is ready or not
if(xhr.readyState == 4 && xhr.status == 200)
{
dataDiv = document.getElementById('liveData');
// Set current data text
dataDiv.innerHTML = xhr.responseText;
// Update the live data every 1 sec
setTimeout(updateLiveData(), 1000);
}
}
});
テスト目的の場合:livefeed.txtに何かを書くだけです-index.htmlでも更新せずに同じように更新されます。
livefeed.txt
Hello
World
blah..
blah..
注:上記のコードをwebサーバーで実行する必要があります(例: http:// localhost:1234/index.html )notクライアントhtmlファイルとして(例:file:/// C:/index.html)。