《jQuery、jQuery UI及jQuery Mobile技巧與示例》——9.4 技巧：使用AJAX加載外部頁面

本節書摘來自異步社群《jquery、jquery ui及jquery mobile技巧與示例》一書中的第9章，第9.4節，作者：【荷】adriaan de jonge , 【美】phil dutson著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

至此，示例加載的頁面都是已經存在于html中的。它們都是把哈希标記和已經存在于dom樹中的id關聯在一起。

随着網站的擴大，在一個html中加載所有的頁面變得不太可能了。使用jquery mobile能很容易地建立指向其他頁面的連結，這和普通web應用程式中的做法是一樣的。如代碼清單9-4所示，連結是一模一樣的。

不同之處在于jquery mobile處理連結的方式。當連結位址指向的域和目前頁面的域相同，預設是使用ajax請求加載的。可以通過特定的設定關掉這個功能，稍後本章會有示範。另外，如果連結位址指向了不同的域，則将和普通網站的連結一樣對待。

使用ajax加載的優點是可以提供平滑的過渡動畫，并且頁面會存儲在 dom 樹中。這就可以快速地導航回先前的頁面而不用重新請求伺服器。缺點是記憶體消耗較大。在一個資源有限的裝置上，這就會成為一個問題。

提示

當在本地開發時，你應該使用web伺服器。如果使用jquery mobile時不使用伺服器，ajax 請求将會失敗，你将會看見錯誤資訊，要麼在螢幕上要麼在控制台中。盡管某些浏覽器允許通路（甚至是通過ajax調用）本地檔案，但是隻要可能，最好還是盡量模拟生産環境。

代碼清單9-4　連結至外部頁面

第24行和第25行提供了兩種不同的連結至外部檔案的方法。事實上，你可能不想在所有的連結上都使用data-prefetch屬性，因為這會為每個連結建立一個額外的http請求，将會降低網站渲染和加載的速度。那些你确定會被通路的連結除外。點選第一個連結時将會加載頁面。第二個連結會在“背後”盡快地預加載（preload）資料，進而能加快導航的速度。

代碼清單9-5提供了要加載的外部頁面的示例。

代碼清單9-5　提供要加載的外部頁面

請注意這個示例的頭部中沒有包含任何css或者javascript。在這個示例中，這麼做主要是為了證明頁面是使用ajax加載的，第一張頁面中的腳本和css檔案仍舊存在。

在生産環境中，還是提供腳本和css為好，因為有人可能直接通路到這個檔案的連結。你可以試試，但頁面将會失去jquery mobile的外觀。

請特别注意url位址欄發生了什麼。盡管頁面是用ajax加載的，url卻依然變化為新的位址。這有助于“書簽功能”（bookmarkability）和導航。