AsyncLink will transform your classic web site into a modern AJAX driven single page. It is jQuery plugin that replaces all needed links and forms with AJAX handlers.

Current version 1.0.0 (2015-11-08).



Note. Because of browser's security policy, AJAX requests doesn't work for local files. This example will not work if you open index.html from local file system (file:///). To test this example use network protocol (i. e. http://localhost/..., or project page).

Don't forget to look at current URL, and play with history back and forward.

Main target here
Alternative test target here




Add jQuery and AsyncLink scripts at your page.

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

Call plugin on root element. Inside this element plugin will search links and forms, and by default replace root element's contents with AJAX responses.


Server should response to AJAX request with content part of page only. To let server know that it is AJAX request you should mark your request somehow. For example, for link to /foo.html you can:

Replacing URL

To replace URL using some simple rule, you can use replaceUrlCallback option:

// add parameter to URL
    replaceUrlCallback: function(url) {
        return url + (url.indexOf('?') == -1 ? '?' : '&') + 'async=1';

// or add prefix to URL
    replaceUrlCallback: function(url) {
        return '/async' + url; // will work if your urls starts with "/"

Adding custom header

To add custom header you can use ajaxSettings option. These AJAX settings are the same as in jQuery.ajax function, and you can change any of these settings.

// add custom header
    ajaxSettings: {
        headers: {
            'Async': 'true'

To fully replace URL, you can use al-href attribute for links or al-action for forms. The flaw of this method is that you should change your html source code.

<a href="/foo.html" al-href="/bar.html">foo</a>


If your root element differs from main content block, which should change by AJAX requests, use target option - it is jQuery selector to needed element.

        <a href="/foo.html">foo</a>
        <a href="/bar.html">bar</a>

        <div class="main">

        <script src="jquery.js"></script>
        <script src="asynclink.jquery.js"></script>
            // find links in "body" element,
            // but load AJAX request to element with css class "main"
                target: '.main'

Also, you can specify target in link or form element using al-target attribute:

<a href="/foo.html" al-target=".custom">foo</a>

History change ignoring

History state will not change in next cases:

File uploads

Forms with file uploads will work with enctype="multipart/form-data", if browser supports FormData.

Complete and error handlers

Use ajaxSettings as in jQuery.ajax. There are success, error and complete options.

    ajaxSettings: {
        success: function(data, textStatus, jqXHR) {
            var m = data.match(/<meta name="title" content="([^"]*)">/);
            if (m && m[1]) {
                document.title = m[1];
        error: function(jqXHR, textStatus, errorThrown) {


Static methods

MIT License

Copyright (c) 2015 Maksim Krylosov