天天看點

使用Ajax建立的Server Push和Iframe建立的Comet

1、Ajax建立的Server Push

隻能由背景向前台推送資料,如果前台想發送資料給背景則需要單獨再發一個請求。

這裡使用的例子就是一個線上CD銷售頁面,前台發起ajax請求,背景随機取一個數,從現在庫中減去獲得的随機數,然後傳回給前台;

前台如果想改變庫存的資料,在文字輸入框輸入相應的數量,然後送出給背景。

界面大緻是這個樣子

使用Ajax建立的Server Push和Iframe建立的Comet

圖中的“27”就是剩餘的CD數量,上文提及的“庫存”實際是使用一個txt文本進行儲存的。

需要說明的,它的首頁中form的預設送出行為沒有被阻止掉,将會導緻頁面被重新整理。可以使用onsubmit=”return false;”進行阻止,AjaxLongPolling.js的初始化函數中對form的submit再進行監聽就可以了。

目錄結構大緻是這樣子:

使用Ajax建立的Server Push和Iframe建立的Comet

頁面載入完成後,向背景發送ajax請求,當ajax成功傳回後将重複執行上一次操作(直到傳回的數量為0,則中止上述循環)

想要修改背景的“庫存”數量,則需要另外一個ajax

雖然是同一個送出位址LongPolling.php,但在LongPolling.php中是針對參數進行了處理的

2、使用Iframe建立的Comet

這裡針對IE和其它浏覽器做了不同的處理,因為IE中的htmlfile添加的iframe,在浏覽器目前視窗的底部将看不到加載進度(看上去比較平靜),而其它浏覽器則會出現一個loading的狀态。

這個示例就兩個檔案:html頁面、php頁面,實作的效果就是取目前伺服器的時間,然後在前台頁面顯示。

運作的效果大緻如下圖所示(IE、Chrome):

使用Ajax建立的Server Push和Iframe建立的Comet
使用Ajax建立的Server Push和Iframe建立的Comet

HTML頁面的代碼:

PHP頁面的代碼:

參考連結: