Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

An Introduction to HTML URL Encoding

This article will cover the concept of URL encoding in which you will be able to translate characters with special meaning within URLs or nonprintable characters.

Introduction:

First of all let us consider what a URL is; A URL is nothing but an alternative name of a web address in two forms. One is name (www.facebook.com) and other is IP address locater http://192.168.1.23/

URL Encoding is the process of converting string into valid URL format which changes the characters into a valid ASCII format that can be deployed over the Internet. URL encoding helps to change data that are transferred via HTML forms, as the data might consist of special characters, such as,"/", ".", "#", etc having special meanings. Sometimes these special characters are not valid character for an URL format. Another problem can be that it might have been disturbed during URL conversion.

While passing an information through a URL, one needs to make sure that it only uses specific allowed characters like: alphabetic characters, numerals, and a few special characters that have meaning in the URL string. Any other characters should not be encoded so that they don't cause problems.

One of the frequently encoded characters is the character. This character is represented by a plus-sign (+) in a URL. The plus-sign serves as a function of space in URLs. For example consider Google searching, if you search how to open Facebook, Google will start redirecting to this URL (http://www.google.co.in/search?sourceid=chrome&ie=UTF-8&q=how+to+open+facebook) where you can see the how + sign acts as space character. If you will not handle the condition of <space> the html encoder will automatically convert the <space> into ‘%20’ which is safe URL. So it’s up to you that what output you want.

Encoding Procedure:

In URL encoding certain characters are replaced with one or more character triplets that consist of the percent character "%" followed by two hexadecimal digits. The two hexadecimal digits of the triplet(s) represent the numeric value of the replaced character.

For the purposes of this task, every character except 0-9, A-Z and a-z requires conversion, so the following characters all require conversion by default:

  • ASCII control codes (Character ranges 00-1F hex (0-31 decimal) and 7F (127 decimal).
  • ASCII symbols (Character ranges 32-47 decimal (20-2F hex))
  • ASCII symbols (Character ranges 58-64 decimal (3A-40 hex))
  • ASCII symbols (Character ranges 91-96 decimal (5B-60 hex))
  • ASCII symbols (Character ranges 123-126 decimal (7B-7E hex))

Extended characters with character codes of 128 decimal (80 hex) and above.

Listed example will cover a simple demonstration of URL Encoding.

Listing 1: Simple Example of URL Encoding

<HTML>
<HEAD>
<TITLE>Mrbool.com - URL Encoding Example</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#333366" link="#CC0033" alink="#CC0033" vlink="#3300CC">
<center>
<SCRIPT>
function encode(str) { 
	var result = "";
	for (i = 0; i <str.length; i++) { 
		if (str.charAt(i) == " ") result += "+";
		else result += str.charAt(i);
	}
	return escape(result)
}
</script>
</div>
<br>
<div class=hd1>URL Encoding Example:</div>
<form name="urlform">
<TABLE WIDTH="730" CELLSPACING="0" CELLPADDING="5" border=8 
BORDERCOLOR=#333366 BGCOLOR="#7F7F00"><TR>
<TD align="center">
<br>
<p><textarea name="textarea" rows="4" cols="60">Paste your URL"</textarea></p>
<p><input type="button" name="" value="URL Encode" onclick="document.urlform.result.value = encode(document.urlform.textarea.value)"></p>
<p><textarea name="result" rows="4" cols="60"></textarea></p>
<br>
</TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML> 
Above figure is output of simple script of URL Encoding

Figure 1: Above figure is output of simple script of URL Encoding.

In the above script we have taken a function, function ‘encode()’ with a variable parameter "str". Initially loop will calculate the length of passed string. After the complete execution of condition block URL encoding in done. CharAt(i) method returns the character from the specified index. Characters in a string are indexed from left to right. The index of the first character is 0, and the index of the last character in a string called stringName and stringName.length - 1.

Body section is covering two text forms, one for entering user name and other for printing result.

In the beginning of the tutorial we have discussed that encoding is translating unprintable characters or characters with special meaning within URLs. These characters include:

Reserved characters: these are special characters such as the dollar sign($), ampersand(&), plus(+), common(,), forward slash(/), colon(:), semi-colon(;), equals sign(==), question mark(?), and "at(@)" symbol. All of these can have different meanings inside a URL and thus needs to be encoded.

Unsafe characters: these are space, quotation marks, less than symbol, greater than symbol, pound character, percent character, Left Curly Brace”({), Right Curly Brace (}), Pipe(|), Backslash(/), Caret, Tilde, Left Square Bracket([) , Right Square Bracket(]), Grave Accent. These characters possibly are misinterpreted within URLs for various reasons. These characters also should always be encoded.

ASCII control characters: these are unprintable characters generally used for output control. Character ranges from 00-1F hex (0-31 decimal) to 7F (127 decimal).

Non-ASCII control characters: These are characters beyond the ASCII character set of 128 characters. This range is part of the ISO-Latin character set and includes the entire "top half" of the ISO-Latin set 80-FF hex (128-255 decimal).

Trivial Details About URL Encoding:

When one should use URL encoding? This is an important question that needs to be addressed. If one submits data to CGI scripts using the GET method, one should then encode the data as it will be sent over the URL. For example, if you are writing a link to promote an RSS feed, your URL will need to be encoded to add to the script URL you're promoting it on.

In JavaScript and other scripting language there are functions that can be used to encode URL into a string. In JavaScript you can use the encodeURI () function.

As we saw above HTML encoding means to convert the document that contains special characters outside the range of normal seven-bit ASCII into a standard form. HTML decoding on the other hand is an opposite of encoding process. In decoding process the special encoded characters are converted back to their original form.

Conclusion:

Tutorial covered basic concepts of URL encoding which will help you to understand concepts. URL encoding is way too large to be covered in one tutorial. Try the encoding and decoding together and let me know if you have any questions, I will answers your queries ASAP.



I am Software Developer from India. I hold B.Tech. in Computer Science & Engineering. I am having 2+ years experience of developing Web applications and Websites using HTML, JavaScript, CSS, C#.NET etc..

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login