README
A simple PJAX engine for websites
The library helps to solve the performance problem for HTML pages and also improves user experience. There is a term called "Full AJAX website" that defines a web site that instead of regular links or forms uses AJAX requests. After including an extra library on your page and simple adaptation on backend each navigation change triggers a partial reload instead of full refetching and rerendering of the whole page. That experience is always faster and nicer: user doesn't see white flashes, moreover you can show cool animations instead.
Index
Installing
Library distributed via NPM:
$ npm install better-ajaxify --save-dev
This will clone the latest version of the better-ajaxify into the node_modules
directory at the root of your project.
Then append the following html elements on your page:
<script src="node_modules/better-ajaxify/dist/better-ajaxify.js"></script>
Links
HTML element <a>
allows to navigate to a url. Library modifies this behavior to prevent a white flash. Request to server is made using Fetch API, and response body replaces the current document without a full page reload.
In some cases regular <a>
behavior preserved:
- when
href
attribute value has only a hash; - when
<a>
has non-emptytarget
attribute; - when
<a>
has non-http(s)
url as thehref
attribute value (tel:
,mailto:
etc.).
Methods from the list above can be used in markup. When you need to keep regular <a>
behavior in JavaScript - call method Event#preventDefault
inside your click
event handler for an appropriate element.
Forms
HTML element <form>
serializes user input data and to sumbits it to new server url specified in the action
attribute. Then browser triggers full page reload with the new url. Library modifies this behavior to prevent a white flash. Request to server is made using Fetch API, and response body replaces the current document without a full page reload.
In some cases regular <form>
behavior is not modified:
- when a
<form>
has non-emptytarget
attribute; - when a
<form>
has non-http(s)
url as theaction
attribute value (tel:
,mailto:
etc.).
Methods from the list above can be used in markup. When you need to keep regular <form>
behavior in JavaScript - call method Event#preventDefault
inside your submit
event handler for an appropriate element.
Custom events
The library exposes set of custom events for advanced interaction.
Event name | Type of Event#detail |
Description |
---|---|---|
ajaxify:serialize |
FormData |
Event is trigerred for forms only and contains user input data |
ajaxify:fetch |
Request |
Event is trigerred when a navigation AJAX request started with request details |
ajaxify:load |
Response |
Event is trigerred when a navigation AJAX request ends and contains server response data |
ajaxify:render |
Document |
Triggered when a web page ready to update it's visual state to a new one |
Browser support
Desktop
- Chrome
- Safari 6.0+
- Firefox 16+
- Opera 12.10+
- Internet Explorer 8+ (see notes)
Mobile
- iOS Safari 6+
- Android 2.3+
- Chrome for Android