僅使用常規Javascript刷新頁面中的一個<div>
[英]Refreshing only one <div> in page with just regular Javascript
問題描述
如果我沒有從服務器獲取任何信息，但我想每N秒重新加載/刷新一次div，我該怎么做？
javascript新手：我嘗試過類似的東西
<script type = 'text/javascript'>
function refresh(){
setTimeout(window.location.reload(), 10000);
}
</script>
<div id='target' onLoad='refresh()'>
<?
var =grab some rapidly changing content from the web
print var
?>
</div>
<div>
some stuff that doesn't get refreshed
</div>
我不清楚，如果我沒有從服務器獲取新信息，我需要AJAX ...所以現在我想知道如何讓它在javascript中工作
編輯：我不喜歡使用庫進行這個基本操作，所以理想情況下我不會使用jquery，原型等。編輯II：不知道為什么人們說div不變...它的內容是動態的，它被抓住了從網上說起來......並且每當它去抓東西的東西已經改變了......一個例子可能是抓住來自Twitter的搜索結果，變化非常迅速......
7 個解決方案
解決方案1
6 已采納 2011-05-13 20:33:45
是的，你確實需要Ajax，因為根據定義，這就是Ajax。 特別是如果你想從其他網站獲取內容。
我知道你說你想使用普通的javascript，但看看這個，也許你會喜歡這個。 看看這個很棒的jQuery插件。 https://github.com/jamespadolsey/jQuery-Plugins/tree/master/cross-domain-ajax/
這很簡單，用它讓你執行Ajax唱jQuery的一個很大的區別的：你可以抓住從任何地方的內容（如在其他網站上的內容來自）。 你可以像在自己的服務器上一樣使用相同的jQuery.load（）方法或.ajax（）方法，除了你可以從任何地方獲取內容！
只需將插件腳本添加到頁面（在jQuery之后），然后使用此處所述的.load（）方法。
所以在你的情況下，你可以做這樣的事情：
$('div#target').load('http://somewhere.com #newContent');
這將從somewhere.com獲得#newContent並將其放在您網站上的#target中。
你可以使用javascript的setInterval做這樣的事情：
setInterval( function() {
$('div#target').load('http://somewhere.com #newContent');
}, 5000); //repeat function every 5000 milliseconds
這將每5000毫秒（也稱為5秒）重復函數（）{}內的任何內容。
您還可以從自己的網站獲取內容：
$('div#target').load('http://yoursite.com/some-page #someContent');
這將使#someContent和無論是在它的內部，從http://yoursite.com/some-page到#target上http://yoursite.com/whatever-the-current-page-is
總而言之，這是一種加載內容的超級簡單方法。 jQuery的大小只有31kb（縮小），我相信它是值得的。 沒有必要重新發明輪子，當jQuery可以做你想要的，並有效地，除非你試圖進出javascript。 如果你只是想讓你的網站工作（最終結果是重要的），那么就給出一個超級簡單的方法，我只是試一試。
解決方案2
1 2011-05-13 07:44:28
您可以創建一個遞歸函數，它將更改div的內容，看起來它將被刷新。 像計時器方法一樣，每組時間都會改變時間。 我不知道你將如何得到將加載到div上的數據，我假設你將處理這部分。
這是功能
var gIndex = 1;
function refreshDiv(){
document.getElementById('target').innerHTML = "Timer " + gIndex++;
var refresher = setTimeout("refreshDiv()", 1000);
}
<body onLoad="refreshDiv()">
<div>
<span>HTML Content</span>
<div id="target"></div>
</div>
</body>
你會看到setTimeout再次調用refreshDiv()時會設置一個時間，所以這就像重新加載div的內容一樣。 在再次調用refreshDiv()之前，更改div的值。
解決方案3
1 2011-05-13 21:15:50
好的，所以你確實需要AJAX。 好吧，不是“X”部分，你只需要異步Javascript部分。 服務器可以返回XML或JSON，但在您的情況下，最簡單的方法就是返回要放入div的HTML blob。
但是，您必須向服務器進行往返，因為瀏覽器中沒有任何更改，只有服務器上頁面的內容已更改。
這是一個30秒的教程 ，解釋了一切。 我會根據你的需要調整它。
首先，在服務器端，你已經有了一個PHP腳本，我們稱之為“page.php”，它返回整個HTML頁面。 你需要制作第二個PHP腳本，我們稱之為“div.php”，它只返回div的內容。
（你也可以讓page.php查找一個參數，比如$ _GET ['divonly']，這樣只有一個PHP腳本可以處理這兩個作業。沒關系......你可以隨心所欲地做到這一點，只要您在服務器端有第二個URL來檢索div的新內容。）
在page.php的HTML中，你已經有了：
<div id="target"> ... </div>
現在你已經添加了div.php，它只返回“...”，而不是一個完整的HTML頁面。
好的，現在，Javascript。 如果您不想使用庫，則不必使用庫 - 庫的優點在於它們可以處理所有跨瀏覽器問題。
但這是你想要的，改編自純Javascript的例子：
var refreshDelay = 10000;
/* Creates the XMLHTTPRequest object depending on the browser */
function createRequestObject() {
var ro;
if(navigator.appName == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
/* Makes the request back to /div.php ... change the URL to whatever
script you put on the server side to return the contents of the div only */
function sndReq() {
http.open('get', '/div.php');
http.onreadystatechange = handleResponse;
http.send(null);
}
/* Does the work of replacing the contents of the div id="target" when
the XMLHTTPRequest is received, and schedules next update */
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('target').innerHTML = response;
setTimeout(sndReq(), refreshDelay);
}
}
/* Schedules the first request back to the server. Subsequent refreshes
are scheduled in handleResponse() */
setTimeout(sndReq(), refreshDelay);
解決方案4
0
看一下jQuery.load（） 。 請注意，從服務器reload提取信息。
解決方案5
0 2011-05-13 07:05:56
如果你熱衷於自己做，以避免包含像jquery這樣的完整庫的開銷，你可以看看這個。
http://www.dynamic-tools.net/toolbox/ajax/
簡單的ajax請求演示展示了如何從url中檢索html。 您將要使用setInterval替換單擊觸發器以不斷輪詢而不是按需觸發。
解決方案6
-1 2011-05-13 06:25:06
另一種方法是使用“瀏覽器可以使用元數據（如何顯示內容或重新加載頁面），搜索引擎（關鍵字）或其他Web服務”
解決方案7
-1 2011-05-13 20:06:54
簡短回答：
1 . div 'onload' doesn't exist. So you need to register a listener for the page
load event, or put it in "<body onload='refresh()'"
2 . function refresh(){
setTimeout("window.location.reload()", 10000); // note the ""
}
答案很長：
您的頁面不會因為您的功能從未執行而刷新。 其次，如果按原樣放置，由於setTimeout（window.location.reload（），10000）;頁面將在頁面加載后立即刷新。
作為側節點，不建議使用此版本的setTimout函數，更好的方法是將函數作為第一個參數傳遞
setTimeout(window.location.reload,1000); // we are passing the function,
// not the function result
希望這會有所幫助。
刷新div而不刷新頁面
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.