How vs Why...

One line summary : If you want to have great knowledge, you should investigate "why". If you get "why", "how" doesn't matter any more.

Nowadays, I study AJAX with "Head rush AJAX" which is published by O'REILLY. I use a gedit with several plugins for editing, Firefox for browsing, Sinatra(ruby lightweight MVC framework) for server side. It's very interesting and I'm really into this study.

Everything was fine except javascript file wasn't refreshed sometimes. (To tell the truth, firefox worked well, my knowledge was not enough.) When it happened, I closed firefox and waited several seconds, then I tried code testing again. It's too annoying. So I've searched how to solve it in google. (Keyword is "javascript file reload"). There are many pages for discussing how to solve it and finally, I've found below page.

http://forums.whirlpool.net.au/forum-replies-archive.cfm/927740.html

In the article, BiKuTa asked about how to force javascript file to reload when the file was not reloaded, even it's modified. It's same trouble that I had. Some people suggested that add extra url like below:

myjavascript.js?x=1
myjavascript.js?x=2
myjavascript.js?x=3

Another person suggested extra url with the javascript's version number:

version = 100
...
<script LANGUAGE="JavaScript" src="myscript.js?X=<%=version%>­ ">­ </script>

At first, I thought it's nice solution, so I would apply it to my study. However, after I read Foonly's posting in the article, I felt shame that I had just searched a solution which can solve only current problem. Although He didn't suggest how to solve the problem, he explained why it happens. Below is his posting:

I just edited my previous post... basically, if you haven't done anything weird, this behaviour should already be happening.

When the browser wants to use a resource, and it already has it in its cache, it needs to decide whether to:

1. simply use the resource in the cache
2. ask the server for the resource only if it has changed
3. ask the server for the resource regardless

It works all this out by looking at the Expires value for the cache entry, which may be provided by the server when the resource is sent. Most of the time it isn't -- which is fine, we often don't want an explicit expiry. In this case the browser chooses some default expiry time (for Javascript files within Firefox, this appears to be 30 seconds in the future).

If the Expires time has been passed, option 1 is out of the question -- the browser has to ask the server for the resource again. So we try option 2. The browser provides two values: the last modified time of the resource (as provided by the server in the Last-Modified header) is put in the If-Modified-Since request header, and the "etag" of the resource (as provided by the server in the Etag header) is returned in the If-None-Match request header. The "etag" is a code which tries to uniquely identify the resource -- if the resource changes it should have a new etag,regardless of any timestamps.

What do these headers mean?Basically, it's asking the server to provide the resource if and only if its timestamp is more recent than the last time it was retrieved, orit has changed to a completely new resource altogether. If either of these conditions are met, the resource is served up again, otherwise the server simply says "304 Not Modified". Either way, the browser cache item's expiry is updated appropriately.

Option 3 is used when you explicitly force a refresh. Hitting Shift+Ctrl+R on the web page, for instance, should do this. In this case the browser leaves out the If-Modified-Since and If-None-Match headers, so the server is forced to re-serve the resource.

Now all this assumes you're just using a standard web server and so on. If you serve up your Javascript files by PHP, say, you're unlikely to be providing the right headers (Last-Modified is particularly important), so whenever the browser asks the server for the resource again, the server has to provide the resource again. If you're doing a high-traffic site, this is Very Bad.

(Note that this applies to non-Javascript resources too. If your website's front page is almost always static but you're serving it up dynamically, save on bandwidth costs by setting your Last-Modified header, and handling If-Modified-Since appropriately!)

There are other headers that get involved as well. These describe what caches should do with the resources. It's very complicated, but it's worth reading the specs if you want to do it "right".

He touched the core. He has the foundation knowledge - specification - and explained it. and it's not applied only javascript file, but also every static file. Even it can be applied almost static file like as front page of web site.

Look! If BiKuTa just took extra url (how knowledge), I had to find solutions on the internet again when he faced other static file reloading problem. But now, he can manage every static file reloading(of course, if he understand Foonly's posting) and he can also use it to improve static file loading performance, because he took why knowledge. And I believe we can find more solution to solve our problem if we know why.

This situation can also apply to Object-Oriented Programming field. Recently, many programmer believe that they are doing OOP when they use Java, class and dot in Korea. They say we are OOP programmer because we are using Java! They aren't interested in  why the object is needed and why objects organizing and gathering is important. What the worse, they also don't know how to do it. Because they are looking for just solution to solve current problem. They just follow project programming guide and say complaints. They just say it's too different with the way we've done since several years ago! (I'm sorry. I was one of them)

It's so funny, eh?