2009-12-15 99 views
1

我想知道是否有可能使用jQuery的ajax函數來不斷地返回結果到頁面並相應地進行更新。不斷返回JavaScript/jQuery的Ajax結果?

我的意思是這樣的: - 用戶打完搜索 - jQuery使用AJAX功能來獲得前25分的結果,並將它們添加到表中。 - 當用戶查看該列表時,jQuery一次抓取結果25並將它們添加到表中。

這背後的想法是,說你的用戶搜索有10,000個結果。我想將它們加載到一個由Javascript控制頁面的表格中,這樣我們就不必每次用戶想要轉到下一頁時都返回到服務器。 用戶查看前25個結果所需的時間,我們可能會有下一個50個加載,這意味着我們將有一個非常活潑的接口與所有的結果。

現在確實有一些缺點: - 用戶不能立即去「最後」 - 用戶不能立即排序表(或者如果他們確實可能立即有一個表排序不正確)

不過,我認爲這是一個有趣的想法,並希望嘗試一下......但我不知道從哪裏開始。

如何讓ajax函數繼續運行直到發生某些結果?您可以將結果添加到表中並讓該表不斷更改而不會給用戶帶來糟糕的界面體驗?

+0

你可以很容易地執行排序,你也可以有最後一次...這只是用不同的排序(等)再次運行原始查詢,你可以重新開始你的25頁結果頁面...作爲如果他們已經重新搜索......然後開始在背景中重新加載25次...... – davidsleeps 2009-12-15 03:48:37

回答

0

JQuery爲$.post,$.get$.ajax提供了回調。所以,你可以編寫一個函數來處理輸入,並繼續將該函數作爲回調提供,直到結果集完成加載。

如果用戶嘗試對錶進行排序或跳轉結果列表,那麼表需要重置,並且下一個回調將需要檢測排序/分頁更改並將這些變量發送到服務器。

事情是這樣的:

var page_number= 1; 
var sort_by= 'column_name'; 
var sort_direction= 'asc'; 

function handle_result(data) { 
    // Do something with the result/return data from the POST 
    .... 
    // $.post again . . . when there are more rows 
    if (data.has_more_rows) { 
    page_number++; 
    $.post('process.php', { page_number: page_number, sort_by: sort_by, sort_direction: sort_direction }, handle_result); 
    } 
} 

// The initial post . . . 
$.post('process.php', { page_number: page_number, sort_by: sort_by, sort_direction: sort_direction }, handle_result); 
0

不能把你的回調? (僞)

var keepCalling = function(){ $.getJSON(url,function(data){ 
    if(data.last){ 
     //Finish 
    } else { 
    sleep(5); 
    keepCalling(); 
    }) 
}; 
0

你可以使用一個回調,然後在返回的數據只是有一個標誌,上面寫着它是否是最後一組數據。然而,這裏有一些缺點,你會想要考慮。在JavaScript中存儲信息不是免費的。所以如果你存儲了10000個結果,那麼這會花費你一些東西。多少將取決於記錄的大小。您可能遇到的另一個問題是,如果用戶在您的循環恰好解析了幾條記錄的響應時嘗試執行其他操作,他們會注意到延遲,因爲JavaScript是單線程的。所以有可能通過讓你的頁面更快捷,你會讓它變慢。最後,請記住,您將製作大量AJAX請求,這些請求永遠不會被使用,因此您會在服務器上放置一些不必要的負載。

通常情況下,折中的人做的只是預加載和緩存一些數據,而不是全部。所以我建議預加載可能在下一頁或兩頁,然後緩存一些頁面,所以如果用戶備份,那很快。 YUI datasource是處理這些複雜性中的一部分的很好的代碼。

對不起,在這裏扮演魔鬼的擁護者,只是要記住一些事情。

0

看來,提供的兩個解決方案都會爲每25個結果觸發一個ajax調用。所以如果有10000條記錄,那意味着400個Ajax調用......每頁加載!這種打破了ajax呼叫的目的。

更好的解決方案可能是在當前頁面之後爲一個頁面加載足夠的數據。一旦用戶訪問上次加載的頁面,然後重新加載另一批數據。始終保持在用戶前面一頁。

0

做這樣的事情的最好方法不是不斷地抓取儘可能多的結果,而只是抓住你的用戶需要的東西。

在一個基本的AJAX分頁表中,每頁顯示25個結果,您可以抓取頁面加載的第一頁,當用戶點擊頁面2鏈接時,抓住26-50,第3頁= 51-75等。 ..如果你想變得更聰明一些,並且讓應用更快一點,那麼當他們查看當前設置時,你會抓住下一組。

function get_results(start_record) { 
    $.get("results.php", function(data) { 
     // do something with the data 
    }); 
} 

活動:

// Page load 

$(document).ready(function() { 
get_results(0); //page 1 
get_results(25); // page 2 
}); 


// When user clicks second page link, results appear instantly, meanwhile... 
get_results(50); // 3rd page data 

如果你真的願意,你可以在同一時間搶100。正如其他人所提到的,要小心你的每塊大小,抓得太多可能會打敗使用AJAX的目的。

此外,如果你不需要數據,刪除variable_name它釋放一些內存。