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,fals(www.111cn.net)e).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 程序
from:http://www.111cn.net/wy/jquery/49267.htm

时间: 2024-10-25 23:36:28

jQuery Address全站 AJAX 完整案例详解的相关文章

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

JQuery中$.ajax()方法参数详解 (转)

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

javascript AJAX与Comet详解

          博客专家福利      [限时活动]建专辑得大奖       专访荣浩:流程的永恒之道      当青春遇上互联网,能否点燃你的创业梦      推荐有礼--找出您心中的技术大牛 javascript AJAX与Comet详解 分类: javascript2012-12-24 17:39 367人阅读 评论(0) 收藏 举报 XMLHttpRequest对象 在IE5中,XHR对象是通过MSXML库中的ActiveX对象实现的.在IE中可能会遇到三种不同版本的XHR对象,即M

$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

$.ajax()所有参数详解

原文:https://www.cnblogs.com/everest33Tong/p/6159700.html [一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetu

jquery图片播放插件Fancybox使用详解

今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. Fancybox的项目主页地址:http://fancybox.net/ Fancybox的特点如下: 可以支持图片.html文本.flash动画.iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动插件(mouse wheel plugin)包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片

Oracle 10g创建表空间的完整步骤详解

本文我们主要介绍了Oracle 10g创建表空间的完整步骤,包括表空间的创建与删除.为应用创建用户以及权限的授予等操作,希望能够对您有所帮助. AD:WOT2014:用户标签系统与用户数据化运营培训专场 Oracle 10g数据库中,当在数据库中创建用户时,基于应用性能和管理方面的考虑,最好为不同的用户创建独立的表空间. 那么创建表空间的步骤是怎样实现的呢?本文我们主要就介绍了这一部分内容,接下来就让我们一起来了解一下这部分内容吧. 1.创建表空间 不论是Lnux环境,还是Wndows环境,都要

jQuery上传插件Uploadify使用详解(转发原作者冯威)

jQuery上传插件Uploadify使用详解 本文Uploadify版本为2.1.0,已经过时,截止(2016-09-25)最新版本3.2.1的详细介绍请移步<jQuery上传插件Uploadify使用详解(3.2.1)> Uploadify是jQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 首先按下面的步骤来实现一个简单的

jQuery的next()函数的使用详解

jQuery的next()函数的使用详解:此函数在代码中有大量的应用,下面就结合实例介绍一下此函数的用法.它可以取得一个包含匹配元素集合中每一个元素紧邻的后面同辈元素的元素集合.在上面的概念中有下面几点需要特别注意:1."紧邻",也就是说获取的元素必须是匹配元素所紧邻的,中间不能够有其他的元素间隔.2."同辈",也就是说获取的元素必须和匹配是同级元素.3."后面",也就是i说获取的元素必须位于匹配元素的后面.语法结构: $(selector).n