집 >웹 프론트엔드 >JS 튜토리얼 >AJAX 페이지 상태 유지 아이디어에 대한 자세한 설명

AJAX 페이지 상태 유지 아이디어에 대한 자세한 설명

韦小宝원래의: 2018-01-01 19:46:311365검색

AJAX가 인기를 얻었을 때 AJAX는 클릭, 페이지 넘김 등 많은 정보를 비동기적으로 요청했습니다. 일반적으로 이 경우 브라우저를 새로 고치면 현재 페이지가 초기 상태로 재설정됩니다. 본 정보 URL을 친구에게 보내는 것은 말할 것도 없습니다. 구현 아이디어를 공유하겠습니다. AJAX 페이지 상태 유지 아이디어에 대한 자세한 설명을 살펴보겠습니다. 기존 페이지의 경우 브라우저는

url을 통해 페이지에 액세스하고, 그런 다음 렌더링 및 표시를 위해 브라우저로 다시 전송됩니다. AJAX가 대중화되자 AJAX는 클릭, 페이지 넘김 등 많은 정보를 비동기적으로 요청했습니다. 일반적으로 이 경우 브라우저를 새로 고치면 현재 페이지가 초기 상태로 재설정됩니다. 본 정보 URL을 친구에게 보내는 것은 말할 것도 없습니다.

기존 상태는 다음과 같이 주소 표시줄에 저장됩니다: www.abc.com/search?s=abc&id=23&page=3

이 방법을 사용하면 브라우저가 페이지를 새로 고치지만 앵커를 사용하면 , 브라우저를 새로 고치지 않습니다. 구체적으로 데이터를 요청하는 페이지를 클릭하면 주소 표시줄의 '#' 뒤의 값이 변경됩니다. 다음과 같은 네 번째 페이지

로 이동합니다.

abc.com/search#s=abc&id=23&page=4

이것은 사용자가 "앞으로" 또는 "뒤로"를 클릭하는 경우 충분하지 않습니다. 따르십시오. 저는 타이머

를 사용하여 다른 사람들이 온라인에서 수행한 작업을 기반으로 문제를 해결했습니다.

/**
 * URL Watcher(require jQuery)
 * 监测url的变化
 * useage:
 * UrlWatcher.init(50);
 * UrlWatcher.AddListener(function(url,isFirstLoad){
 *    FrontEngine.generateFront();
 * });
 *
 */
var UrlWatcher = {
  "init": function (waittime) {
    this.UrlArray = [window.location.href];//set current url as default
    this.ListenerArray = [];
    this.ResetWaitTime(waittime);
  },
  "AddListener": function (listener) {//add a process function
    this.ListenerArray.push(listener || function () {});
  },
  "DeleteListener": function () {
    this.ListenerArray = [];
  },
  "ResetWaitTime": function (time) {//start timer
    if (this.IntervalHandle) {window.clearInterval(this.IntervalHandle); }
    this.WaitTime = time || 1000;
    this.IntervalHandle = window.setInterval(this.ListenerCall.setThis(this), this.WaitTime);
  },
  "ListenerCall": function () {
    var self = this, url = window.location.href;
    if (self.UrlArray[self.UrlArray.length - 1] === url) {return; }
    window.clearInterval(this.IntervalHandle);
    $.each(this.ListenerArray, function (c, listener) {
      listener(url, self.UrlArray.length === 0);
    });
    this.UrlArray.push(url);
    this.ResetWaitTime(this.WaitTime);
  }
};

Gmail도 상태 보존을 사용하지만 URL은 변경되지 않습니다. RSH 및 History Framework와 같이 이 기능을 구현하는 특수 프레임워크도 있습니다.

이 타이머 방법을 사용하기 전에 몇 가지 문제를 해결했습니다. 그러나 이 타이밍 방법은 실시간으로 트리거되지 않으며 URL의 해시 변경 사항을 지속적으로 감지하도록 타이밍이 맞춰져 있기 때문에 항상 지연이 발생합니다.

해시 얘기가 나와서 말인데, 해시 변경 사항은 새 브라우저에서 모니터링할 수 있습니다. HTML5에 정의된 haschange 이벤트입니다. 현재 각 브라우저는 다음과 같이 haschange를 지원합니다:

Gecko 1.9.2 (Firefox 3.6/Thunderbird 3.1/Fennec 1.0)

IE 8

WebKit 528+ (Safari/Google Chrome)

Opera 10.70

해당 브라우저 버전만 이전보다 오래된 버전은 모두 지원됩니다. 또한 IE8이 IE7 모드로 실행 중인 경우 onhashchange 메소드가 window 아래에 존재하지만 이 이벤트가 발생하지 않습니다. IE의

document

.documentMode를 감지하면 감지할 수 있습니다.

if( (&#39;onhashchange&#39; in window) && ((typeof document.documentMode===&#39;undefined&#39;) || document.documentMode==8))
{   // 浏览器支持onhashchange事件   
indow.onhashchange = hashChangeFire; // TODO，对应新的hash执行的操作函数
} 
else 
{   // 不支持则用定时器检测的办法   
setInterval(function() {     
var ischanged = isHashChanged(); // TODO，检测hash值或其中某一段是否更改的函数    
if(ischanged)
{       
hashChangeFire(); // TODO，对应新的hash执行的操作函数    
}  
},
150);
}

ie6/7 및 ie8 호환 모드에는 여전히 호환성 문제가 있습니다. 이러한 브라우저는 앵커 포인트 변경에 대한 기록을 생성하지 않기 때문에 브라우저의 앞으로 및 뒤로 버튼을 사용하여 추적할 수 없습니다.

이 문제를 해결하려면 숨겨진 iframe을 만들고 "jQuery hashchange 이벤트"와 같이 iframe의 해시를 변경하여 IE 기록을 제어할 수 있습니다.

위는 편집자가 소개한 AJAX 페이지 상태 유지 아이디어에 대한 자세한 설명입니다. 모든 분들께 도움이 되었으면 좋겠습니다! !

AJAX 페이지 상태 유지 아이디어에 대한 자세한 설명

관련 기사