Welcome to WebmasterWorld Guest from 54.162.105.6

  1. Home
  2. Forums Index
  3. Code, Content, and Presentation / JavaScript and AJAX

Forum Moderators: open

Message Too Old, No Replies

XMLHttpRequest Should Run Javascript

     

inveni0

1:52 pm on Apr 12, 2011 (gmt 0)

Preferred Member

10+ Year Member

joined:Nov 22, 2005
posts: 388
votes: 0


I'm having a bit of trouble here, and I just can't think straight to get the logic for doing what I need. Here's the situation:

I have a site that lets users log int, but will expire their session automatically after 15 minutes. This expiration will use PHP (because that's what validates the session) to redirect to the login page. I have script in place that does this perfectly.

The problem I'm having is that some data loaded for the user is placed within a <div> on the same page (common practice for sites nowadays).

Here's an example. A user logs in. They go to a "search" page. They are inactive for 15 minutes. When the return, they start typing in the search box. The page send their text to the server and returns the response to the "results" div on the page. However, because they are inactive, the result is that the div is filled with the login page, instead, and this just looks bad.

I tried adding the following code to the login page: 

<script type="text/javascript">
document.location.href = 'login.php';
</script>


As you'd expect, the javascript doesn't fire when the XMLHttpRequest Response is received.

How can I remedy this? I thought about setting a timeout in my XMLHttpRequest handler that will redirect if required, but I'm wondering if there is a more elegant solution.

Demaestro

2:34 pm on Apr 12, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 15, 2003
posts:2610
votes: 0


One way is to make an Ajax hit to a PHP method every 15 or so minutes.

The php method checks the logged in status and returns true or false

If the response is true then do nothing, if the response if false then trigger a redirect.

Something like this


xmlhttp.open("GET", "admin.php/isLoggedIn?ran=" + ranString(),true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
if (xmlhttp.responseText=='false'){
window.location ='login.php';
}
}

Fotiman

2:52 pm on Apr 12, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5016
votes: 24


You could include something like this on each of your pages: 

<!DOCTYPE html>
<html>
<head>
<title>Session Management Test</title>
</head>
<body>
<script>
var sessionMgr = {
  sessionTimeout: -1,
  notifyUserTimeout: -1,
  notifyTimerId: -1,
  sessionTimerId: -1,
  remaining: 0,
  init: function (debug) {
    sessionMgr.sessionTimeout = 2; // 15 minutes
    sessionMgr.notifyUserTimeout = sessionMgr.sessionTimeout - 1;
    sessionMgr.setNotification.call(sessionMgr);
    sessionMgr.setSessionTimeout.call(sessionMgr);
    sessionMgr.remaining = sessionMgr.sessionTimeout * 60;
    if (debug) {
      sessionMgr.showDebug();
    }
  },
  setNotification: function () {
    clearTimeout(this.notifyTimerId);
    this.notifyTimerId = setTimeout(function () {
        // Display message to user that session is about to expire
        // Don't use an alert or confirm, though, as they will block
        // the processing and screw up the remaining time so create your
        // own styled dialog instead.
        // The dialog should give the user the option of keeping the
        // session alive, which would in turn call this.setNotification
        // and this.setSessionTimeout to reset the session.
        if (confirm('Session about to expire. Keep alive?')) {
          sessionMgr.setNotification.call(sessionMgr);
          sessionMgr.setSessionTimeout.call(sessionMgr);
        }
      }, this.notifyUserTimeout * 1000 * 60);
  },
  setSessionTimeout: function () {
    clearTimeout(this.sessionTimerId);
    this.sessionTimerId = setTimeout(function () {
        // User's session has expired
        // Redirect to login page
        window.location = 'login.php';
      }, this.sessionTimeout * 1000 * 60);
    this.remaining = this.sessionTimeout * 60;
  },
  showDebug: function () {
    var el = document.createElement('div');
    el.id = 'sessionMgrDebug';
    document.body.appendChild(el);
    setInterval(function () {
      el.innerHTML = 'Session Timeout in: ' + sessionMgr.remaining--;
    }, 1000);
  }
};
sessionMgr.init(true);
</script>
</body>
</html>


This was whipped up rather quickly and could probably be cleaned up quite a bit, but hopefully gives you a general idea.

inveni0

2:53 pm on Apr 12, 2011 (gmt 0)

Preferred Member

10+ Year Member

joined:Nov 22, 2005
posts: 388
votes: 0


@Demaestro

Yes, but that seems a little server-heavy. My current solution works by placing something like this: 

<!-- REDIRECT -->


into the login page. Then, my XMLHttpRequest function attempts to split the result at the word "REDIRECT". If the result is an array with more than a single index, the XMLHttpRequest function handles redirecting to the logout page (where all session variables are reset...just in case of stragglers).

Not perfect, but will work only when required.

tstaheli

4:24 am on Apr 14, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 6, 2003
posts:109
votes: 0


Sometimes you need to parse the responseText and then send it to the DOM: 


ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
result = ajaxRequest.responseText;
document.getElementById(div_id).innerHTML = parseScript(result);
}
}


Here is the parseScript function: 

function parseScript(_source) {
var source = _source;
var scripts = new Array();

// Strip out tags
while(source.indexOf("<script") > -1 || source.indexOf("</script") > -1) {
var s = source.indexOf("<script");
var s_e = source.indexOf(">", s);
var e = source.indexOf("</script", s);
var e_e = source.indexOf(">", e);

// Add to scripts array
scripts.push(source.substring(s_e+1, e));
// Strip from source
source = source.substring(0, s) + source.substring(e_e+1);
}

// Loop through every script collected and eval it
for(var i=0; i<scripts.length; i++) {
try {
eval(scripts[i]);
}
catch(ex) {
// do what you want here when a script fails
}
}

// Return the cleaned source
return source;
}


I hope that makes sense, I'll be glad to explain if you can't get it working.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members

  1. Home
  2. Forums Index
  3. Code, Content, and Presentation / JavaScript and AJAX