새로 고침 없이 페이지를 로드하려면 Yii 통합 pjax(pushstate+ajax)를 사용하세요.-JS 튜토리얼-php.cn

새로 고침 없이 페이지를 로드하려면 Yii 통합 pjax(pushstate+ajax)를 사용하세요.

亚连

풀어 주다： 2018-05-24 17:29:56

원래의

1925명이 탐색했습니다.

이 기사에서는 페이지를 새로 고치지 않고 로드하기 위해 pjax(pushstate+ajax)를 통합하는 Yii를 소개합니다. 함께 배워봅시다

Pjax가 무엇인가요?

Pjax = history.pushState + Ajax
   = history.pushState + Async JS + XML(xhr?)

로그인 후 복사

BOM 개체 기록이 향상되었습니다. 주로 기록 스택 작업을 위해 과거에는 전체 페이지를 이동하고 새로 고치는 교체, 이동 등만 있었습니다. 이제는 pushState가 있습니다. , replacementState 등 간단하게 히스토리 스택을 조작하는 방법은 히스토리 스택의 내용을 간단히 수정하는 것이며 부작용이 없습니다(페이지가 점프하거나 새로 고쳐지지 않음)

PJAX 효과

동적으로 로드된 콘텐츠 ajax는 URL을 통해 추적할 수 있습니다. 이 기술은 2단계 뷰 레이아웃이 있는 뷰에서 특히 유용합니다. 새로 고침 없이 페이지를 로드한다는 것은 응답 속도와 사용자 경험이 크게 향상되었음을 의미합니다. 정적 스크립트와 공통 모듈이 많을 때 재사용 비용이 최대한 절약됩니다. 애플리케이션 예제는 HTML5 pushState를 기반으로 구현된 현재 Google+, Facebook 및 새로운 버전의 Weibo를 참조할 수 있습니다. Google Plus의 성능이 가장 눈에 띕니다. 탐색 표시줄 주소를 클릭하면 화살표가 대상과 함께 이동하며 동시에 로드된 페이지가 페이드 인됩니다.

더티 URL 및 클린 URL

pjax가 등장하기 전에는 페이지를 새로 고치지 않고 로드하고 URL을 통해 추적하려면 브라우저에서 window.location.hash 속성을 지원해야 했습니다. url# 앵커 뒤에 기록된 주소를 판단하여 로드해야 할 콘텐츠를 결정하며, 구체적인 구성 방법은 해시 변경 모니터링 기능을 작성하고, 해시 변경이 트리거되면 로드할 콘텐츠를 판단합니다. 단점은 ie6과 같은 낮은 버전의 브라우저는 해시를 지원하지 않으며, 앞으로 및 뒤로 달성하려면 기록 URL을 기록하기 위해 추가 iframe을 구축해야 한다는 것입니다. 가장 큰 문제는 # 이후 생성된 콘텐츠가 검색 엔진에서 색인화되지 않는다는 것입니다. Google은 이전에 #!을 사용하여 주소를 ?escape_fragment=url로 안내하는 솔루션을 제공했습니다. , Renren, Sina Weibo 및 폐쇄된 Douban의 모든 사람들은 이 해시뱅이 사용되었거나 사용되고 있음을 확인했습니다. 통과하다#! 새로 고치지 않고 로드된 URL을 얻기 위해 일반적인 방법은 검색 엔진(국내 Baidu 등)에 포함되기 쉽지 않기 때문에 상대적으로 pjax는 clean url을 사용하여 동일한 효과를 얻을 수 있습니다. 다양한 A 브라우저와 호환이 잘 되기 때문에 지금 가장 적합한 방법은

PHP+jQuery를 사용하여 PJAX 구현

jQuery가 이미 오픈소스로 제공하고 있기 때문에 pushState 기반 자바스크립트 플러그인을 처음부터 작성할 필요가 없습니다. 쉽게 구현할 수 있습니다. 현재 개발 중인 프로젝트에 도입했는데, 웨이보 새 버전의 홍보는 말할 것도 없고, 원래의 모습과도 매우 잘 어울린다. 사용하고 나면 다음과 같습니다

시작 전 준비 사항:

1.jQ 기반 pjax 플러그인(github의 오픈 소스 프로젝트) https:/ /github.com/defunkt/jquery-pjax

3. PHP 프로젝트 코드 (쉬운 공유를 위해 이 글에서는 yii 프레임워크를 사용하여 시연하고 있으며, 실제 개발도 유사합니다.)

1. 프론트엔드 구현

사용하기 정말 간단하고 jquery-pjax 플러그인은 잘 패키지되어 있으며 기본 설정에 따라 확실히 사용자 정의할 수 있습니다(예: g plus의 효과 복사). 다음은 위의 내용을 통합한 기본 HTML 샘플 코드입니다. 단계:

<?php
Yii::app()->clientScript->registerCoreScript(&#39;jquery&#39;);
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . &#39;/js/jquery-pjax/jquery.pjax.js&#39;);//具体以你存放pjax的实际位置为准
?>
<p id="nav">
  <a href="<?php echo Yii::app()->createUrl(&#39;article/index&#39;);?>">article</a>
</p>
<p id="main">替换的内容</p>
<script type="text/javascript">
  $(document).ready(function(){
    $("#main").pjax("a");
  });
</script>

로그인 후 복사

궁극적인 목표는 a 태그를 클릭하는 것이며, ajax를 통해 반환된 결과는 main의 id와 함께 p에 포함됩니다. 텍스트는 해당 주소 콘텐츠로 대체되고, URL은 자동으로 업데이트됩니다. 페이지가 다시 로드되지 않습니다. 백엔드에서 처리할 콘텐츠 구현을 시작해 보겠습니다

2. PHP 측 구현

PHP 측에서 처리해야 하는 작업은 주로 두 가지입니다. 1. 레이아웃 뷰 레이아웃 구현 2. 요청 판단 pjax에서 옵니다

Yii 프레임워크에서 구현:

컨트롤러에서 작업을 다음과 같이 처리합니다(예를 들어 Article 색인 사용).

public function actionIndex() {
  $this->layout = &#39;//layouts/column1&#39;;
  $dataProvider = new CActiveDataProvider(&#39;Article&#39;, array(
    &#39;criteria&#39; => array(&#39;order&#39; => &#39;create_time DESC&#39;)
  ));
  if (array_key_exists(&#39;HTTP_X_PJAX&#39;, $_SERVER) && $_SERVER[&#39;HTTP_X_PJAX&#39;]) {
    $this->renderPartial(&#39;index&#39;, array(
       &#39;dataProvider&#39; => $dataProvider,
    ));
  } else {
    $this->render(&#39;index&#39;, array(
      &#39;dataProvider&#39; => $dataProvider,
    ));
  }
}

로그인 후 복사

효과 데모 사진:

기사 링크나 기사 링크를 클릭하면 다음 효과 페이지가 나타납니다 :