jQuery Address全站 AJAX 完整案例詳解

本文詳細介紹如何利用 jQuery 架構以及 jQuery Address 外掛程式實現最基本的全站 AJAX 動態載入頁面內容的功能的方法。

案例目標
　　以常見基本結構的網站為案例，實現全站連結 AJAX 載入頁面內容，不重新整理頁面，不影響seo/seo.html" target="_blank">搜尋引擎收錄。同時相容 WordPress。

功能實現
　　需要提供給 jQuery Address 的有三個常量，分別是：

代碼如下	複製代碼
var baseurl          = 'http://www.example.com/test/blog',     request_uri      = '/test/blog/',     request_uri_host = 'http://www.example.com';

當網站根目錄處於網域名稱根目錄時，三個常量的定義為：

代碼如下	複製代碼
var baseurl          = 'http://www.111cn.net',     request_uri      = '/',     request_uri_host = 'http://www.111cn.net';

以上定義這幾個常量資料中的斜杠符非常重要，有誤將導致通站 AJAX 連結不能工作。

主體功能實現程式如下：

代碼如下

複製代碼

// 全域變數：初始化完成標記 var is_loaded = false;   ;(function($) { $(document).ready( function() {     // 初始化 jQuery Address   $.address.state( request_uri_host ).init( function() {     // 綁定所有需要的連結，此處篩除了 WordPress 內部功能連結、Feed 訂閱連結，以及新視窗連結     $("a[href^='"+baseurl+"']:not([href*='/wp-admin/']):not([href*='/wp-login.php']):not([href$='/feed/']):not([target='_blank'])")       .address();   // 當 URL 發生改變時的事件   } ).change( function(e) {     // 防止初始化時多餘 AJAX 載入當前頁面     if( is_loaded )       // AJAX 載入所點擊的頁面內容       my_load_page( $.address.state() + e.path );     is_loaded = true;   } );     // 頁面初始化 JS 程式   my_init_after_ajax();   } ); })(jQuery);   // AJAX 擷取新頁面內容過程 function my_load_page( url ) {   // 顯示 Loading 層   $('#loading').fadeIn();   // 調用 jQuery AJAX   $.ajax({     url: url, type: 'GET', dataType: 'html',     beforeSend: function() {},     success: function(data, textStatus, XMLHttpRequest) {       // 人性化淡入淡出並適時替換 #all 層內容，此處可以調整為所需的動畫效果       $('#all').stop(true,false).animate( {'opacity': 0}, 500, function() {         $('html, body').scrollTop(0);         $('#all').html('').append( $('<div>'+data+'</div>').find('#all').html() )           .stop(true,false).animate( {'opacity': 1}, 500 );         // ... 除了修改 #all 層內容，此處還可以修改其它層以及 <title> 等         // 頁面初始化 JS 程式         my_init_after_ajax();       } );     }   }); }   //頁面初始化 JS 程式 function my_init_after_ajax() {   // 隱藏 Loading 層   $('#overlay').fadeOut();   // ... 各種頁面初始化 JS 程式 }

WordPress + jQuery Address

應用於 WordPress 中，除了主體 JS 程式可以直接放入 Theme 的 JS 檔案中，常量的定義需要 WordPress Theme PHP 傳遞給前台。實現方法如下：

代碼如下

複製代碼

// WordPress 載入 JS/CSS 檔案回調過程，一般位於 Theme 的 functions.php 或其它包含檔案 function my_enqueue_scripts_frontend() {     // 載入 Theme 主樣式表 style.css 檔案   wp_enqueue_style( 'all', get_stylesheet_uri() );     wp_enqueue_script( 'jquery' );   wp_enqueue_script( 'jquery.address', get_stylesheet_directory_uri() . '/js/jquery.address.min.js', array( 'jquery' ) );   wp_enqueue_script( 'all',            get_stylesheet_directory_uri() . '/js/all.js', array( 'jquery' ), false, true );     // 開啟前端評論嵌套回複功能   if ( is_singular() ) wp_enqueue_script( 'comment-reply' );     // 傳遞 JS 變數給已載入的名為 'all' 的 JS 程式，並封裝在 'theme' 對象中   wp_localize_script( 'all', 'theme', array(     'baseurl'          => home_url(),     'request_uri'      => $_SERVER['REQUEST_URI'],     'request_uri_host' => ( ( isset( $_SERVER['HTTPS'] ) && $_SERVER['HTTPS'] == 'on' ) ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'],     // 此處仍可傳遞其它實際需要的參數，如調用 WordPress 內建 AJAX 功能、調用 Theme 元素檔案 URI 等     // 'ajaxurl' => admin_url( 'admin-ajax.php' ),     // 'tplurl'  => get_stylesheet_directory_uri(),    ) );   } add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts_frontend' );

此 WordPress 案例 Theme 前端 /js/all.js 程式如下：

代碼如下	複製代碼
if( 'undefined' != typeof theme )   var baseurl          = theme.baseurl,       request_uri      = theme.request_uri,       request_uri_host = theme.request_uri_host;   // ... JS 程式