After a jQuery Ajax call, how do you handle a redirect request?

Problem

I’m calling a servlet with Ajax using $.post(), then utilizing the resultant HTML fragment to replace a div element on the user’s current page. If the session expires, the server sends the user to the login page through a redirect directive. In this scenario, jQuery replaces the div element with the contents of the login page, forcing the user’s gaze to see a very unique scene.

Is it jQuery 1.2.6?

Asked by Elliot Vargas

Solution #1

I read this question and implemented the approach that has been stated regarding setting the response HTTP status code to 278 in order to avoid the browser transparently handling the redirects. Even though this worked, I was a little dissatisfied as it is a bit of a hack.

After more digging around, I ditched this approach and used JSON. In this case, all responses to AJAX requests have the status code 200 and the body of the response contains a JSON object that is constructed on the server. The JavaScript on the client can then use the JSON object to decide what it needs to do.

I had a problem that was comparable to yours. I make an AJAX request with two possible outcomes: redirecting the browser to a new page or replacing an existing HTML form on the current page with a new one. To accomplish this, use the following jQuery code:

$.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);
        }
    }
});

On the server, the JSON object “data” is created with two members: data.redirect and data.form. This method worked much better for me.

Answered by Steg

Solution #2

I solved this issue by:

Answered by 5 revs, 4 users 77% SuperG

Solution #3

No browsers correctly handle 301 and 302 answers. In fact, the standard specifies that they should be handled “transparently,” which presents a major challenge for Ajax Library providers. In Ra-Ajax we were forced into using HTTP response status code 278 (just some “unused” success code) to handle transparently redirects from the server…

This irritates me greatly, and if anyone here has “pull” with W3C, I would appreciate it if you could inform W3C that we need to handle 301 and 302 codes ourselves…!

Answered by Thomas Hansen

Solution #4

The solution that was subsequently implemented was to employ a wrapper for the Ajax call’s callback function, which checked for the presence of a specified element on the returned HTML chunk. The wrapper performed a redirection if the element was discovered. If this was not the case, the call was routed to the real callback function by the wrapper.

For instance, our wrapper function looked like this:

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

Then, when it was time to make the Ajax call, we did something like this:

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

We were able to accomplish this because all Ajax calls returned HTML within a DIV element, which we used to change a section of the page. In addition, we simply had to redirect to the login page.

Answered by Elliot Vargas

Solution #5

Timmerz’s approach, with a hint of lemon, is one of my favorites. You’re most likely being rerouted if you obtain a contentType of text/html while you’re expecting JSON. In my instance, all I have to do is reload the website to be forwarded to the login page. Oh, and make sure the jqXHR status is 200, which seems odd given that you’re in the error function. Otherwise, valid error cases will necessitate an iterative reload (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();
    }

});

Answered by BrianY

Post is based on https://stackoverflow.com/questions/199099/how-to-manage-a-redirect-request-after-a-jquery-ajax-call