로컬 - 원격 문제

4723 단어 jquery-pjax

묘사

안녕하세요,
저는 PJAX와 오픈소스 CMS Processwire를 결합하여 사용합니다. 저는 이 플러그인을 로컬에서 구축해 왔습니다. 모든 것이 순조롭고 문제가 없습니다. 그래서 이렇게 좋은 플러그인을 제공해 주셔서 감사합니다.
그러나 내 구축을 로컬에서 원격 (mediatemple gs 서버) 으로 이동할 때, 이 사이트는 aax 기능을 잃고 표준 페이지를 불러오는 중입니다.나는 한 페이지를 클릭할 때 네트워크 소스 코드를 보았고, 아래의 캡처를 보았다.무슨 생각 있어요?
screen shot 2015-04-06 at 21 01 11

토론 #1

나는 /projects에 대한 비pjax 요청이 취소된 것을 보았고, 또 하나의 pjax 요청이 괜찮아 보였다.나는 첫 번째 요청이 어디에서 왔는지, 혹은 무엇이 그것을 취소했는지 알 수 없다. 특히 설정 코드를 보지 못한 상황에서는.Chrome의 콘솔에서 XHR 로그인을 활성화하고 디버깅을 수행하는 것이 좋습니다.

토론 #2

@mislav 답장 감사합니다.그것은 마치 자신을 취소한 것 같다.또 다른 요청은 301인 것 같습니다.하지만 그것은 내 로컬 컴퓨터에서 100% 유효하다...이것이 바로 내가 이것이 원격 서버의 문제라고 생각하는 이유다.사이트http://www.juleslister.co.uk그것도 도움이 된다면제안하신 대로 XHR 로그를 활성화하고 검토합니다.

토론 #셋

@mislav 검사가 끝난 후 유효할 때도 있고 무효일 수도 있습니다. 항목을 눌렀을 때 요청이 콘솔에 기록될 수도 있습니다.XHR finished loading: GET "http://juleslister.co.uk/projects/photography/s1-introduces/?_pjax=%23pjax".
그러나 때로는 페이지를 불러오지 않을 때도 있다.

토론 #4

다음은 제 코드 예시입니다...
function ajaxInit() {

    isotopeInit();
    projectSlider();
    videoInit();
    infoTrigger();

    $(document).on('click', 'a[data-pjax]', function() {
        $('.menu-container ul li').removeClass('active');
        $(this).parent().addClass('active');
    });

    //
    $(document).ready(function() {
        $('.menu-container ul li').each(function() {
            var classes = this.classList;
            for (var i=0,len=classes.length; i<len; i++) {
                if ($('body').hasClass(classes[i])) {
                    $(this).addClass('active');
                }
            }
        });
    });

    //
    $.fn.loadImage = function() {
        var toLoad;
        return this.each(function() {
            if ($(window).width() > 768) {
                toLoad = $(this).data('original');
            } else {
                toLoad = $(this).data('medium');
            }
            var $img = $(this);         
            $('<img />').attr('src', toLoad).imagesLoaded(function() {
                $img.attr('src', toLoad).addClass('loaded').removeClass('loading');
            });
        });
    };

    //
    var loadImages = function() {
        $('.lazy').each(function() {
            var $img = $(this);
            $img.waypoint(function() {
                $img.loadImage();
                isotopeInit();
            }, { offset: '150%' });
        });
    };

    loadImages();
    $(window).on('debouncedresize', function() {
        loadImages();
    });

}
ajaxInit();

//
$(document).pjax('a[data-pjax]', '#pjax');
$(document).on('pjax:start', function() {

});
$(document).on('pjax:end', function() {
    isotopeInit();
    projectSlider();
    var bodyClass = $('meta[name=body-class]').attr('content');
    if (bodyClass !== undefined) { document.body.className = bodyClass; }
});
$(document).on('pjax:success', function() {
    ajaxInit();
});

토론 #5

참조https://github.com/defunkt/jquery-pjax/issues/66사용하다$.pjax.defaults.timeout = 3000;이것은 마치 이 문제를 해결한 것 같다.이것은 주의할 만한 가치가 있습니까?재구매 협의에서 기본값을 변경해야 합니까?단지 하나의 생각일 뿐이다.

토론 #6

네, 이런 변통 방법은 듣기에 맞습니다.하지만 서버가 pjax를 잘 사용할 수 없습니다.이것은 301에서 각각 _pjax 인자가 포함된 요청을 _pjax 인자가 없는 현재 URL의 버전으로 바꿉니다.현재 모든 pjax 요청이 막후에서 두 개의 요청을 실행해야 하기 때문에 차단해야 합니다. (xhr 요청이 자동으로 방향을 바꾸기 때문입니다.)이것은 속도가 느린 원인일 수도 있고, 또한 당신이 반드시 초시치를 높여야 하는 원인일 수도 있다.

토론 #7

@mislav 감사합니다.나는 MediaTemple을 사용하기 때문에 내가 그들에게 말해야 할 것이 있는데, 너는 추천할 수 있니?문제를 다루는 거잖아pjax=%23pjax URL?아니면...?

토론 #8

서버가 pjax 요청에 응답하는 정확한 방법은 HTTP 200과 pjax 용기에 주입할 HTML 세션 (예시에서 #pjax 요소) 을 사용하고 사이트 레이아웃을 사용하지 않는 것입니다.
서버가 항상 301로 리셋되어 있으며, 모든 pjax 요청에 다른 요청을 하도록 강요합니다.이것은 필요 없을 것 같지만, 나는 당신의 플랫폼이나 어떻게 플랫폼을 설정하는지에 대해 아무것도 모른다.너는 스스로 이 문제를 해결해야 한다.
나도 네가 왜 이 사이트에서 pjax를 사용하는지 모르겠다.이것은 큰 사이트가 아니다.페이지를 새로 고칠 때 속도가 결코 느리지 않다.왜 pjax를 추가해서 속도를 올려야 한다고 생각하시는지 알고 싶습니다.

토론 #9

@mislav 감사합니다.나는 사방으로 발굴할 것이다.시간 고마워요.
이 사이트에서 pjax를 사용하고 싶은 데는 몇 가지 이유가 있지만 주로 pjax/ajax에 적응하기 위해서입니다.이것은 내가 더 많은 것을 알고 싶고, 더 큰 사이트에서 그것을 점점 더 많이 사용하고 싶다.그래서 나는 작은 일부터 시작해서 메이저리그에 진출하기 전에 어떤 문제든 해결하고 싶다.이것은 매우 좋은 실험과 노는 작은 사이트다.

좋은 웹페이지 즐겨찾기