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      = 'http://www.111cn.net/',    
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 程序如下：

 代码如下