defunkt/jquery-pjax
Jquery Pjax
jquery-pjax is a client-side library that combines Ajax requests with the HTML5 History API to replace page content without triggering a full browser reload. It fetches HTML fragments from the server and updates the browser URL using pushState, preserving the page layout and assets while only swapping a designated container's content. The library emits custom JavaScript events at each stage of the request lifecycle, enabling external handlers to respond to loading, success, and error states.
The project distinguishes itself through its event-driven navigation model and server-side integration. It detects the X-PJAX header on incoming requests, allowing the server to return only the inner container HTML instead of the full page layout. A versioned cache busting mechanism uses a header and meta tag to force a full page reload when server-side assets or layout change. The library also supports form serialization via Ajax, programmatic navigation through a JavaScript API, and container content reload without adding a browser history entry.
The documentation covers server configuration for header detection and fragment delivery, as well as client-side setup for lifecycle event handling and programmatic triggers.
Features
- AJAX Page Loaders - Replaces page content via Ajax and updates the browser URL using pushState without a full page reload.
- Ajax Request Lifecycle Hooks - Emits custom JavaScript events at each stage of the request lifecycle for external handler attachment.
- Pjax Navigation Triggers - Initiate a pjax request from custom JavaScript code by specifying the URL and target container manually.
- Server-Driven Fragment Replacement - The server detects the X-PJAX header and returns only the inner container HTML instead of the full layout.
- AJAX Content Swapping - Fetches HTML fragments via XMLHttpRequest and swaps them into a designated DOM container.
- Pjax Lifecycle Hooks - Respond to each stage of a pjax request with custom handlers for loading indicators, error recovery, and content replacement.
- Partial Page Loaders - Provides a client-side library for loading only a container's HTML from the server while preserving layout and assets.
- AJAX Request Lifecycle Hooks - Emits lifecycle events for loading, success, and error states during pjax requests.
- Non-Reloading History Updates - Updates the browser URL and history using the HTML5 History API without triggering a full page reload.
- Pjax Header Detection - Detect the X-PJAX header on the server and return only the inner container HTML, skipping the full page layout.
- Programmatic Navigation - Exposes a JavaScript method to trigger pjax requests manually with a URL and container selector.
- Partial Page Fragments - Fetches and swaps a portion of the page based on server responses, skipping full layout rendering.
- Version-Triggered Full Reloads - Uses a version header and meta tag to force a full page reload when the server-side layout or assets change.
- Container Content Reloads - Refetch the current URL via Ajax and replace the container's content without adding a browser history entry.
- Version-Triggered Reloads - Set a version header and meta tag so clients perform a hard reload when assets or layout HTML change.
- Ajax Form Submissions - Serializes form data and submits it as an Ajax request, replacing the target container with the response.
- Asynchronous Form Submissions - Send form data as an Ajax request and replace a container's content with the server response without a full page reload.
- 路由和链接(Routing And URLs) - Listed in the “路由和链接(Routing And URLs)” section of the Awesome Frontend awesome list.
