JQuery Address full-site AJAX case details

This article will introduce you to the full-site AJAX case details of jQuery Address. In order to improve user experience and improve the front-end page effect, more and more Web applications and websites of enterprises or individual groups are available, the dynamic content loading method is adopted without refreshing new pages, and various loading effects are also emerging. Especially for mobile websites, front-end design is even more demanding. The wait time and display method generated by refreshing the page seriously affect the overall design effect and user experience of the website.

This article describes in detail how to use the jQuery framework and jQuery Address plug-in to implement the most basic full-site AJAX dynamic page content loading function.

Case objective
Take websites with common basic structures as an example to load page content through full-site link AJAX without refreshing new pages, without affecting seo/seo.html "target =" _ blank "> Search Engine indexing. Compatible with WordPress.

Function implementation
The following three constants must be provided to jQuery Address:

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 website root directory is in the root directory of the domain name, the three constants are defined:

The Code is as follows:	Copy code
Var baseurl = 'HTTP: // www. bKjia. c0m ', Request_uri = '/', Request_uri_host = 'HTTP: // www.hzhuti.com ';

The slash characters in the above definition of these constants are very important. errors may cause the website AJAX link to be unable to work.

The main function implementation procedure is as follows:

The Code is as follows:

Copy code

// Global variable: initialization completion mark Var is_loaded = false; ; (Function ($ ){ $ (Document). ready (function (){ // Initialize jQuery Address $. Address. state (request_uri_host). init (function (){ // Bind all required links. The WordPress internal function links, Feed subscription links, and new window links are excluded. $ ("A [href ^ = '" + baseurl + "']: not ([href * = '/wp-admin/']): not ([href * = '/wp-login.php']): not ([href $ = '/feed/']): not ([target = '_ blank']) ") . Address (); // Event when the URL changes }). Change (function (e ){ // Prevent excessive AJAX loading during initialization If (is_loaded) // Load the clicked page content through AJAX My_load_page ($. address. state () + e. path ); Is_loaded = true; }); // Initialize the JS program on the page My_init_after_ajax (); }); }) (JQuery ); // Obtain the content of the new page through AJAX Function my_load_page (url ){ // Display the Loading Layer $ ('# Loading'). fadeIn (); // Call jQuery AJAX $. Ajax ({ Url: url, type: 'get', dataType: 'html ', BeforeSend: function (){}, Success: function (data, textStatus, XMLHttpRequest ){ // Fade in and fade out in a timely manner # all-layer content, which can be adjusted to the desired animation effect $ ('# 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 ); //... In addition to modifying # all layer content, you can also modify other layers and <title> // Initialize the JS program on the page My_init_after_ajax (); }); } }); } // Initialize the JS program on the page Function my_init_after_ajax (){ // Hide the Loading Layer $ ('# Overlay'). fadeOut (); //... Initialize JS programs on various pages }

WordPress + jQuery Address

In WordPress, apart from the main JS program that can be directly put into the Theme JS file, constant definitions need to be passed to the foreground by WordPress Theme PHP. The implementation method is as follows:

The Code is as follows:

Copy code

// The callback process for loading js/CSS files in WordPress, which is generally located in Theme functions. php or other include files Function my_enqueue_scripts_frontend (){ // Load the Theme main style table 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 ); // Enable the nested reply function of the front-end comment 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 actual parameters can still be passed here, such as calling the WordPress built-in AJAX function and calling the Theme element file URI. // 'Ajaxurl' => admin_url ('admin-ajax. php '), // 'Tplurl' => get_stylesheet_directory_uri (), )); } Add_action ('wp _ enqueue_scripts ', 'My _ enqueue_scripts_frontend ');

In this WordPress case, the Theme frontend/js/all. js program is as follows:

The 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