JQuery address Full-site AJAX complete Case study

This article details how to use the jquery framework and the jquery Address plug-in to achieve the most basic full-site AJAX dynamic load page content functionality.

Case objectives
The common basic structure of the site as a case, to achieve full-site link AJAX loading page content, do not refresh the page, does not affect the seo/seo.html "target=" _blank "> Search engine included. also compatible with WordPress.

function implementation
There are three constants that need to be provided to the JQuery Address, namely:

Code to copy code as follows
var baseurl = ' Http://www.example.com/test/blog ',
Request_uri = '/test/blog/',
Request_uri_host = ' http://www.example.com ';

When the site root is at the root of a domain name, the three constants are defined as:

Code to copy code as follows
var baseurl = ' Http://www.111cn.net ',
Request_uri = '/',
Request_uri_host = ' http://www.111cn.net ';

It is important to define the slash characters in these constant data, which will cause the link to not work.

The main function implementation program is as follows:

Code to copy code as follows
Global variables: Initializing completion tags
var is_loaded = false;

;(function ($) {
$ (document). Ready (function () {

Initializing the JQuery Address
$.address.state (Request_uri_host). Init (function () {
Bind all the necessary links, here screen in addition to WordPress internal features link, feed subscription link, and new Window link
$ ("a[href^= '" "+baseurl+" ']:not ([href*= '/wp-admin/']): not ([href*= '/wp-login.php ']): not ([href$= '/feed/']): not [ target= ' _blank ') ")
. address ();
Events when a URL has changed
}). Change (function (e) {
Prevents extra AJAX from loading the current page when initializing
if (is_loaded)
AJAX loads the content of the clicked page
My_load_page ($.address.state () + E.path);
Is_loaded = true;
} );

Page Initialization JS Program
My_init_after_ajax ();

} );
}) (JQuery);

AJAX get new page content process
function My_load_page (URL) {
Show Loading Layer
$ (' #loading '). FadeIn ();
Calling JQuery AJAX
$.ajax ({
Url:url, type: ' GET ', DataType: ' HTML ',
Beforesend:function () {},
Success:function (data, Textstatus, XMLHttpRequest) {
Humanized fade-in and timely replacement of #all-level content, where you can adjust to the desired animation effect
$ (' #all '). Stop (True,false). Animate ({' opacity ': 0}, +, 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);
// ... In addition to modifying #all layer content, you can also modify other layers and <title>
Page Initialization JS Program
My_init_after_ajax ();
} );
}
});
}

Page Initialization JS Program
function My_init_after_ajax () {
Hide Loading Layer
$ (' #overlay '). FadeOut ();
// ... Various page Initialization JS program
}

WordPress + jQuery Address

Applied to WordPress, in addition to the main JS program can be placed directly into the Theme JS file, the definition of the constant needs WordPress Theme PHP to pass to the foreground. The implementation method is as follows:

Code to copy code as follows
WordPress load Js/css File callback procedure, usually located in Theme functions.php or other include files
function My_enqueue_scripts_frontend () {

Load Theme main style sheet style.css file
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);

Turn on frontend comment nested reply function
if (Is_singular ()) wp_enqueue_script (' comment-reply ');

Pass the JS variable to the loaded JS program named ' All ' and encapsulate it in the ' Theme ' object
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 '),
Other parameters that are actually needed can still be passed here, such as calling WordPress built-in AJAX functionality, invoking the Theme element file URI, and so on.
' Ajaxurl ' = Admin_url (' admin-ajax.php '),
' Tplurl ' = Get_stylesheet_directory_uri (),
) );

}
Add_action (' wp_enqueue_scripts ', ' my_enqueue_scripts_frontend ');

This WordPress case Theme front-end/js/all.js program is as follows:

Code to copy code as follows
if (' undefined '! = typeof theme)
var BaseURL = Theme.baseurl,
Request_uri = Theme.request_uri,
Request_uri_host = Theme.request_uri_host;

// ... JS Program
From:http://www.111cn.net/wy/jquery/49267.htm

JQuery address Full-site AJAX complete Case study