jQuery Ajax 호출 후 리다이렉트 요청을 관리하는 방법

by

사용하고 있다$.post()Ajax를 사용하여 servlet을 호출하고 그 결과 HTML fragment를 사용하여 servlet을 대체하다div사용자의 현재 페이지에 있는 요소.단, 세션이 타임아웃되면 서버는 사용자를 로그인 페이지로 전송하기 위한 리다이렉트 디렉티브를 송신합니다.이 경우 jQuery가 다음 명령어를 대체하고 있습니다.div로그인 페이지의 내용이 포함된 요소를 사용하여 사용자의 눈을 실제로 보기 어려운 장면을 볼 수 있습니다.

jQuery 1.2.6을 사용한Ajax 콜로부터의 리다이렉트 디렉티브를 관리하려면 어떻게 해야 합니까?



질문에 대한 답변



이 질문을 읽고 브라우저가 리다이렉트를 투명하게 처리하지 않도록 응답 HTTP 상태 코드를 278로 설정하는 방법을 구현했습니다.이게 먹혀들었지만, 좀 엉터리여서 조금 불만스러웠습니다.

좀 더 자세히 살펴본 후, 저는 이 접근법을 버리고 JSON을 사용했습니다.이 경우 AJAX 요구에 대한 모든 응답은 상태 코드 200을 가지며 응답 본문에는 서버 상에 구성된 JSON 개체가 포함됩니다.클라이언트의 JavaScript는 JSON 개체를 사용하여 필요한 작업을 결정할 수 있습니다.

나도 너와 비슷한 문제가 있었어.AJAX 요청에는 2개의 응답이 있습니다.하나는 브라우저를 새 페이지로 리다이렉트하는 것이고 다른 하나는 현재 페이지의 기존 HTML 양식을 새 페이지로 대체하는 것입니다.이를 위한 jQuery 코드는 다음과 같습니다.

$.ajax({
type: "POST",
url: reqUrl,
data: reqBody,
dataType: "json",
success: function(data, textStatus) {
if (data.redirect) {
 // data.redirect contains the string URL to redirect to
 window.location.href = data.redirect;
} else {
 // data.form contains the HTML for the replacement form
 $("#myform").replaceWith(data.form);
}
} });

JSON 오브젝트 “data”는 2개의 멤버를 가지도록 서버에 구축됩니다.data.redirect그리고.data.form이 방법이 훨씬 낫다는 것을 알았습니다.



이 문제는 다음과 같이 해결했습니다.

  1. 응답에 커스텀헤더 추가:

    public ActionResult Index(){
if (!HttpContext.User.Identity.IsAuthenticated)
{
HttpContext.Response.AddHeader("REQUIRES_AUTH","1");
}
return View(); }

  2. JavaScript 함수를 이벤트에 바인딩하고 헤더가 존재하는지 확인합니다.

    $(document).ajaxSuccess(function(event, request, settings) {
if (request.getResponseHeader('REQUIRES_AUTH') === '1') {
window.location = '/';
} });


301 및 302 응답을 올바르게 처리하는 브라우저는 없습니다.그리고 실제로 표준에는 “투명하게” 처리해야 한다고 명시되어 있습니다. 이는 Ajax 라이브러리 벤더에게 엄청난 골칫거리입니다.Ra-Ajax에서는 서버로부터의 투명한 리다이렉트를 처리하기 위해 HTTP 응답 상태 코드 278(일부 “사용되지 않은” 성공 코드)을 사용해야 했습니다.

정말 짜증나네요.여기 있는 누군가가 W3C에서 ‘당기기’를 하고 있다면 W3C에 301과 302 코드를 우리가 직접 처리해야 한다는 것을 알려주시면 감사하겠습니다.😉



최종적으로 구현된 솔루션은 Ajax 콜의 콜백 함수에 래퍼를 사용하는 것입니다.이 래퍼에서는 반환된HTML 청크에 특정 요소가 존재하는지 확인합니다.요소가 발견되면 래퍼에서 리디렉션을 실행한 것입니다.그렇지 않은 경우 래퍼에 의해 콜이 실제 콜백 함수로 전송되었습니다.

예를 들어 래퍼 기능은 다음과 같습니다.

function cbWrapper(data, funct){
if($("#myForm", data).length > 0)
top.location.href="login.htm";//redirection
else
funct(data); }

그런 다음 Ajax에 전화를 걸 때 다음과 같은 방법을 사용했습니다.

$.post("myAjaxHandler",
{
param1: foo,
param2: bar
},
function(data){
cbWrapper(data, myActualCB);
},
"html" );

모든 Ajax 콜이 페이지의 일부를 치환하기 위해 사용하는 DIV 요소 내에서 항상 HTML을 반환했기 때문에 이 방법은 우리에게 효과가 있었습니다.또한 로그인 페이지로 리다이렉트만 하면 되었습니다.



레몬을 살짝 꼬아 넣은 티머즈의 방식이 마음에 들어요.컨텐츠가 반환되는 경우JSON을 예상할 때 리다이렉트되는 텍스트/html 유형입니다.제 경우 페이지를 새로고침하기만 하면 로그인 페이지로 리다이렉트 됩니다.아, 그리고 jqXHR 상태가 200인지 확인해 주세요.오류 함수이기 때문에 바보같죠?그렇지 않으면 정당한 에러 케이스에 의해 강제적으로 새로고침(oops)이 반복됩니다.

$.ajax(
error:
function (jqXHR, timeout, message) {
var contentType = jqXHR.getResponseHeader("Content-Type");
if (jqXHR.status === 200 && contentType.toLowerCase().indexOf("text/html") >= 0) {
// assume that our login has expired - reload our current page
window.location.reload();
}
});