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

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

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

window.sethash("#newsection");

CorMVC JQuery В Рамках делается таким образом, это opensource вы можете копаться в источнике и получить логику из него.

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

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

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

Szevasz.. :)

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

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

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

теперь у вас есть ссылки, которые идут на страницы и могут быть обработаны на php в случае отключения javascript. все, что вам нужно сделать, это использовать super global $_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 для запуска hashchange в если страница была загружена хэшем для начала, вы просто вызываете функцию триггера windows при загрузке страницы

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

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

использование хэш-ссылок позволяет использовать ссылки bookmarkable/sharable для запуска кода JavaScript вместо перезагрузки страницы. Бен Almans на 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.элемент страницы.цвет=красный

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

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

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

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

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