AJAX + CSS页面转换

Question

Could someone explain AJAX page transitions in a step by step process? I have seen many explains but I can't seem to find one that explains it step by step. I can't seem to grasp the concept. Something like the following code perhaps? Or even anything simpler will work too.

Basically, I want to display a new page when I click on my navigation menu link without the page having to reload. And possibly add animations to that.

Also, what is the significance of adding the "error" call and is it compulsory?

$(document).ready(function() {

    $("#pages-load-area #pages-container").load("./pages/" + initialPage);

    $("#header-navigation a").on("click", function() {

        var urlPageName = $(this).attr("href");

        $.ajax({
            type: "GET",
            url: "./pages/" + urlPageName,
            processData: false,
            crossDomain: true,
            cache: false,
            success: function(result, responseData) {
                $("#pages-load-area    #pages-container").html(result);
            },
            error: function(responseData, textStatus, errorThrown) {
                alert('AJAX failed');
            },
        });

        return false;

    });
});

Answer 1

AJAX doesn't do "page transitions". It does an asynchronous call to the server and runs a return function or an error function. The return function has a parameter where the server can send some data to the client. With that data you can do whatever you want to do.

If the server sends the next page and you get that result and you substitute some of the html by the result, you can use this functionality to do "page transitions". But it's very important to keep the concepts separate in order for you to understand what's going on.

So if you send an ajax request like this:

    $.ajax({
        type: "GET",
        url: "./pages/sum",
        data: {
            a: 3,
            b: 4
        },
        success: function(result) {
            alert(result);
        },
        error: function() {
            alert('AJAX failed');
        },
    });

and the server responds with '7'. Then your alert will display 7. The variables present in 'data' will be available from the GET scope in your server. I don't know which server laguage you are using. In PHP that would be in $_GET.

Example of a PHP page that would return '7':

<?php
    return $_GET['a'] + $_GET['b'];
?>

Another example:

    $.ajax({
        type: "GET",
        url: "./pages/sum",
        data: {
            a: 3,
            b: 4
        },
        success: function(result) {
            $("input#result").text(result);
        },
        error: function() {
            alert('AJAX failed');
        },
    });

now once the call returns your input named "result" will display '7' inside of it.

Now back to your case, you can do as url: "./pages/" + urlPageName, but you can also use: :

    $.ajax({
        type: "GET",
        url: "./pages",
        data: {
            pageName: urlPageName
        },
        success: function(result, responseData) {
            $("#pages-load-area    #pages-container").html(result);
        },
        error: function(responseData, textStatus, errorThrown) {
            alert('AJAX failed');
        },
    });

Depending on what server technology you're using this may make your life easier. So in this case you're simply replacing the html inside "#pages-load-area #pages-container" element by whatever the server returns to you.

One more thing, at this point you don't need:

processData: false,
crossDomain: true,
cache: false,

forget about them for now and go back at them when you have your mind more clear about ajax calls.

About the "return false", if you read this page from jQuery documentation, you may notice this relevant part:

Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault()"

That means that if you have say, a button inside a div and you set an onclick event for the button with the event's function ending with return false and an onclick event for the div, when you click the button the div's onclick event will not be fired because of that false. So you will have only one onclick event.

I hope I have clarified. Feel free to ask more if it's not clear yet.