Demo
http://www.davidvanvickle.com/examples/ep8/index.htm

Download
http://www.davidvanvickle.com/examples/ep8/ep8.zip

Web pages can be highly dynamic. We can log in to a site and get relevant data like a bank balance or see our social network friends – information specific to us. That means our page requests to the server are identified as being ours and the server can compile something with our data in it.

The internet’s way of communicating (“hypertext transfer protocol” or HTTP) is stateless. That means, on it’s own, it doesn’t remember the visitor from one page to the next. It just sends anonymous requests to the server, and the server sends back that static page. Fortunately there are a few mechanisms for distinguishing one request from another, which allows us to make web pages more personalized.

One mechanism is the cookie. Cookies are strings of text stored by the browser. A cookie allows the browser to remember things between pages. A common use of cookies is with sessions. When you visit a web site, you are in a session with that web site. Cookies are sent from the site and contain data specific to that session, such as a session ID. The browser receives and stores the cookie, then sends it back to the web site every time a new page is requested. So now the server, on some level, knows who is asking for what. The server can respond differently depending on the cookie value sent from the browser.

Use Javascript to access cookies on the client-side.

alert(document.cookie);

Here is a Javascript object for reading, writing and deleting cookies.

http://www.davidvanvickle.com/examples/ep8/index.htm
http://www.davidvanvickle.com/examples/ep8/ep8.zip

CookieHandler Example

var C = new CookieHandler();
C.set(‘mykey’, ‘myvalue’);
alert(C.get(‘mykey’));
C.del(‘mykey’);

The problem with using cookies is that the user can always disable them, so you have to make sure your client side app doesn’t break when that happens. Either that or you tell users up front that javascript and cookies must be enabled to use your application.

From the server side perspective, when cookies are not available, the server has to come up with another way to track session id’s. Without cookies, the session ID must be embedded in a different part of the page request. There are a couple methods to request information from a server. One is called a GET and the other is called a POST.

GET

Using a GET request means that data is attached to the URL after the question mark. This looks like “page.php?session=mysessionid”. Multiple bits of data can get strung together after the question mark with ampersands like “page.php?key1=value1&key2=value2”.

Usually this data is read on the server side, but Javascript on the client side can parse these GET query strings as well.

The following Javascript code can read the data sent with the GET method.

http://www.davidvanvickle.com/examples/ep8/index.htm
http://www.davidvanvickle.com/examples/ep8/ep8.zip

QueryStringReader Example

var qsr = new QueryStringReader();
var key1 = qsr.get("key1");
var key2 = qsr.get("key2");
if (key1) alert(key1);
if (key2) alert(key2);

POST

Using a POST request puts data in another part of the request packet and is generally preferred when more than a few pieces of data need to go back to the server. When a user uses a search field, often a GET is used as there are only a couple fields of data to transfer. But when a larger order form is used, it will tend to POST since there is more data to pass. When files such as images need to be sent from the client to the server, the POST method is always used. Javascript does not have access to POST data, only to GET data.

AJAX

Requests aren’t restricted to when the user goes between pages. Javascript can send it’s own requests behind the scenes within a single page. This is how AJAX works. Javascript does a GET or POST request from inside the page and gets an XML response from the server. The Javascript receives the XML, parses it, and changes the page layout somehow, all without the page having to reload. That’s AJAX. There is a great AJAX quick start tutorial on Mozilla’s developer wiki. A link to it is available in the show transcript at Podturtle.com.

http://www.davidvanvickle.com/examples/ep8/index.htm
http://www.davidvanvickle.com/examples/ep8/ep8.zip

var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.onreadystatechange = function() { alert(httpRequest.responseText); };
httpRequest.open('GET', ‘data.xml’, true);
httpRequest.send('');

Sessions

The most reliable and easy way to deal with sessions is to use the built in session handling of modern server side scripting languages such as PHP and ASP. There will be an object dedicated to keeping track of the session for us. And we get to store whatever we want in that temporary session data. A server side programmer can trust the server to maintain that session for the user however it needs to, via cookies or via GET requests. It’s automatic.

PHP

session_start();
$_SESSION[‘mykey’] = ‘myvalue’;
echo $_SESSION[‘mykey’];

ASP

Session(“mykey”) = “myvalue”
Response.write(Session(“mykey”))

Similarly, methods for getting GET and POST data from requests are also handled very easily with server side scripting languages.

PHP

echo $_GET[‘mykey’]; // GET
echo $_POST[‘mykey’]; // POST

ASP

Response.write(request.querystring(“mykey”)) ‘ GET
Response.write(request.form(“mykey”)) ‘ POST

Whether you plan to program on the client side or the server side, learning how to pass data between pages is the first step to making your web apps interactive and personalized.