JS AJAXify PushState: Make link clicks be converted into AJAX requests

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 155 All time: 325 This week: 4Up
Version License JavaScript version Categories
ajaxifypushstate 1.0BSD License1HTML, AJAX, Web services
Description 

Author

Martin Barker

This object can make link clicks be converted into AJAX requests, effectively making any web site a web application.

It can traverse the current Web page, alter the current links, so when the user clicks on them, it sends HTTP requests to the respective link URL using AJAX and loads the next page.

It uses PushState to update the page browsing history so when the user go back it restores the previous page.

The object alters all the page links with external HTTP or HTTPS URLs and replaces the given element selector with content from the AJAX response.

Innovation Award
JavaScript Programming Innovation award winner
January 2017
Winner		 AJAX allows to load page content faster as it does not require to load the whole page again.

However, to take advantage of AJAX you need to change pages to send AJAX requests when the user interacts with it. You also need to update the page history, so the browser goes back to the right page when the user hits the back button.

This package provides a solution for both problems. It changes page links so when the users click on them the code sends AJAX requests to the server in order to load the next page.

At the same time, it updates the page history state, so the back button clicks will make the browser go back to the right pages.

Manuel Lemos
Picture of Martin Barker
  Performance   Level  
Name: Martin Barker <contact>
Classes: 10 packages by
Country: United Kingdom

Level 3 StarStarStar

 Innovation award
Innovation award
Nominee: 6x

Winner: 4x

Example

// Basic Full Page Setup Example
var state = new AjaxifyPushState();

// Advanced Controlled Page Setup
var state = new AjaxifyPushState({
  "Ajaxify":true, // should we auto handle the ajax calls
  "PushState":true, // enables auto handle of the Push State
  "element":"body"  // the element to target all content will be erased and new content will be placed in all matching this selector clause
})

  Files folder image Files (2)  
File Role Description
Plain text file ajaxify.js Class Main Class
Accessible without login Plain text file example.js Example Example of Usage

Downloadajaxifypushstate-2017-02-28.zip 1KB
Downloadajaxifypushstate-2017-02-28.tar.gz 1KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:155
This week:0
All time:325
This week:4Up
User Comments (1)
 

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.