jQuery.ajax() with Automatic Login Management - CodeProject

:

Introduction

In a truly AJAX compliant project, it should be a 'MUST' to remain in the page and avoid 'page refresh' during login process.

There are many reasons for this:

  • It is not nice (for the user of your web application) to have to leave a page in the middle of a long and complex data input session because the server requires the user to login. Even worse in the case of an Ajax control.
  • It can be very difficult and expensive to persist correctly the full state of the page (try to think what happens with server in 'load balancing': you need a DB.)
  • If it is not needed, why persist the state into the server? The state is in the page, that is THE STATE, it is all the time up-to-date and it is for free.

Write a function that adds the login management feature to jQuery.ajax() is an easy task. The challenge was write a function that 'behaves' exactly like the original one in a way that both are interchangeable (this means: override).

The following snippet solve this problem.

Background

Know how to use jQuery.ajax();

Using the Code

Use this function: 'M22.S.ajax()' in the same way you use the original jQuery.ajax() and do not care about login (client side).

  • M22 is the general namespace for every snippet I write
  • S is because jQuery uses $.
  • ajax() because this function is exactly like jQuery.ajax()

Here, you can find a more detailed demo page.

Here, you can download the code for M22.S.ajax().

The client side code is as given below:

function aDemojQueryAjax_click() {
    try {
        var settings = {
            "url": "/Stuffs/Ajax/Scripts/echo.ajax.aspx",
            "data": { "data": "your data" },
            "success": settings_success,
            "error": settings_error,
            "complete": settings_complete
        }

        <code>M22.S.ajax</code>(settings)
        .done(promise_done)
        .fail(promise_fail)
        .always(promise_always)
        .complete(promise_complete);
    }
    catch (jse) {
        console.error(jse);
    }
}

This code does nothing. (It is only an 'how to use' example.)

The server side is as follows:

public string data = "";

public void Page_Load(object sender, EventArgs e)
{
    if (Session["admin"] == null)
    {
        Response.ClearContent();

        Response.StatusCode = 403;
        Response.StatusDescription = "Permission denied. (login please.)";

        Response.End();
    }
    else
    {
        data = "your data from the server";
        Response.Write(data);
    }
}

This code is the simplest way to manage login. (It is only an 'how to use' example.)

Points of Interest

These two lines of code:

Response.StatusCode = 403;
Response.StatusDescription = "Permission denied. (login please.)";

implement the correct way to send the 'server status' to the client. The correct number should be 401 but in a Microsoft MVC project, this value is used to automatically redirect to the login page. (Automatically redirect! A web application that behaves in that manner could be the best application in the world, but it is not an AJAX compliant web application: it is in the meaning of things!)

The algorithm: When a user who is not logged in makes a request, the server sends back a status code 403 (access forbidden error). The function recognizes this code and shows a log-in dialog. If the log-in is successful, the function sends the original request again. The user can retry the login three times, then the request is aborted.

M22.S.ajax() is implemented using callbacks and promises in the same way as in the original jQuery.ajax(). This makes those two functions perfectly interchangeable.

You can override the original function with the new one in that way:

$.ajax = M22.S.ajax; // M22.S.ajax() 'overrides' '$.ajax()'

Doing this, every function that uses jQuery.ajax() will implement the new feature. Also, the built-in functions jQuery.post(); jQuery.get(); jQuery.load; ...

History