Load parts of a page using AJAX

Ever tried to load parts of a page using javascript? I did.

During the last days I have done some research and testing, how I could load parts of a page and manipulate the URL, the title and the page navigation so it would look like the user navigated to the page, but without doing so.

Doing so, I would be able to deliver some cool animation loading the page content and through manipulating the URL, it’s still possible to share the page or directly link to the page without problems, like getting to the wrong page because the copied url from the address bar was not the right one…

The next days/weeks, I will try to test the approach on different browsers and systems and if there are any things to be awear of, I will share them here.

 

For now, here are the code snippets I used:

Address manipulation:

The following code is used to set the correct url for the page, but please notice that this only works in newer browser versions as it is part of HTML5:

 window.history.pushState({}, "ajax page loaded...", “http://localhost:8080/test.html”);

 

 

Content manipulation:

The following code gets the title and the contents of a div element with id “content” and writes them into the current page:

    $.ajax({
        type: "GET",
        url: url,
        data: null,
        cache: false,
        dataType: "html",
        success: function(data) {
            //get title
            data = data.split('<title>')[1];
            document.title = data.split('</title>')[0];
 
            //get content
            data = data.split('id="content"')[1];
            data = data.substring(data.indexOf('>') + 1);
            var depth = 1;
            var output = '';
 
            while(depth > 0) {
                temp = data.split('</div>')[0];
                i = 0;
                pos = temp.indexOf("<div");
                while(pos != -1) {
                    i++;
                    pos = temp.indexOf("<div", pos + 1);
                }
                depth = depth + i - 1;
                output = output + data.split('</div>')[0];
                data = data.substring(data.indexOf('</div>') + 6);
            }
            $('#content').html(output);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            document.title = "Error loading requested page!";
            alert("An AJAX error occured! n Error: "+errorThrown);
        }
    });

Leave a Reply

Your email address will not be published. Required fields are marked *

*