JQuery address Full-site AJAX complete case detailed

This article details how to use the jquery framework and the jquery address plug-in to achieve the most basic full-station AJAX dynamic loading of page content.

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

function realization
There are three constants that need to be provided to the JQuery address, respectively:

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

When the site root is in the domain name root directory, the three constants are defined as:

The code is as follows	Copy Code
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 pass-site AJAX link to not work.

The main function realization program is as follows:

The code is as follows

Copy Code

Global variables: Initializing completion tag var is_loaded = false; ;(function ($) { $ (document). Ready (function () { Initialize JQuery address $.address.state (Request_uri_host). Init (function () { Bind all required links, which screen out WordPress's internal feature links, feed subscription links, and new window links $ ("a[href^=" "+baseurl+" "]:not" ([href*= '/wp-admin/']): not ([href*= '/wp-login.php ']): not ([href$= '/feed/']): not Target= ' _blank ']) . address (); Event when the URL has changed }). Change (function (e) { Prevent unwanted AJAX from loading the current page when initializing if (is_loaded) AJAX loads the clicked page content My_load_page ($.address.state () + E.path); Is_loaded = true; } ); Page Initialization JS Program My_init_after_ajax (); } ); }) (JQuery); AJAX gets new page content process function My_load_page (URL) { Show Loading Layer $ (' #loading '). FadeIn (); Invoke JQuery AJAX $.ajax ({ Url:url, type: ' Get ', DataType: ' HTML ', Beforesend:function () {}, Success:function (data, Textstatus, XMLHttpRequest) { Humanization fades in and replaces #all layer content in time, can adjust to the desired animation effect here $ (' #all '). Stop (True,false). Animate ({' opacity ': 0}, Function () { $ (' HTML, Body '). scrolltop (0); $ (' #all '). html ('). Append ($ (' <div> ' +data+ ' </div> '). Find (' #all '). HTML ()) . Stop (True,false). 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

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

The code is as follows

Copy Code

WordPress loading Js/css file callback procedure, typically located in Theme functions.php or other included 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 front end 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 invoking WordPress's built-in AJAX functionality, invoking the Theme element file URI, etc. ' 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 is as follows	copy code
if (' Undefined '!= typeof theme)   var baseurl          = Theme.baseurl,       request_uri      = Theme.request_uri,       request_uri_host = theme.request_uri_host;   //... JS program