可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I want to refresh a full page with ajax, after clicking on some initial site link.

Example:

We have opened site www.love.com, it has a link to www.love.com/somepage.html

After we click on this link, full page must be refreshed with ajax (replaced active page by somepage.html)

And there is must be some fadeIn/Out effect, when the page is replaced.

How to?

maybe some plugin can do this, any link?

回答1:

Well a full-page request kind of contradict the purpose of AJAX,

but if you insist :) you can use a huge div as a placeholder of your page, and use jQuery Load/Ajax

the div would look like this

<div id="yourhugediv"></div>

and the function that you can use

function changeUrl(href)
{
   $('#yourhugediv').load(href);
   href = (href == "") ? "/" : href;
   uri = window.location.href.split("#/");
   window.location.href = uri[0] + "#/" + href;
}

either manually add the function to your link

<a href="#" onclick="changeUrl('http://love.com/somepage.html')">to load</>

or use jQuery selector to iterate every anchor

$('a').click(function()
{
    changeUrl(a.attr('href'));
});
$('a').attr('href','#');

回答2:

Sounds like you are trying to use jQuery because someone told you you should be using jQuery - the link tag does this job all by itself without any script required

ok - we have to do what our girlfriends tell us to do...

I suppose you could do something like this:

$("body").load("next_page.html");

$("html").load("next_page.html"); (would this even work??)

回答3:

Use FAJAX (Fake AJAX). It will give you that 'coolness' that you are looking for. Using these meta tags in your pages will do a full page refresh with fade-in and fade-out effects.

<META http-equiv="Page-Enter" content="blendTrans(Duration=0.2)">
<META http-equiv="Page-Exit" content="blendTrans(Duration=0.2)">

The meta tags only work in IE, but there are ways to get similar results in other browsers using JavaScript.

<html>
<head>
    <title>Page Title</title>
    <META http-equiv="Page-Enter" content="blendTrans(Duration=0.2)">
    <META http-equiv="Page-Exit" content="blendTrans(Duration=0.2)">
    <script type="text/javascript">
        function fadeInit() {
            document.body.style.opacity=0.2; // initialise
        }

        function fadeIn() {
            var bodyStyle=document.body.style;
            if ( bodyStyle.opacity < 1) {
                bodyStyle.opacity=((bodyStyle.opacity*10)+1)/10; //Add 0.1
                setTimeout('fadeIn();',100)
            }
        }
    </script>
</head>
<body onload="fadeInit();fadeIn();">

</body>
</html>

回答4:

Just make a link that points there:

<a href="http://www.love.com/somepage.html">link text</a>

ps: I'm a little bit confused though ... you already have a link to that page that causes a new request (full page refresh), why the need for AJAX I wonder ...

回答5:

Since the other page is in the same domain you could scrape the other page to retrieve the data you're interested in. You could even replace the entire body tag of the current page with the contents of the body tag in the other page.

The process would go something like: User takes some action on current page to trigger desired action, JavaScript makes AJAX request to fetch somepage.html and stores the result in a string, JavaScript does equivalent of innerHTML (or jQuery.html()) to replace the contents of the current page (or div or whatever) with whatever was retrieved from somepage.html and add special effect.

In theory this would allow you to completely replace the contents of the current page with whatever was fethced from somepage.html.

回答6:

I know this is an old post, but I think what you're looking for is solved by using the BBQ jQuery plugin: http://benalman.com/projects/jquery-bbq-plugin/