Add X-PJAX-Selectors header
This commit was merged in pull request #144.
This commit is contained in:
committed by
BehindTheMath
parent
75eb83dbc2
commit
17d8262025
38
README.md
38
README.md
@@ -1,6 +1,6 @@
|
||||
# Pjax
|
||||
|
||||
[](https://travis-ci.org/MoOx/pjax).
|
||||
[](https://travis-ci.org/MoOx/pjax).
|
||||
|
||||
> Easily enable fast AJAX navigation on any website (using pushState() + XHR)
|
||||
|
||||
@@ -15,6 +15,8 @@ especially for users with low bandwidth connection._
|
||||
|
||||
**No more full page reloads. No more multiple HTTP requests.**
|
||||
|
||||
_Pjax does not rely on other libraries, like jQuery or similar. It is written entirely in vanilla JS._
|
||||
|
||||
## Installation
|
||||
|
||||
- You can install Pjax from **npm**:
|
||||
@@ -31,10 +33,6 @@ especially for users with low bandwidth connection._
|
||||
<script src="https://cdn.jsdelivr.net/npm/pjax@VERSION/pjax.min.js"></script>
|
||||
```
|
||||
|
||||
## No dependencies
|
||||
|
||||
_Pjax does not rely on other libraries, like jQuery or similar. It is written entirely in vanilla JS._
|
||||
|
||||
## How Pjax works
|
||||
|
||||
Pjax loads pages using AJAX and updates the browser's current URL using `pushState()` without reloading your page's layout or any resources (JS, CSS), giving a fast page load.
|
||||
@@ -495,6 +493,36 @@ document.addEventListener('pjax:send', topbar.show)
|
||||
document.addEventListener('pjax:complete', topbar.hide)
|
||||
```
|
||||
|
||||
### HTTP Headers
|
||||
|
||||
Pjax uses several custom headers when it makes and receives HTTP requests.
|
||||
If the requests are going to your server, you can use those headers for
|
||||
some meta information about the response.
|
||||
|
||||
##### Request headers
|
||||
|
||||
Pjax sends the following headers with every request:
|
||||
|
||||
* `X-Requested-With: "XMLHttpRequest"`
|
||||
* `X-PJAX: "true"`
|
||||
* `X-PJAX-Selectors`: A serialized JSON array of selectors, taken from
|
||||
`options.selectors`. You can use this to send back only the elements that
|
||||
Pjax will use to switch, instead of sending the whole page. Use `JSON.parse()`
|
||||
server-side to deserialize it back to an array.
|
||||
|
||||
##### Response headers
|
||||
|
||||
Pjax looks for the following headers on the response:
|
||||
|
||||
* `X-PJAX-URL` or `X-XHR-Redirected-To`
|
||||
|
||||
Pjax first checks the `responseURL` property on the XHR object to
|
||||
check if the request was redirected by the server. Most browsers support
|
||||
this, but not all. To ensure Pjax will be able to tell when the request
|
||||
is redirected, you can include one of these headers with the response,
|
||||
set to the final URL.
|
||||
|
||||
|
||||
#### Note about DOM ready state
|
||||
|
||||
Most of the time, you will have code related to the current DOM that you only execute when the DOM is ready.
|
||||
|
||||
Reference in New Issue
Block a user