2011-03-23 100 views
2

我有一個頁面videos.php,它通過Ajax加載視頻源。在php ajax頁面video_feed_ajax.php中,它通過一個數組查看每個視頻的對象。然而,目前我寫JS的方式,只有當它的完整加載(當它遍歷整個數組時)才顯示video_feed_ajax.php。 - >有沒有辦法顯示video_feed_ajax.php每次它通過循環,所以視頻顯示,因爲它循環而不是在最後?PHP/JS Ajax - 通過數組循環顯示PHP頁面

xmlhttp.onreadystatechange=stateChangedUsersAddVideoFeed; 
xmlhttp.open("GET",url,true); 
xmlhttp.send(null); 

function stateChangedUsersAddVideoFeed() 
{ 
    document.getElementById("add_video_feed").innerHTML=xmlhttp.responseText; 
    document.getElementById('add_video_feed_load_img').style.display='none'; 
} 

回答

1

可能調用你的循環中的PHP函數flush立即發送回顯標記。

但是,如果你的循環正在採取足夠長的時間造成滋擾有必須與它的東西錯了 - 除非你只是想逐步加載的視覺效果,在這種情況下,你應該簡單動畫,接到全響應後。流幾碼就沒有意義了。

1

有每次經過循環時間顯示video_feed_ajax.php的方式,使視頻顯示爲它遍歷代替:

適用的我JS的部分只是在最後?

我要解釋這意味着:

有什麼辦法來處理來自查詢的數據,因爲它從服務器回來,而不是一次處理整個文檔?

在這個特定情況下,答案「可能不是」。

你在這裏寫裸ajax,並且盲目地假設任何 readyState變化將對你有利。 (這是不好的做法,你有沒有考慮過使用像jQuery這樣的現代Javascript庫?)

The issue at hand is what those readyStates are,以及它們何時被觸發。狀態如下:

0:未發送:對象存在。
1:已打開:該對象正在發出HTTP請求。
2:收到標題:請求已完成並返回了HTTP標頭。
3:正在加載:正在傳送和處理HTTP請求正文。
4:完成:HTTP請求主體已完全加載。

不同的瀏覽器處理0,1和2的方式不同,所以讓我們假裝它們不存在。

現在,規範說,the response should be partially populated as it's made available,但你的代碼只有在狀態改變時纔會觸發。你只會看到兩種狀態變化:加載或完成。這意味着你現有的代碼永遠不會看到部分文件!

現在,我的直覺是,你可以設置一個setTimeout當readyState加載,然後不斷輪詢響應,看看有什麼變化,但這是行不通的。 As documented in this previous question here on SO,一些瀏覽器不實現加載readyState!這意味着你的代碼只能永遠可靠地看到完成readyState。

總之,你不能這樣做...沒有一些幫助。

HTML5的努力提出了一項名爲Server-Side Events的新技術。它旨在完成您要在此處執行的操作:將單獨的數據塊一次一個地背對背地發送,並獨立處理它們。在Chrome和Opera中有本地實現,當瀏覽器沒有實現它時有there's a jQuery plugin to emulate the interface。他們想把它放到Firefox 4中,但它們不能完全切斷。我只知道這種技術存在,並不是說它的工作原理是適合你的目的。

1

我結合了你的兩個答案。我將flush()添加到我的PHP循環的末尾,並將我的JS代碼更改爲以下內容。它可能不是100%可靠的,但它是我擁有的最佳解決方案。多謝你們!

if (xmlhttp.readyState==3) 
{ 
    document.getElementById("add_video_feed").innerHTML=xmlhttp.responseText; 
} 
if (xmlhttp.readyState==4) 
{ 
    document.getElementById('add_video_feed_load_img').style.display='none'; 
}