RightJS上的PJAX

Question

我剛剛閱讀並對RightJS有興趣。我一直在使用jQuery作爲我的主要JavaScript框架，但現在我想學習新的東西。不過，我想知道RightJS可以做PJAX。我知道，只要您瞭解PJAX的工作原理，就可以在任何框架中實現它。但是，我希望有人能夠指導我如何建立這個。

在此先感謝您的幫助。

Answer 1

對於大部分PJAX包括：

1. 執行Ajax請求來獲取給定的網頁的HTML（網頁可以爲了檢查頭知道它是否應該返回完整的HTML或只是內容將被改變）
2. 將返回的HTML添加到容器中。
3. 使用pushstate歷史API更新瀏覽器位置。

爲確保它們全部降級優雅，您需要將PJAX監聽器應用於使用JavaScript的內部鏈接，以便鏈接對於禁用JS的用戶都能正常工作。它還應該做一些功能檢查，以確保用戶瀏覽器支持pushstate API等（並且如果不再將所有內容保留爲普通鏈接）。

其實我在考慮看看的東西如何才能實現實現PJAX的原生JS版的自己，如果你有興趣：https://github.com/thybag/PJAX-Standalone/blob/master/pjax-standalone.js

此外，您還可以瀏覽JQuery的PJAX的源位置：https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js

Answer 2

像@Carl一樣，我實現了pushState + AJAX導航的獨立實現，請參閱HTMLDecor。

PJAX的理念是：

1. 頁面包含獨特的內容+網站的裝飾（橫幅，導航，廣告，樣式表等）。
2. 當用戶第一次訪問一個網站時，發送一個完整的頁面。
3. 當用戶導航到網站中的新頁面時，只發送唯一內容，而不是完整頁面。 （雖然PJAX可以配置爲從完整頁面中提取獨特內容）。

HTMLDecor的理念是：

1. 頁面包含獨特的內容+一個<link>到現場裝飾+的HTMLDecor.js腳本。
2. 當用戶第一次訪問一個網站時，發送該頁面（主要是獨特的內容）。 在瀏覽器中，HTMLDecor檢查<link>，獲取網站裝飾並將其與網頁合併。
3. 當用戶導航到新頁面時，該頁面已經是唯一內容，因此按原樣發送。 HTMLDecor將更新頁面的唯一內容並呼叫pushState()來更新URL。

換句話說，把所有的網站的裝飾，在一個單獨的文件，並讓HTMLDecor.js在瀏覽器中的獨特的內容合併。之後，pushState支持免費 - 您不需要配置任何東西。

HTMLDecor.js在縮小和壓縮時只有6kB，與大多數js框架相比這是很小的。 您可以（應該）將RightJS從常規頁面中刪除（應只包含唯一內容），並且只將其放置在網站裝飾頁面中。

如果您看到HTMLDecor的演示，可能這一切都會更有意義。看看我的blog。如果您查看頁面源代碼，您將看到頁面頂部的廣告，底部的導航欄和聯繫人彈出窗口不是頁面源代碼的一部分。它們全部添加了AJAX。

當您導航到其中一篇博客文章時，使用了pushState + AJAX（如果瀏覽器支持），並且您看到廣告和導航欄未刷新。

還有一篇文章，其中更詳細的是introduces HTMLDecor。

Answer 3

PJAX是膽小鬼，那是官方:)

使用AJAX + History.js（它有掛鉤RightJS）