More and more websites are beginning to use AJAX no-refresh loading, and many WordPress themes have also adopted this feature. Full-site AJAX may seem technically complex, but it is actually very easy to implement because some experts have already written the relevant functions. Developers only need to make slight modifications to the parameters to use this technology on their own websites. Below, I will share some code that enables WordPress to implement full-site AJAX.
JavaScript Code
var ajaxhome='';
var ajaxcontent = 'content';
var ajaxsearch_class = 'searchform';
var ajaxignore_string = new String('#, /wp-, .pdf, .zip, .rar, /goto');
var ajaxignore = ajaxignore_string.split(', ');
var ajaxloading_code = 'loading';
var ajaxloading_error_code = 'error';
var ajaxreloadDocumentReady = false;
var ajaxtrack_analytics = false
var ajaxscroll_top = true
var ajaxisLoad = false;
var ajaxstarted = false;
var ajaxsearchPath = null;
var ajaxua = jQuery.browser;
jQuery(document).ready(function() {
ajaxloadPageInit("");
});
window.onpopstate = function(event) {
if (ajaxstarted === true && ajaxcheck_ignore(document.location.toString()) == true) {
ajaxloadPage(document.location.toString(),1);
}
};
function ajaxloadPageInit(scope){
jQuery(scope + "a").click(function(event){
if (this.href.indexOf(ajaxhome) >= 0 && ajaxcheck_ignore(this.href) == true){
event.preventDefault();
this.blur();
var caption = this.title || this.name || "";
var group = this.rel || false;
try {
ajaxclick_code(this);
} catch(err) {
}
ajaxloadPage(this.href);
}
});
jQuery('.' + ajaxsearch_class).each(function(index) {
if (jQuery(this).attr("action")) {
ajaxsearchPath = jQuery(this).attr("action");;
jQuery(this).submit(function() {
submitSearch(jQuery(this).serialize());
return false;
});
}
});
if (jQuery('.' + ajaxsearch_class).attr("action")) {} else {
}
}
function ajaxloadPage(url, push, getData){
if (!ajaxisLoad){
if (ajaxscroll_top == true) {
jQuery('html,body').animate({scrollTop: 0}, 1500);
}
ajaxisLoad = true;
ajaxstarted = true;
nohttp = url.replace("http://","").replace("https://","");
firstsla = nohttp.indexOf("/");
pathpos = url.indexOf(nohttp);
path = url.substring(pathpos + firstsla);
if (push != 1) {
if (typeof window.history.pushState == "function") {
var stateObj = { foo: 1000 + Math.random()*1001 };
history.pushState(stateObj, "ajax page loaded...", path);
} else {
}
}
if (!jQuery('#' + ajaxcontent)) {
}
jQuery('#' + ajaxcontent).append(ajaxloading_code);
jQuery('#' + ajaxcontent).fadeTo("slow", 0.4,function() {
jQuery('#' + ajaxcontent).fadeIn("slow", function() {
jQuery.ajax({
type: "GET",
url: url,
data: getData,
cache: false,
dataType: "html",
success: function(data) {
ajaxisLoad = false;
datax = data.split('<title>');
titlesx = data.split('</title>');
if (datax.length == 2 || titlesx.length == 2) {
data = data.split('<title>')[1];
titles = data.split('</title>')[0];
jQuery(document).attr('title', (jQuery("<div/>").html(titles).text()));
} else {
}
if (ajaxtrack_analytics == true) {
if(typeof _gaq != "undefined") {
if (typeof getData == "undefined") {
getData = "";
} else {
getData = "?" + getData;
}
_gaq.push(['_trackPageview', path + getData]);
}
}
data = data.split('id="' + ajaxcontent + '"')[1];
data = data.substring(data.indexOf('>') + 1);
var depth = 1;
var output = '';
while(depth > 0) {
temp = data.split('</div>')[0];
i = 0;
pos = temp.indexOf("<div");
while (pos != -1) {
i++;
pos = temp.indexOf("<div", pos + 1);
}
depth=depth+i-1;
output=output+data.split('</div>')[0] + '</div>';
data = data.substring(data.indexOf('</div>') + 6);
}
document.getElementById(ajaxcontent).innerHTML = output;
jQuery('#' + ajaxcontent).css("position", "absolute");
jQuery('#' + ajaxcontent).css("left", "20000px");
jQuery('#' + ajaxcontent).show();
ajaxloadPageInit("#" + ajaxcontent + " ");
if (ajaxreloadDocumentReady == true) {
jQuery(document).trigger("ready");
}
try {
ajaxreload_code();
} catch(err) {
}
jQuery('#' + ajaxcontent).hide();
jQuery('#' + ajaxcontent).css("position", "");
jQuery('#' + ajaxcontent).css("left", "");
jQuery('#' + ajaxcontent).fadeTo("slow", 1, function() {});
},
error: function(jqXHR, textStatus, errorThrown) {
ajaxisLoad = false;
document.title = "Error loading requested page!";
document.getElementById(ajaxcontent).innerHTML = ajaxloading_error_code;
}
});
});
});
}
}
function submitSearch(param){
if (!ajaxisLoad){
ajaxloadPage(ajaxsearchPath, 0, param);
}
}
function ajaxcheck_ignore(url) {
for (var i in ajaxignore) {
if (url.indexOf(ajaxignore[i]) >= 0) {
return false;
}
}
return true;
}
function ajaxreload_code() {
//add code here
}
function ajaxclick_code(thiss) {
jQuery('ul.nav li').each(function() {
jQuery(this).removeClass('current-menu-item');
});
jQuery(thiss).parents('li').addClass('current-menu-item');
}
A small portion of the code needs to be modified according to your actual situation.
- In the first line, enter the website URL for ajaxhome
- In the second line, enter the container ID name for the website articles in ajaxcontent, which is the part loaded asynchronously
- In the third line, enter the container name of the website search box for ajaxsearch_class, which is generally “searchform”
- In the fourth line, ajaxignore_string specifies the links to exclude from AJAX loading, such as feed sources and so on
- In the sixth line, ajaxloading_code specifies the content displayed while loading; an animation can be set
- In the seventh line, ajaxloading_error_code specifies the content displayed when loading fails; an animation can be set
After modifying the code as described above, save it separately as a JavaScript file and include it in the webpage. The effect will be immediate.
Other Issues
After deploying the AJAX asynchronous loading code, a problem will occur: when the website is opened for the first time, the jQuery animations work normally, but after clicking a webpage and performing an AJAX asynchronous load, all animations stop working. This is because after asynchronous loading, the jQuery code cannot access the elements, so the effects naturally disappear. To solve this problem, the jQuery code also needs to be modified.
The solution is to use the live() event. The usage of the live() event is as follows:
$(selector).live(event,data,function)
event is used to replace actions such as click() and hover(); data is optional and represents the parameters; function is the action to be executed.
For example, a click() event can be rewritten as a live() event. The original code is:
$(".menu-item").click(function(){$(".topmenu").fadeOut(500)});
After modification:
$(".menu-item").live("click",function(){$(".topmenu").fadeOut(500)});
This is a substantial amount of work, so those who need it can give it a try.