JavaScript Paths,Querystrings and Encoding

By Kevin Pirkl (Intel) (19 posts) on July 2, 2008 at 8:17 am

Rick Strahl's "Making sense of ASP.Net Paths" has been inspiring to me since I have visited the page quite often so I thought I might do a quick similar post for Client Side JavaScript code and some How To's with some AJAX know-how sprinkled in.

Firefox and Firebug add-on developer tool make undestanding JavaScript's document.location much easier.

Here at the Intel Software Network (ISN) we have quite a few AJAX based services (Feedback, Email A Friend, Login/Logout, Polling, Rating, Commenting) that can be dropped into any and all of our 40-50 web sites by placement HTML elements with specific ID's.  Each common service is also written to support localization.  You can check out some of these functions in the button bar of the following pages US, China and Russia ISN Landing Pages.  Just load the pages and look for the icon bar at the top right of the page.

Most of thes services require that we pass the URL back to the server to gets back data.  When passing a URL as a querystring parameter encoding it correctly is important to prevent unwanted side effects.  For instance some of our fist passes at adding a Comment Service to pages resulted in differnet sets of comments getting returned when the querystring varied.

So lets take a peek into the Firebug DOM tab and see what document.location brings.

QueryStringFireBugDisplay

As you can see everything is nice and easy to get at here.

Here is some sample HTML code that you can save and run on your own local machine and see each of these variables at work. Try adding QueryString parameters (and/or even add a full properly encoded URL on the end.)  My most complex resulting output was http://localhost/locationtest.htm?a=1&b=2&target=http%3A%2F%2Flocalhost%2Flocationtest.htm%3Fa%3D1%26b%3D2

[
<html>
<head>
	<title>Document Location and encodeURIComponent()</title>
	<script>
		var thisURL = document.location.protocol
+ "//" + document.location.host
+ (document.location.port.length >0 ? ":"+document.location.port : "")
+ document.location.pathname;
		var thisFull = document.location.protocol
+ "//" + document.location.host
+ (document.location.port.length >0 ? ":"+document.location.port : "")
+ document.location.pathname
+ document.location.search;
	</script>
</head>
<body>

<pre>

Tools - Firefox and Firebug

document.location = <script>document.write(document.location);</script>
document.location.href = <script>document.write(document.location.href);</script>
document.protocol = <script>document.write(document.location.protocol);</script>
document.location.host = <script>document.write(document.location.host);</script>
document.location.port = <script>document.write(document.location.port);</script>
document.location.pathname = <script>document.write(document.location.pathname);</script>
document.location.search = <script>document.write(document.location.search);</script>
document.location.hash = <script>document.write(document.location.hash);</script>

This is not the base URL for this page.
var notBaseURL = "<script>document.write(document.location);</script>";

The base URL is -
var thisURL = "<script>document.write(thisURL);</script>";

The base URL plus parameters -
var thisFull = "<script>document.write(thisFull);</script>";

Say you want to call an AJAX service and you want to pass this URL correctly.
I would consider that for a service call in most instance like getting Tags for this page
Or getting Comments for this page you would only way the base URL.
"<script>document.write(thisURL);</script>";

To make an HTML call and pass another URL you need to use the JavaScript method
encodeURIComponent() = "<script>document.write(encodeURIComponent(thisURL));</script>";

So your final call to your service URL for passing thisURL would be something like this example.
<script>document.write(thisURL + "?target=" + encodeURIComponent(thisURL));</script>

Or with your querystring parameters it would be like so.
<script>document.write(thisFull + "&target=" + encodeURIComponent(thisFull));</script>

Dont include document.location.hash in your call to your service as it can cause issues down the road.

</pre>
</body>

</html>
]

Here is the output from the above HTML

HTMLRunResults

It might seem very simple and you might say why bother but the end result are cool.  Take for example out Coment Service.  For this we need only the base url and not all the extra parameters.  If you were to take the extra search parameters for Comment retrieval then you would get one set of results and without the search parameters another set of data.  All our Content Deliver pages allow for Comments, take A Library Based Approach to Threading for Performance for example (drive to the bottom of the page to see the add a comment option.)  The resulting call that populates the return data set comes from this page call (post page load)

http://softwarecommunity.intel.com/isn/home/CommonServices.ashx?F=GetCommentsJSON&P1=http%3A%2F%2Fsoftwarecommunity.intel.com%2Farticles%2Feng%2F3816.htm&P2=&_=1215014917424

The packaged JSON data set uses JSONP for the callback pattern and thus to populate the page data.

Simple but very cool!

Cheers

Kevin Pirkl

Categories: Intel® Software Network 2.0, Open Source

Comments (1)

July 24, 2008 11:46 PM PDT


Fatih Hayrioğlu'nun not defteri » Fatih Hayrioğlu'nun bilgi dağarcığı		program olarak Guinness rekorlar kitabına girmiş. Bağlantı 55 adet iyi kalitede ikon setleri. Bağlantı 600 Milyondan Fazla Web Kullanıcısı Risk Altında - turk.internet.com Bağlantı Javascript ile sayfa adresindeki bilgileri almak.BağlantıWordPress eski sürümleri hackleniyor. Bir çok arkadaşımın ve benimde karşılaştığım bir sorun. Güncellemeleri hemen yapmak lazım Bağlantı Tasarımlarınızı Fiyatlandırma - hasanyalcin.com


Leave a comment

Name (required)

Email (required; will not be displayed on this page)

Your URL (optional)


Comment*