집 >웹 프론트엔드 >JS 튜토리얼 >페이지 상태에서 Ajax를 유지하는 방법

페이지 상태에서 Ajax를 유지하는 방법

php中世界最好的语言원래의: 2018-04-02 09:27:511226검색

이번에는 페이지 상태에서 ajax를 유지하는 방법과 페이지 상태에서 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 메서드가 존재하지만 이 이벤트가 발생하지 않습니다. IE의 document.documentMode를 감지하면 감지할 수 있습니다.

if( ('onhashchange' in window) && ((typeof document.documentMode==='undefined') || 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 기록을 제어할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!