Как отображать запросы Ajax в URL-адресе?

Я думаю, что вы можете сделать это очень легко, используя событие onhashchange, присутствующее в HTML5, или используя библиотеку JavaScript, которая эмулирует поведение "хэша" в браузерах, которые не имеют полной поддержки HTML 5. Одной из таких библиотек может быть MooTools onhashchange, но есть и много других.

Чем если бы у вас был браузер с поддержкой HTML 5 или такая библиотека, которая эмулирует поведение, просто используйте:

window.sethash("#newsection");

Структура Jquery CORMVC выполнена таким образом, это открытый исходный код, который вы можете изучить в источнике и извлечь из него логику.

И на самом деле это довольно прямолинейно. Создатель красиво рассказывает об этом в этом видео ниже.

http://www.bennadel.com/resources/jing/2009-12-21_0933.swf

PS извините, не могу опубликовать вторую ссылку, потому что я новый пользователь.

Севаш..:)

HTML

<a href="/bye.php?user=abc&page=messages" 
   onclick="return goToWithAjax(this);">bye</a> 

Javascript-код

function goToWithAjax(hash) {
  hash = hash.href ? hash.getAttribute("href", 2) : hash;
  ajax( hash, function( response ) {
    document.getElementById("content").innerHTML = response;
  });
  hash = ("#!/" + hash).replace("//","/");
  window.location.hash = hash;
  return false;
}

//////////////////////////////////////////////////////////////////////////////

function getXmlHttpObject() {
    var xmlHttp;
    try {
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

function ajax(url, onSuccess, onError) {
    var xmlHttp = getXmlHttpObject();
    xmlHttp.onreadystatechange = function () {
        if (this.readyState == 4) {
            // onError
            if (this.status != 200) {
                if (typeof onError == 'function') {
                    onError(this.responseText);
                }
            }
            // onSuccess
            else if (typeof onSuccess == 'function') {
                onSuccess(this.responseText);
            }
        }
    };
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
    return xmlHttp;
}​

Это то, что ускользает от большинства новых разработчиков AJAXian. Хотя это довольно простая проблема для решения.

Первое, что вам понадобится, - это ядро jQuery, которое бесплатно в jquery.com

Далее вам понадобится плагин jQuery hash change even от Бена Альмана, который вы можете найти здесь: http://benalman.com/projects/jquery-hashchange-plugin / Вам это не понадобится для более новых версий браузеров, поддерживающих событие html5 hashchange, но вам это понадобится для более старых версий браузеров. вам не нужно ничего делать, кроме как включить этот скрипт на свою страницу, он справится со всем остальным.

Теперь для ваших ссылок вам нужно будет построить их в виде строки запроса следующим образом:

<a href="user.php?q=/topic/article" class="dynlnk">Link Text/Image</a>

Теперь у вас есть ссылки, которые ведут на страницы и могут обрабатываться на php в случае, если javascript отключен. все, что вам нужно сделать, это использовать супер глобальный $_GET и проанализировать строку запроса для обработки содержимого страницы.

Теперь в вашем javascript на странице вам нужно будет сделать так, чтобы ваши ссылки срабатывали хэш-обмен. Вы можете сделать это, заменив?q= с таким #, как этот.

$(".dynlnk").each(function(){
    $(this).attr("href", $(this).attr("href").replace("?q=", "#"));
});

Теперь ваши ссылки вызовут хэш-обмен, единственное, что осталось сделать, это привязать хэш-обмен к функции, которая что-то делает. Это можно сделать очень просто с помощью jQuery следующим образом:

$(window).bind( 'hashchange', function(e){

    //this splits the part after the hash so you can handle the parts individually.
    //to handle them as one just use location.hash
    pageparts = location.hash.split("/");

});

Теперь просто добавьте любой код, который вы когда-либо делали, для обработки вашего ajax и контента.

Теперь вам просто нужен последний бит javascript для запуска хэш-обмена в случае, если страница была загружена с хэшем для начала, так что вы просто вызовите функцию запуска Windows при загрузке страницы

$(window).trigger( 'hashchange' );

Надеюсь, это достаточно ясно, если нет, не стесняйтесь обращаться ко мне, чтобы задать дополнительные вопросы.

Использование хэш-ссылок позволяет использовать закладки/общие ссылки для запуска кода JavaScript вместо перезагрузки страницы. Событие hashchange Бен Альманс jQuery позволяет привязать обработчик событий к событию hashchange, этот плагин работает со старыми браузерами, которые обычно не поддерживают это. Обработчик событий, привязанный к hashchange, может прочитать хэш-часть URL-адреса и вызвать любую функцию.

// register event handler
function bindHashchange() {

    $(window).bind('hashchange', function(event) {
        event.preventDefault();
        var label = location.hash.substring(1);
        handleLabel(label);
    });

    // trigger event so handler will be run when page is opened first time
    // otherwise handler will only run when clicking on hash links
    $(window).trigger('hashchange');
}

// read and handle hash part of url
function handleLabel(label) {

    if ( label.length > 0 ) {
        // using label from url
        switchPage(label);
    } else {
        // use the default label, if no hash link was present
        switchPage('start');
    }
}

// in this case, load hidden <div>'s into a <div id="content">
function switchPage(label) {
    if ( label == 'start ) {
        $('div#content').html($('div#start'));
    } else if ( label == 'some_other_page' ) {
        // do something else
    }
}

Этот другой обработчик событий может обрабатывать 2 аргумента, разделенных точкой ('.') в тот же URL-адрес.

function processHash() {

    var str = location.hash.substring(1);
    var pos = $.inArray('.', str);

    var label = '';
    var arg = '';

    if ( pos > -1 ) {
        label = str.substring(0, pos);
    } else {
        label = str.substring(0);
    }

    if ( pos > 1 ) {
        arg = str.substring(pos+1);
    }

    if ( label.length == 0 ) {
        // the default page to open of label is empty
        loadContent('start');
    } else {
        // load page, and pass an argument
        loadContent(label, arg);
    }
}

Если используются регулярные выражения, можно анализировать любую комбинацию символов.

var registry = {};

// split on character '.'
var args = label.split(/\./g);

for ( i in args ) {
    var arg = args[i];

    // split on character '='
    var temp = arg.split('=');
    var name = temp[0];
    var value = temp[1];

    // store argument in registry
    registry[name] = value;
}
// registry is loaded, ready to run application that depends on arguments

Это преобразует URL-адрес:

Мой сайт/#компания.страница=товары.цвет=красный

В следующий объект JavaScript:

Объект {компания = не определено, страница = "товары", цвет = "красный"}

Тогда остается только запустить функции jQuery show() или hide() для выбранных вами элементов.

Это может быть преобразовано в JavaScript, отличный от jQuery, но тогда вы потеряете функциональность, предоставляемую Беном Альманом, что имеет решающее значение для портативного решения.

Вам нужен способ поддержки истории в AJAX, что можно сделать с помощью многих уже существующих библиотек. Я бы рекомендовал прочитать ЮИ 3 страницы по истории.