diff --git a/README.md b/README.md index 5bd22e3..debf522 100644 --- a/README.md +++ b/README.md @@ -2,18 +2,18 @@ [![Build Status](http://img.shields.io/travis/MoOx/pjax.svg)](https://travis-ci.org/MoOx/pjax). -> Easily enable fast Ajax navigation on any website (using pushState + xhr) +> Easily enable fast AJAX navigation on any website (using pushState + XHR) Pjax is ~~a jQuery plugin~~ **a standalone JavaScript module** that uses -ajax (XmlHttpRequest) and +AJAX (XmlHttpRequest) and [pushState()](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history) to deliver a fast browsing experience. -_It allow you to completely transform user experience of standard websites -(server side generated or static ones) to make them feel they browse an app. -Especially for user that have low bandwidth connection._ +_It allows you to completely transform the user experience of standard websites +(server side generated or static ones) to make them feel like they are browsing an app, +especially for users with low bandwidth connection._ -**No more full page reload. No more lots of HTTP request.** +**No more full page reloads. No more multiple HTTP requests.** ## Demo @@ -37,45 +37,45 @@ Especially for user that have low bandwidth connection._ ## No dependencies -_There is nothing you need. No jQuery or something._ +_There is nothing you need. No jQuery or anything else._ ## How Pjax works -Pjax loads page using ajax & updates the browser's current url using pushState without reloading your page's layout or any resources (js, css), giving a fast page load. -_But under the hood, it's just ONE http request with a pushState() call._ -Obviously, for [browsers that don't support pushState()](http://caniuse.com/#search=pushstate) Pjax fully degrades (yeah, it doesn't do anything at all). +Pjax loads pages using AJAX & updates the browser's current url using pushState without reloading your page's layout or any resources (JS, CSS), giving a fast page load. +_But under the hood, it's just ONE HTTP request with a pushState() call._ +Obviously, for [browsers that don't support pushState()](http://caniuse.com/#search=pushstate) Pjax gracefully degrades and does not do anything at all. It simply works with all permalinks & can update all parts of the page you -want (including html metas, title, navigation state). +want (including HTML metas, title, and navigation state). -- It's not limited to one container, like jQuery-Pjax is, -- It fully support browser history (back & forward buttons), -- It **will** support keyboard browsing (@todo), -- Automatically fallback to classic navigation for externals pages (thanks to Capitain Obvious help), -- Automatically fallback to classic navigation for internals pages that will not have the appropriated DOM tree, +- It's not limited to one container, like jQuery-Pjax is. +- It fully supports browser history (back & forward buttons). +- It supports keyboard browsing. +- Automatically falls back to classic navigation for external pages (thanks to Capitain Obvious's help). +- Automatically falls back to classic navigation for internal pages that do not have an appropriate DOM tree. - You can add pretty cool CSS transitions (animations) very easily. -- It's around 3kb (minified & gzipped). +- It's around 4kb (minified & gzipped). ### Under the hood -- It listen to every clicks on links _you want_ (by default all of them), -- When an internal link is clicked, Pjax grabs HTML from your server via ajax, -- Pjax render pages DOM tree (without loading any resources - images, css, js...) -- It check if all defined parts can be replaced: - - if page doesn't suit requirement, classic navigation used, - - if page suits requirement, Pjax does all defined DOM replacements -- Then, it updates the browser's current url using pushState +- It listens to every click on links _you want_ (by default all of them). +- When an internal link is clicked, Pjax grabs HTML from your server via AJAX. +- Pjax renders the page's DOM tree (without loading any resources - images, CSS, JS...). +- It checks that all defined parts can be replaced: + - if the page doesn't meet the requirements, classic navigation is used. + - if page meets the requirements, Pjax does all defined DOM replacements. +- Then, it updates the browser's current URL using pushState. ## Overview -Pjax is fully automatic. You won't need to setup anything on the existing HTML. +Pjax is fully automatic. You don't need to setup anything in the existing HTML. You just need to designate some elements on your page that will be replaced when you navigate your site. Consider the following page. ```html - + @@ -93,7 +93,7 @@ Consider the following page. ``` -We want Pjax to grab the url `/blah` then replace `.my-Content` with whatever it gets back. +We want Pjax to intercept the URL `/blah`, and replace `.my-Content` with the results of the request. Oh and the `