Loading dynamic php&mysql pages without refreshing - AJAX

Question

For the last few days I am wandering arround the web for a script which would have the elementss I wish for.. The best thusfar is this one http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp , but there are a lot problems, where i need better solution:

I want no hashtags: I want all links for loading pages like folder (www.site.com/first/site/). This works magicaly on github (click here https://github.com/spjoe/deluge-yarss-plugin , and click on a random file and go back while watching adress bar). If someone knew what or how are they doing it would be really cool.
I need dynamic content: The script above only loads "cases" from switch function, while I need the php to check the url and find a file in mysql database and echo out content from desired tables based on the url, if it is found in the db ofcourse (if I point a link to site.com/harvey the php should find Harvey in the db and display for example his phone, adress and other details, while this must not be preloaded but requested only on click due to bandwight issues).
History: I would like to have an option where back and forward movements on the site would work flawlessly and with the animation as it works while clicking links..
Working links inside changable div: Because there is a problem with some scripts which don't change content where the link is inside it (for example first content box includes navigation, which should be replaced with different navigation in the second box), again this work very well with github..

I hope you give me some links or even more help with some code..

Answer 1

I think the script you are looking for is pjax , it has exactly all the features you want. You can find it on github: https://github.com/defunkt/jquery-pjax/tree/heroku

EDIT

You can use it with any server-side language you like. For example,

<script src="jquery.js"></script>
<script src="jquery.cookie.js"></script>

<script src="jquery.pjax.js"></script>
<script type="text/javascript">
    $(function(){
      $('nav a').pjax('#content')
    })
</script>

in your website's head,

<nav>
  <a href="otherContent1.php" >click me for other content</a>
  <a href="otherContent2.php" >click me for even more additional content</a>
</nav>
<section id="content">
  <h1>Original Content</h2>
  <p>
    this will be replaced by pjax with the content's of <a href="otherContent1.php">otherContent1.php</a> or <a href="otherContent2.php">otherContent2.php</a> 
  </p>
</section>

in your main template and modify your php code so that it looks for the HTTP_X_PJAX header. If it's present (see xhr.setRequestHeader('X-PJAX', 'true') ) render only the part that should replace the contents of <section id="content"> , else render the whole page. Pjax is then intelligent enough that if it works, it will replace only the contents of <section id="content"> , and if it doesn't work, you still have regular links working. pjax will even take care of google analytics, if you're using it, so your tracking is still working.

EDIT2: Example

Ok, here you have a sample php page. be aware that I did not test this, i just wrote it quick and dirty here on stack overflow to show how you could solve this. This code is untested and certainly not production ready . But as an example, you could do something like this (the file should be named index.php):

<?php
$render_template=true;
if ($_SERVER["HTTP_X_PJAX"])
{
    $render_template=false;
}
?>

<?php
if ($render_template) {
?>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Testing Pjax</title>
        <script src="jquery.js"></script>
        <script src="jquery.cookie.js"></script>

        <script src="jquery.pjax.js"></script>
        <script type="text/javascript">
            $(function(){
              $('nav a').pjax('#content')
            })
        </script>
    </head>
    <body>
        Date in template: <?php echo $today = date("D M j G:i:s T Y"); ?>
        <nav>
            <a href="index.php?content=1" >click me for other content</a>
            <a href="index.php?content=2" >click me for even more additional content</a>
        </nav>
        <section id="content">
<?php 
}
?>
<?php
if ($_Get["content"]==1) 
{
?>

            <h1>Content=1</h1>
            Date in content: <?php echo $today = date("D M j G:i:s T Y"); ?>
            <p>
                this will be replaced by pjax with the content's of <a href="index.php?content=1">index.php?content=1</a> or <a href="index.php?content=2">index.php?content=2</a> 
            </p>
<?php 
} else {
?>
            <h1>Content 2=2</h1>
            Date in content: <?php echo $today = date("D M j G:i:s T Y"); ?>
            <p>
                this will be replaced by pjax with the content's of <a href="index.php?content=1">index.php?content=1</a> or <a href="index.php?content=2">index.php?content=2</a> 
            </p>
<?php 
}
?>
<?php
if ($render_template) {
?>
        </section>
    </body>
</html>
<?php 
}
?>

Answer 2

如果要让ajax页面请求时URL显示“正确” URL，则可以使用PJAX，它会通过pushState更改历史记录，但不适用于ie6-ie9，请查看CanIUse：历史记录以了解兼容性问题。

Loading dynamic php&mysql pages without refreshing - AJAX

Question

2 answers

solution1
1 2012-02-13 15:16:40

solution2
0 2012-02-13 15:17:41

Loading dynamic php&mysql pages without refreshing - AJAX

Question

2 answers

solution1 1 2012-02-13 15:16:40

solution2 0 2012-02-13 15:17:41

solution1
1 2012-02-13 15:16:40

solution2
0 2012-02-13 15:17:41