1

私はhistory.jsを使用してサイトを更新していますが、これはうまく機能しています。これはPHPベースのWebショップであり、ajaxリクエストを検出した場合、メインのdivのデータでのみJSONを提供します。

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) 
    && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {}

ロード時に、history.jsのgithubから採用したアプローチであるリンクをajaxifyします：https ：//github.com/browserstate/History.js/

function ajaxify() {
var History = window.History;
$('a[rel="ajax"]').click(function(e){
    if(History.enabled) {
        e.preventDefault();
        var url = $(this).attr("href");
        var options = {};
        History.pushState(null, 'Shop', url);
    }
    else {
        window.location.replace(url);
    }
});
}

イベントハンドラは次のとおりです。

History.Adapter.bind(window,'statechange',function(){
    var State = History.getState();
    var returnLocation = history.location || document.location;
    var url = returnLocation.pathname;
    var options = searchString(returnLocation.search);
    shopUpdate(url,options)
});

そしてこれはajax呼び出しです：

function shopUpdate(url,options) {
     $.ajax({
        url: url,
        type: "GET",
        dataType:'json',
        data: options,
        success: function(data, textStatus, jqXHR){
            $('#shop').html(data.page);
            ajaxify();  
        }
    });
}

すべてを壊すシナリオがあります。一部のリンクは「ajaxified」ではなく、いくつかのajaxリンクをクリックすると、「通常の」リンク、「戻る」の順に、生のJSON出力が得られます。URLは正しいので、リロードすると、必要なページが表示されます。PHPがAjaxであると考えてJSONを提供しているようですが、通常のリンクを介してそこに到達したため、Historyの状態変更は発生しません。私はかなり混乱していて、どんな助けにも感謝します！

ありがとう、トーマス

4

1 に答える 1

1

これはChrome、戻るボタン、キャッシュの問題であることが判明しました。Cache-Control: no-storeJSONヘッダーに追加しましたが、動作するようになりました。

于 2013-02-13T09:30:02.060 に答える