better-ajaxify

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.

LIVE DEMO

Index

• Installing
• Links
• Forms
• Custom events
• Browser support

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-empty target attribute;
• when <a> has non-http(s) url as the href 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-empty target attribute;
• when a <form> has non-http(s) url as the action 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