PJAX

PJAX 是一種透過 AJAX 所取得網頁內容,達到不需換網頁就可以更換網頁內容的技術

在一般的模板引擎他們並沒有支援這樣的功能,因此你會取得整個網頁,

然後透過 JavaScript 獨自將他們分開,造成資源浪費,但在亞凡芽中我們已經準備好這個功能了。

需求

必須要用到 header()footer() 這兩個函式,否則我們沒辦法協助你處理 PJAX 技術。

如何使用

當你決定要使用 PJAX 技術的時候,你需要把你的頁頭和頁腳分離,這樣我們才能夠只傳送中間的內容區段,

這個用法很簡單,假設你拆成了 header.jadecontent.jade 還有 footer.jade

你可以透過下列這樣的用法使用亞凡芽。

$Avane->header('header', ['title' => '小安網站'])
      ->render('content')
      ->footer('footer');

一旦亞凡芽接收到 PJAX 標頭,就僅會輸出部分內容,而不會輸出整個網頁區塊,十分地簡單。

傳送 PJAX 標頭

要讓亞凡芽知道這是一個 PJAX 請求,而不是一個正常的網頁請求,

你需要傳送一個 $_SERVER['HTTP_X_PJAX'] 標頭,而內容請看下面的說明,

當然,你也可以在設置中變更 HTTP_X_PJAX 的名字。

名稱 說明
title 網頁的標題。
html 網頁的整個 HTML 原始碼。
content 去掉頁頭和頁腳的 HTML 原始碼。
footer 頁腳的 HTML 原始碼。
header 頁頭的 HTML 原始碼。
waste 總編譯時間。

標頭內容以逗點區開你所需要的資料,像這樣 title, html, content

會發生什麼事情?

倘若你的網頁用到了 header(), load(), footer(),一旦亞凡芽接收到了 PJAX 得請求,將會回傳一個 JSON 資料陣列。

假設你傳送了一個帶有 title, html, content$_SERVER['HTTP_X_PJAX'] 標頭,

你會收到一個 JSON 資料大概像下面這樣。

{
  "title"  : "網站標題",
  "html"   : "<html><head><titl...",
  "content": "<div>Hello!</div>"
}

results matching ""

    No results matching ""