Jak wyświetlać żądania Ajax w adresie URL?

Myślę, że możesz to zrobić bardzo łatwo używając zdarzenia onHashChange obecnego w HTML5 lub używając biblioteki JavaScript, która emuluje zachowanie "hash" w przeglądarkach, które nie mają pełnej obsługi HTML 5. Jedną z takich bibliotek może być MooTools onhashchange, ale jest też wiele innych.

Niż Jeśli masz przeglądarkę HTML 5 lub taką bibliotekę, która emuluje zachowanie, po prostu użyj:

window.sethash("#newsection");

Cormvc jQuery Framework jest zrobiony w ten sposób, to jest opensource można kopać w źródle i uzyskać logikę z niego.

I właściwie to jest całkiem prosto do przodu. Twórca mówi to ładnie na tym filmie poniżej.

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

PS sorry can 't post second link bc i' m a new user.

Szewasz.. :)

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

Jest to coś, co wymyka się większości nowych programistów AJAXian. Jest to jednak dość prosty problem do rozwiązania.

Pierwszą rzeczą, której potrzebujesz, jest rdzeń jQuery, który jest darmowy w jquery.com

Następnie będziesz potrzebował wtyczki jQuery hash change even autorstwa Ben Alman, którą znajdziesz tutaj: http://benalman.com/projects/jquery-hashchange-plugin/ nie będzie to potrzebne dla nowszych wersji przeglądarek, które obsługują Zdarzenie hashchange html5, ale będzie dla starszych wersji przeglądarki. nie musisz nic robić, ale włącz ten skrypt na swojej stronie, obsługuje resztę.

Teraz dla twoich linków będziesz musiał skonstruować je w postaci łańcucha zapytania w następujący sposób:

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

Teraz masz linki, które prowadzą do stron i mogą być obsługiwane w php w przypadku, gdy javascript jest wyłączony. wszystko, co musisz zrobić, to użyć super global $_GET i przetworzyć ciąg zapytania do obsługi zawartości strony.

Teraz w Twoim javascript na stronie będziesz musiał wyzwalać linki hashchange. Możesz to zrobić, zastępując ?q = z # w ten sposób.

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

Teraz Twoje linki wyzwalają hashchange, jedyne, co pozostało, to powiązać hashchange z funkcją, która coś robi. Można to zrobić bardzo prosto z jQuery w ten sposób:

$(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("/");

});

Teraz po prostu dodaj co kiedykolwiek kod zrobić, aby obsłużyć ajax i treści.

Teraz wystarczy jeden ostatni bit javascript, aby uruchomić hashchange w przypadku, gdy strona została załadowana z hash na początek, więc po prostu wywołaj funkcję Windows trigger, gdy Strona się ładuje

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

Mam nadzieję, że jest to wystarczająco jasne, jeśli nie, nie wahaj się ze mną skontaktować, aby zadać więcej pytań.

Korzystanie z łączy hashowych pozwala na bookmarkable/sharable linki do wyzwalania kodu JavaScript, zamiast przeładowywania strony. Ben Almans jQuery hashchange event pozwala powiązać obsługę zdarzenia z wydarzeniem hashchange, ta wtyczka działa ze starszymi przeglądarkami, które normalnie tego nie obsługują. Obsługa zdarzenia powiązana z hashchange może odczytać część skrótu adresu url i wywołać dowolną funkcję.

// 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
    }
}

Ten inny mechanizm obsługi zdarzenia może przetwarzać 2 argumenty oddzielone kropką ('.") w tym samym 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);
    }
}

Jeśli używane są wyrażenia regularne, można przetwarzać dowolną kombinację znaków.

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

Spowoduje to przekształcenie adresu url:

Mysite/ # firma.page = items.color = red

Do następującego obiektu JavaScript:

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

Wtedy jest tylko kwestia uruchomienia funkcji show() lub hide() jQuery na wybranych elementach.

To może być przekształcone w JavaScript non-jQuery, ale wtedy stracisz funkcjonalność, którą dostarcza Ben Alman, co jest kluczowe dla przenośnego rozwiązania.

To, czego potrzebujesz, to sposób na obsługę historii w AJAX, co można zrobić za pomocą wielu już istniejących bibliotek. Polecam lekturę YUI 3 strony o historii .