집 >웹 프론트엔드 >JS 튜토리얼 >Ajax 대체 새로 고침 페이지

Ajax 대체 새로 고침 페이지

php中世界最好的语言원래의: 2018-04-04 11:24:261270검색

이번에는 페이지 새로고침을 위한 Ajax 롤백을 알려드리겠습니다. 페이지 새로고침을 위한 Ajax 롤백의 주의사항은 무엇인가요?

Ajax 소개:

AJAX는 "Asynchronous Javascript And XML"(Asynchronous JavaScript and XML)을 의미하며 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 의미합니다.

AJAX = 비동기 JavaScript 및 XML(표준 범용 마크업 언어의 하위 집합).

AJAX는 빠르고 동적인 웹 페이지를 만드는 기술입니다.

AJAX를 사용하면 백그라운드에서 서버와 소량의 데이터를 교환하여 웹페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

AJAX를 사용하지 않는 기존 웹페이지에서는 콘텐츠를 업데이트해야 하는 경우 전체 웹페이지를 다시 로드해야 합니다.

문제가 있습니다

Firefox와 같은 브라우저를 사용하여 RMS 웹 사이트에 액세스하는 경우 페이지 간 전환이 AJAX 비동기 요청을 통해 구현되고 페이지의 URL이 변경되지 않는 것을 확인할 수 있습니다. 페이지의 버튼을 통해 액세스할 수 있지만 AJAX 비동기 요청을 통해 롤백 새로 고침을 구현하지만 브라우저는 새로 고침 및 백킹 후 매번 페이지가 초기 환영 페이지로 돌아갑니다. AJAX는 페이지를 부분적으로 새로 고치고 매우 우수한 데이터 로딩 효과를 달성하며 사용자에게 매우 좋은 경험을 제공할 수 있습니다. 그러나 AJAX는 페이지를 클릭할 때 브라우저의 기록 세션에 기록을 유지할 수 없습니다. 예를 들어, 목록 페이지는 비동기 로딩을 사용하여 넘길 수 있습니다. 그러나 사용자가 실수로 페이지를 새로 고치면 사용자가 세션 상태(브라우저 앞으로, 뒤로, 새로 고침)를 변경하면 페이지 번호를 다시 계산해야 합니다. ) ) AJAX는 관련 데이터를 잃게 됩니다.

기존 AJAX에는 다음과 같은 문제가 있습니다.

1. 페이지 내용은 새로 고침 없이 변경할 수 있지만 페이지 URL은 변경할 수 없습니다.

2 시스템의 특정 모듈에 대한 직접 액세스를 지원할 수 없습니다. URL을 입력하고 작업을 클릭해야 합니다

3. 개발자 자신이 가장 먼저 롤백 및 새로 고침을 수행해야 하며 이는 개발자의 작업량을 증가시킬 뿐만 아니라 사용자 습관에도 맞지 않습니다

4. 브라우저는 onhashchange 인터페이스를 도입했으며 이를 지원하지 않는 브라우저는 해시가 변경되었는지 정기적으로 확인만 할 수 있습니다

5. 그러나 이 방법은 검색 엔진에 매우 비우호적입니다

기술을 사용합니다

기존 Ajax로 인해 발생하는 문제를 해결하기 위해 HTML5에 새로운 API가 도입되었습니다. 즉, History.pushState, History.replaceState

는 pushState 및 replacementState 인터페이스를 통해 브라우저 기록을 조작하고 현재 페이지의 URL을 변경할 수 있습니다.

pushState는 지정된 URL을 브라우저 기록에 추가하는 것이고, replacementState는 현재 URL을 지정된 URL로 바꾸는 것입니다.

history.pushState(state, title, url)

현재 URL과 History.state를 기록에 추가하고, 현재에 새 상태와 URL을 추가하세요. 페이지가 새로 고쳐지지는 않습니다.

state: 이동할 URL에 해당하는 상태 정보입니다.

title: 제목(이제 무시되고 처리되지 않음).

url: 이동할 URL 주소는 도메인을 넘을 수 없습니다.

history.replaceState(state, title, url)

history.replaceState() 작업은 replacementState() 메서드가 새 기록 항목을 생성하는 대신 현재 기록 항목을 수정한다는 점을 제외하면 History.pushState()와 유사합니다.

state: 이동할 URL에 해당하는 상태 정보입니다.

title: 제목(이제 무시되고 처리되지 않음).

url: 이동할 URL 주소는 도메인을 넘을 수 없습니다.

addEventListener(type,listener)
addEventListener는 이벤트를 수신하고 그에 따라 처리하는 함수입니다.

type: 이벤트 유형입니다.

listener: 이벤트를 청취한 후 처리하는 기능입니다. 이 함수는 Event 객체를 유일한 매개변수로 받아들여야 하며 어떤 결과도 반환할 수 없습니다.

솔루션

由于AJAX无刷新改变页面内容的，所以页面的URL始终是不变的，为了区分页面上的各个不同内容，首先需要重新定义一下各个页面的URL，因为RMS网站多使用$.post异步请求，我们可以用URL记录post请求的各个参数（请求地址、传递参数），当浏览器进行刷新、回退操作时，根据URL记录的信息自动发送post请求，进入对应页面，从而实现希望的功能。

定义URL语法：

已如下地址为例：

“http://localhost/rms_hold/index.php/Home/Index/loadHomePage#/rms_hold/index.php/Home/ResourceRequest/getRequestPage@apply_type=1&resource_name=ADM_BIZCARD!1”

“http://localhost/rms_hold/index.php/Home/Index/loadHomePage”是原先页面的URL，如果在问题解决之前在RMS网站上进行任何点按操作，网址一直不会有任何变动。现在我们使用“#”分割网址，“#”之后就是我们所记录的ajax请求“/rms_hold/index.php/Home/ResourceRequest/getRequestPage”是请求的地址，它由“#”与“@”分割，而在“@”与“！”之间的这是发向请求地址的各个参数，“apply_type=1”与“resource_name=ADM_BIZCARD”由“&”进行分割。

刷新、回退监听处理：

if (history.pushState) {
window.addEventListener("popstate", function() {
back_ajax_mod_url();
back_ajax_post();
if(location.href.indexOf("#")==-1){
window.location.reload();
}
});
back_ajax_mod_url();
back_ajax_post();
}

如以上代码所示，window对象上提供了onpopstate事件，可以使用addEventListener方法监听onpopstate事件，每当URL因为浏览器回退时都会对得到的URL在back_ajax_mod_url()与back_ajax_post()函数中进行解析、处理，而当浏览器刷新时，根据history.pushState的返回值不空，依然会对得到的URL在back_ajax_mod_url()与back_ajax_post()函数中进行解析、处理。

对外接口：

function back_ajax_mod_url(){
var url_ajax=ajaxback_url.pop();
var title ="Home | UniqueSoft RMS";
if(url_ajax){
history.pushState({ title: title }, title,location.href.split("#")[0] + "#"+ url_ajax);
}
}

介绍一下back_ajax_mod_url()函数，它与数组ajaxback_url组成对外接口，ajaxback_url是一个全局数组，用来存放需要加入到history中的URL，然后由back_ajax_mod_url()函数在无页面刷新的情况下将当前URL和history.state加入到history中。

$("#reportTable tbody").on("click", "trtd img[alt = 'Detail']",
function() {
var id = $(this).attr("business_leave_id");
$.post("MODULE/ReportCenter/getReportDetailPage",{
"report_name": "ADM_TRAVEL_REP",
"item_id": id,
},
function(data) {
ajaxback_url.push("MODULE/ReportCenter/getReportDetailPage"+ "@" + "item_id=" + id + "&" +"report_name=ADM_TRAVEL_REP");
$("#container").html(data);
back_ajax_mod_url();
});
});

以上函数是RMS系统里的一个AJAX异步请求事件，会造成页面无刷新变化，加粗部分就是我们提供的对外接口，使用该接口后在history中会产生一条新的URL用来记录达到该页面的post方法。

URL解析处理器：

如下面函数所示back_ajax_post()为RMS系统的URL解析处理器，根据之前提到的URL语法，读出页面上改变内容的AJAX请求，并且自动发送AJAX请求，获取需要的页面

function back_ajax_post() {
if (location.href.indexOf("#")!= -1) {
var post_href =location.href.split("#")[1];
if (location.href.indexOf("@")!= -1) {
var post_url =post_href.split("@")[0];
var post_params =post_href.split("@")[1];
if(post_params.indexOf("!") != -1) {
var post_page_index =post_params.split("!")[1];
post_params =post_params.split("!")[0];
};
} else {
var post_url = post_href;
var post_params = "";
var post_page_index = "";
}
var get_resource_href =location.href;
if(get_resource_href.indexOf("!") != -1) {
get_resource_href =get_resource_href.split("!")[0];
};
if(get_resource_href.indexOf("resource_name=") != -1) {
var has_resource_name =get_resource_href.split("resource_name=")[1];
var siderbar_index =has_resource_name;
} else if(get_resource_href.indexOf("report_name=") != -1) {
var has_resource_name =get_resource_href.split("report_name=")[1];
var siderbar_index =has_resource_name.split("_REP")[0];
};
if (!post_page_index ||$("#personalInfo").length <= 0) {
if (!post_url) {
window.location.href ="MODULE";
}
$.ajax({
type: "post",
url: post_url,
data: post_params,
success: function(res){
$(&#39;#pageContainer&#39;).html(res);
if(post_page_index) {
location.href= location.href.split("!")[0] + "!1";
} else {
location.href= location.href.split("!")[0];
};
},
error: function(res) {
window.location.href = "MODULE";
},
});
}
//for request page next&back
if (post_page_index) {
var previous_index =$(".navbar,.steps .navbar-innerul.row-fluid").find("li.active").find(".number").text();
var differ =post_page_index - previous_index;
lock_for_req_back_next =1;
if (differ > 0) {
for (var i = 0; i <differ; a="" bar="" differ="-differ;" else="" for="" i="0;" if="" li="" lock_for_req_back_next="0;" resource_name="$(this).attr("href").split("resource_name=")[1];" side="" siderbar_index="=" ul.page-sidebar-menuli="" ul.sub-menu="" var=""> span.arrow').addClass('open');
$(this).parents('.sub-menu').show();
});
$(this).parent('li').parents('li').addClass('active open');
return false;
} else {
$('.sub-menu').hide();
}
});
$("ul.page-sidebar-menuli").not(".open").find("ul").hide();
}
}
</differ;>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Ajax 대체 새로 고침 페이지

관련 기사