pjax is pushState ajax, which is encapsulated into a jQuery extension for easy use. pjax is mainly used to solve the problem that the HTML page partially refreshes the URL and does not update and does not support back and forward, so as to improve the user experience.
The implementation of pjax is achieved by combining the new features of HTML5's pushState() and replaceState() with ajax. pushState() and replaceState() are used to operate the State object, which can add and modify historical records, thereby updating the url and providing forward and backward operations. Ajax implements asynchronous loading of data and partial refresh.
1 2 3 4 5 6 7 8 9 10 11 |
|
1 2 3 4 5 6 7 8 9 10 11 |
|
$.noop
is an empty method that does nothing, that is, function(){}
. popstate.pjax
is the namespace writing method of JS event, popstate
is the event type, whenever the activated history changes (the browser operates the forward and back buttons, calls back() or go() method), the popstate event will be triggered, but calling pushState() or replaceState() will not trigger the popstate event. .pjax
is the namespace of the event, which makes it easy to unbind the event response of the specified namespace. It is often used when binding anonymous functions, for example: this.on('click.pjax', selector , function(event){})
.
This method returns a jQuery object, equivalent to $.fn.pjax.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
|
1) handleClick()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
2 ) handleSubmit()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
3) pjaxReload()
1 2 3 4 5 6 7 8 9 10 11 12 |
|
4) onPjaxPopstate()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
After the above analysis, you can easily It's easy to use pjax now.
pjax supports options configuration and event mechanism.
Parameter name | Default value | Description |
---|---|---|
timeout | 650 | ajax timeout (unit ms), the default page jump will be executed after timeout, so the timeout does not Should be too short, but generally there is no need to set |
push | true | Use window.history.pushState to change the address bar url (new ones will be added History) |
replace | false | Use window.history.replaceState to change the address bar url (history will not be added) |
maxCacheLength | 20 | The number of cached historical pages (pjax will cache the content of the original page before loading the new page, and the script will be cached after loading. Execute again) |
version | is a function that returns the pjax-version of the current page, that is, the tag content in the page. Use response.setHeader("X-PJAX-Version", "") to set a version number different from the current page, which can force the page to jump instead of partially refreshing | |
scrollTo | 0 | Vertical scrolling distance after the page is loaded (keeping it consistent with the original page can make the transition effect smoother) |
type | "GET" | parameters of ajax, http request method |
dataType | "html" | ajax Parameter, Content-Type of the response content |
container | CSS selector used to find the container , when the [container] parameter is not specified, use | |
url | link.href | The connection to be jumped, default The href attribute of a tag |
fragment | uses the specified part of the response content (css selector) to populate the page. The server does not This parameter needs to be used when processing a full page request. Simply put, it means intercepting the requested page |
为了方便扩展,pjax 支持一些预定义的事件。
事件名 | 支持取消 | 参数 | 说明 |
---|---|---|---|
pjax:click | ✔ | options | 点击按钮时触发。可调用 e.preventDefault() 取消 pjaxa |
pjax:beforeSend | ✔ | xhr, options | ajax 执行 beforeSend 函数时触发,可在回调函数中设置额外的请求头参数。可调用 e.preventDefault() 取消 pjax |
pjax:start | xhr, options | pjax 开始(与服务器连接建立后触发) | |
pjax:send | xhr, options | pjax:start之后触发 | |
pjax:clicked | options | ajax 请求开始后触发 | |
pjax:beforeReplace | contents, options | ajax请求成功,内容替换渲染前触发 | |
pjax:success | data, status, xhr, options | 内容替换成功后触发 | |
pjax:timeout | ✔ | xhr, options | ajax 请求超时后触发。可调用 e.preventDefault() 继续等待 ajax 请求结束 |
pjax:error | ✔ | xhr, textStatus, error, options | ajax 请求失败后触发。默认失败后会跳转 url,如要阻止跳转可调用 e.preventDefault() |
pjax:complete | xhr, textStatus, options | ajax请求结束后触发,不管成功还是失败 | |
pjax:end | xhr, options | pjax所有事件结束后触发 | |
pjax:popstate | forward / back(前进/后退) | ||
pjax:start | null, options | pjax开始 | |
pjax:beforeReplace | contents, options | 内容替换渲染前触发,如果缓存了要导航页面的内容则使用缓存,否则使用pjax加载 | |
pjax:end | null, options | pjax结束 |
客户端通过以下 2 个步骤就可以使用 pjax :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
|
在 Yii 中,已经将 pjax 封装成了 widgets,故在渲染时如下使用即可:
1 2 3 4 |
|
pjax 封装成的 widgets 源码文件widgets/Pjax.php
,事件注册部分如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
由于只是 HTML5 支持 pjax,所以后端需要做兼容处理。通过 X-PJAX
头信息可得知客户端是否支持 pjax,如果支持,则只返回局部页面,否则 a 链接默认跳转,返回整个页面。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
在以下 9 种情况时候 pjax 会失效,源码部分如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
|
除了使用 pjax 解决局部刷新并支持前进和后退问题外,也可以使用 browserstate/history.js + ajax 方案来实现
The above is the detailed content of Javascript PJAX principles and usage. For more information, please follow other related articles on the PHP Chinese website!