Ajax가 새로 고침을 잃은 후 데이터를 처리하는 방법-JS 튜토리얼-php.cn

이번에는 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中文网其它相关文章！