Как показать, что Ajax запрашивает в URL?

Севаз ..:)

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;
}​

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

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

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

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

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

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

window.sethash("#newsection");

Это то, что ускользает от большинства новых разработчиков 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 на странице вам нужно будет заставить ваши ссылки запускать хеш-обмен. Вы можете сделать это, заменив? 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 = red

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

Object {company = undefined, page = "items", color = "red"}

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

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

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