This is one of the most amazing jquery functions I’ve seen in a while. It loads your HTML or content that is dynamic without reloading the unchanged bits, making page loads lightning fast. ON that, does anyone know the speed of lightning (and no, Cars 2 is not what I’m asking)?

You’ll need jquery included on your page already (in the head tag). This code uses the latest JQuery 1.6.1 from Google’s CDN (Content Delivery Network) but you can use your own local copy instead if you wish.

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

After this, you simply need to decide what links will trigger this, to load pages faster, and the content block the new page should be inserted into.

If you’re doing all a tags (all links everywhere on your site, without scrutiny, here is the code for that (put this in the head tag, after you include jquery):

 
<script type="text/javascript">
     $(document).ready(function(){
          $('a').pjax('pjaxtarget');
     });
</script>

And finally, make sure the div or other block element (li, span, etc.) is in your page, so the PJAX can insert the page content.

 
<div id="pjaxtarget">
     <!--the inserted content will be put here and wipe out anything that is already here-->
</div>

Done right, all your links should load super fast, as it only grabs the parts that are dynamic and leave the other elements alone, without loading them.