Wie man eine Umleitungsanfrage nach einem jQuery Ajax-Aufruf verwaltet

Question

Ich benutze $.post() um ein Servlet mit Ajax aufzurufen und dann das resultierende HTML-Fragment zu verwenden, um eine div Element auf der aktuellen Seite des Benutzers. Wenn die Sitzung jedoch beendet wird, sendet der Server eine Umleitungsanweisung, um den Benutzer zur Anmeldeseite zu schicken. In diesem Fall ersetzt jQuery das div Element mit dem Inhalt der Anmeldeseite und zwingt die Augen des Benutzers zu einem seltenen Anblick.

Wie kann ich eine Redirect-Direktive aus einem Ajax-Aufruf mit jQuery 1.2.6 verwalten?

Answer 1

Ich habe diese Frage gelesen und den Ansatz umgesetzt, der für die Einstellung der Antwort angegeben wurde HTTP-Statuscode auf 278, um zu vermeiden, dass der Browser die Weiterleitungen transparent handhabt. Obwohl dies funktionierte, war ich ein wenig unzufrieden, da es ein bisschen wie ein Hack ist.

Nach weiterem Herumprobieren habe ich diesen Ansatz verworfen und verwendet JSON . In diesem Fall haben alle Antworten auf AJAX-Anfragen die Statuscode 200 und der Körper der Antwort enthält ein JSON-Objekt, das auf dem Server erstellt wird. Das JavaScript auf dem Client kann dann das JSON-Objekt verwenden, um zu entscheiden, was es tun soll.

Ich hatte ein ähnliches Problem wie Sie. Ich führe eine AJAX-Anfrage, die 2 mögliche Antworten hat: eine, die leitet um. den Browser auf eine neue Seite und eine, die Ersetzt ein bestehendes HTML-Formular auf der aktuellen Seite durch ein neues zu ersetzen. Der jQuery-Code dazu sieht etwa so aus:

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

Das JSON-Objekt "data" wird auf dem Server so aufgebaut, dass es 2 Mitglieder hat: data.redirect y data.form . Ich fand diesen Ansatz viel besser.

Answer 2

Ich habe dieses Problem folgendermaßen gelöst:

1. Hinzufügen einer benutzerdefinierten Kopfzeile zur Antwort:

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

2. Binden einer JavaScript-Funktion an die ajaxSuccess und prüft, ob die Kopfzeile existiert:

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

Answer 3

Kein Browser verarbeitet 301- und 302-Antworten korrekt. Der Standard besagt sogar, dass sie "transparent" gehandhabt werden sollen, was für die Anbieter von Ajax-Bibliotheken ein riesiges Problem darstellt. Unter Ra-Ajax waren wir gezwungen, den HTTP-Antwortstatuscode 278 (nur ein "unbenutzter" Erfolgscode) zu verwenden, um transparente Weiterleitungen vom Server zu behandeln...

Das ärgert mich wirklich, und wenn jemand hier etwas "Einfluss" bei W3C hat, wäre ich dankbar, wenn Sie W3C darüber informieren könnten. wissen dass wir 301- und 302-Codes wirklich selbst handhaben müssen...! ;)

Answer 4

Die Lösung, die schließlich implementiert wurde, bestand darin, einen Wrapper für die Callback-Funktion des Ajax-Aufrufs zu verwenden und in diesem Wrapper das Vorhandensein eines bestimmten Elements im zurückgegebenen HTML-Chunk zu überprüfen. Wenn das Element gefunden wurde, führte der Wrapper eine Umleitung aus. Wenn nicht, leitete der Wrapper den Aufruf an die eigentliche Callback-Funktion weiter.

Unsere Wrapper-Funktion war zum Beispiel so etwas wie:

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

Wenn wir dann den Ajax-Aufruf machen, verwenden wir etwas wie:

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

Das hat bei uns funktioniert, weil alle Ajax-Aufrufe immer HTML innerhalb eines DIV-Elements zurückgegeben haben, das wir verwenden, um einen Teil der Seite zu ersetzen. Außerdem mussten wir nur auf die Anmeldeseite umleiten.

Answer 5

Ich mag die Methode von Timmerz mit einem Hauch von Zitrone. Wenn Sie jemals zurückkommen contentType von text/html wenn Sie ein Kind erwarten JSON werden Sie höchstwahrscheinlich umgeleitet. In meinem Fall lade ich die Seite einfach neu, und sie wird auf die Anmeldeseite umgeleitet. Oh, und überprüfen Sie, dass der jqXHR-Status 200 ist, was dumm erscheint, weil Sie in der Fehlerfunktion sind, richtig? Andernfalls erzwingen legitime Fehlerfälle ein iteratives Neuladen (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();
    }

});