Home > Developer > Web Develop
Workstation to do a similar Baidu Cloud Disk project, which refers to the PAJX technology, has never been exposed to this thing, today small test sledgehammer. Go online to find some tutorials, can only say Baidu is quite not reliable, find things almost can not use, or GitHub good, Da! https://github.com/defunkt/jquery-pjax!
Pjax is an upgrade version of Ajax, how to understand it, the first time to learn Ajax on the advantages and disadvantages of Ajax, one of the drawbacks is to undermine the browser's forward and backward, because the AJAX request will not remain in the history record. Pjax is not the same, Pjax is interpreted as a ajax+pushstate package because it writes AJAX requests to the history and is reflected in the address bar so that users can happily use forward and backward. Pjax has several implementations, using the most commonly used jquery library, using Jquery.pjax.js. The server side of the demo code uses the PHP scripting language.
Where is Pjax used? Just say Baidu Cloud disk, this everyone must have used. Baidu Cloud disk PC side, after clicking Open a folder will open the file under this folder, in fact, show the file of this div used Pjax technology. Address bar transformation, content replacement, but it is an AJAX request. When you are back, you do not have to re-request the contents of the previous folder because it exists in the history. Also, developers have the option to use the cache and storage caches.
DEMO1:
Client:
<!DOCTYPE HTML><HTML><Head> <title>Pjax</title> <MetaCharSet= "Utf-8"></Head><Body> <H1>My Site</H1> <Div>Go to<ahref= "res1.php">First page</a>.<ahref= "res2.php">Second page</a> </Div> <DivID= "Container"></Div> </Body><Scriptsrc=".. /jquery-2.1.4.min.js "></Script><Scriptsrc=".. /jquery.pjax.js "></Script><Scripttype= "Text/javascript">$ (document). Pjax ('a', '#container')</Script></HTML>
Server-side:
res1.php
<? echo "<div style= ' background:red; ' > First page </div> ";
res2.php
<? echo "<div style= ' background:red; ' > second page </div> ";
Explanation: $ (document). Pjax (' A ', ' #container ') where a is the trigger element, #container是装载pjax返回内容的容器, the following is the case.
DEMO2:
Client:
<!DOCTYPE HTML><HTML><Head> <title>Pjax</title> <MetaCharSet= "Utf-8"></Head><Body> <H1>My Site</H1> <Div> <inputtype= "button"ID= "th"value= "GO"> </Div> <DivID= "Container"></Div> </Body><Scriptsrc=".. /jquery-2.1.4.min.js "></Script><Scriptsrc=".. /jquery.pjax.js "></Script><Scripttype= "Text/javascript">$(function(){ $('#th'). Click (function() {$.pjax ({URL:'./res3.php', Container:'#container' }); });});</Script></HTML>
Server-side code:
res3.php:
<? echo "<div style= ' background:red; ' > third page </div> ";
Yes, that's it!
A simple introduction to JQuery Pjax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
