Serverside and Clientside Redirection

23 Apr 2011 - 3 minute read
categories: notes tags: php js

Redirection can be achieved Server-Side or Client-Side.

Redirection on client side involves the following steps:

  1. User requests a Page using an URI.
  2. Server sends a page based on that.
  3. That page will have JavaScript that will redirect user to another page.
  4. So, again server will get the request for the new page and then server will give response based on new request.
  5. That implies: Client-side -> Server-side -> Client-side -> Server-side -> Client-side.

Redirection on Server-Side:

  1. User requests a Page using URI.
  2. Server sends a page based on that.
  3. Client sends header information back to the server (further reading: HTTP Headers)
  4. The server responds very quickly
  5. Client receives header and can follow quickly to the new location.
  6. Client-side -> Server-side -> Client-side(header information) -> Server-side -> Client-side.

Server-Side redirection is faster and more user friendly than Client-Side redirection both for the client and the server.

PHP Redirection

<?php
$my_link = "http://www.rhnvrm.co.cc/";
header("Location: $my_link");
?>

This piece of code redirects you to a different page, but the catch is — it won’t work if you echo‘ed some output to the browser. The function actually modifies the HTML headers to include location. Headers are always sent to the browser before any content, and therefore it’s too late to modify them after output has started. Fortunately, there is a quite simple solution for that.

Output Buffers

further reading: Output Control Functions in PHP allow you to collect all output data into an output buffer before sending it to the browser. Using the following code:

<?php  //code by rhnvrm. ($rhnvrm_any is any variable, can be changed accordingly)
ob_start(); //start buffering and collect all outputs
$rhnvrm_link = "http://www.rhnvrm.co.cc/";
echo "You are being redirected to: $rhnvrm_link"; //output
ob_clean(); //clean the buffer and enable sending headers
header("Location: $rhnvrm_link"); //redirect
?>

Javascript Redirection

Now we will see redirection using Javascript that is supported by every modern browser and does not require any resources of the server. Javascript is an object oriented language and blends with HTML.

So, you want to move to another webpage after a certain interval. Or you want to tell your visitors that your site has moved and transfer the to your new site. Or you want to make an advertisement service. Well then Javascript redirection is for you.

The primary use of JavaScript is to write functions that are embedded in or included from HTML pages and that interact with the Document Object Model (DOM) of the page.

So, what we can logically do is to alter the window’s location property using the following code:

<script>
    var my_location= "http://rhnvrm.co.cc/blog";
    window.location = my_location;
</script>

Now you might want to create a timed delay between redirection so that people know that they are being transfered to a new location.

<html>
<head>
<script type="text/javascript">
function delayer(){
  var rhn_link= "http://rhnvrm.co.cc/blog";
  window.location = rhn_link;
}
</script>
</head>
<body onLoad="setTimeout('delayer()', 5000)">
    <h2>Prepare to be redirected!</h2>
    <p>
    This page is a time delay redirect, 
    please wait for 5000 milliseconds (5 seconds)
    </p>
</body>
</html>

setTimeout() Method calls a function or evaluates an expression after a specified number of milliseconds, where:

setTimeout(myfunc(),millisec)

millisec = the number of milliseconds to wait before executing the code

See Also