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

Для демонстрации, указанной в вашем вопросе, достижение этой функциональности на самом деле очень просто - поскольку она вообще не использует AJAX (когда вы начинаете добавлять AJAX в микс, становится сложнее - объяснено позже). Для достижения этой функциональности вам необходимо: обновите свои ссылки, чтобы использовать хеши, а затем привяжите их к событию hashchange. К сожалению, событие hashchange несовместимо с разными браузерами, хотя, к счастью, доступно множество «плагинов для истории / удаленного доступа» - за прошедшие годы мы предпочли использовать История jQuery, это открытый исходный код, большая поддержка и активное развитие :-).

Хотя, когда дело доходит до добавления функциональности AJAX к таким сайтам, как Facebook, WBHomes и Balupton.com, то вы столкнетесь с целым рядом серьезных трудностей! (Я знаю, что был ведущим архитектором двух последних сайтов!). Вот некоторые из этих проблем:

• Как изящно и легко обновить определенные внутренние ссылки для использования функций истории и AJAX и определить, когда хэш изменился? при этом остальные ссылки работают как раньше.
• Как выполнить перенаправление с «www.yoursite.com/myapp/a/b/c» на «www.yoursite.com/myapp/#/a/b/c»? и при этом сохранить удобство для пользователя, чтобы 3 необходимых перенаправления были максимально плавными.
• Как отправить значения и данные формы с помощью AJAX и обновить хеш? и наоборот, если они не поддерживают Javascript.
• Как определить, в какой именно области страницы требуется запрос AJAX? Таким образом, подстраницы отображаются с правильной страницей.
• Как изменить заголовок страницы при изменении состояния AJAX? и другой нестраничный контент.
• Как выполнять красивые вступительные / конечные эффекты при загрузке и изменении состояния AJAX? таким образом, чтобы пользователь не оставался в темноте.
• Как обновить информацию для входа в боковую панель при входе в систему через AJAX? Очевидно, что мы не хотим, чтобы эта кнопка входа в систему в левом верхнем углу больше была там.
• Как по-прежнему поддерживать веб-сайт для пользователей, у которых не включен JS? Таким образом, он постепенно ухудшается и по-прежнему индексируется поисковыми системами.

Единственный известный мне надежный проект с открытым исходным кодом, который пытается решить все упомянутые чрезвычайно сложные проблемы, оказался jQuery Ajaxy. По сути, это расширение упомянутого ранее проекта jQuery History, обеспечивающее красивый элегантный высокоуровневый интерфейс для добавления функциональности AJAX в микс, позволяющий решать эти сложные проблемы за кулисами, поэтому нам не нужно о них беспокоиться. Это также выбранное решение, используемое на нескольких последних коммерческих сайтах, упомянутых ранее.

Удачи, и если у вас есть дополнительные вопросы, просто оставьте комментарий к этому ответу, и я займусь этим как можно скорее :-)

Обновление: теперь существует API истории HTML5 (pushState, popState), который не поддерживает функциональность HTML4 hashchange. History.js теперь является преемником jQuery History и обеспечивает кроссбраузерную совместимость для HTML5 History API. и необязательный hashchange резервный вариант для браузеров HTML4. jQuery Ajaxy будет обновлен до History.js

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

Than if you have a HTML 5 aware browser, or such library that emulates the behavior just use:

window.sethash("#newsection");

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

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

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 от Бена Алмана, который вы можете найти здесь: http://benalman.com/projects/jquery-hashchange-plugin/ Вам это не понадобится для новых версий браузеров, которые поддерживают событие hashchange html5, но вам это понадобится для более старых версий браузеров. Вам не нужно ничего делать, кроме как включить этот скрипт на свою страницу, все остальное он сделает за вас.

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

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

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

теперь в вашем javascript на странице вам нужно будет заставить ваши ссылки запускать hashchange. Вы можете сделать это, заменив? Q = на такой #.

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

теперь ваши ссылки будут запускать hashchange, осталось только привязать hashchange к функции, которая что-то делает. Это можно сделать очень просто с помощью 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 вместо перезагрузки страницы. Событие jQuery hashchange Бена Алмана позволяет связать обработчик событий с событием 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-адрес:

mysite / # company.page = items.color = красный

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

Объект {company = undefined, page = "items", color = "red"}

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

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

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