Sunday, July 17, 2011

how to use back button and bookmarking in ajax

i had a similar problem a few months ago.
want to use AJAX but cannot go back after loading.
if you bookmark the dynamically loaded page you don't see the dynamically loaded page again.
there is a solution for this.
hashing is a possible solution for this.

live example


but first lets understand what is hash
hash is a part of the a URL
for example
http://www.websitename.com/path/page.ext?get_var1=value1&get_var2=value2&...&get_varn=valuen#hash

example:
http://username:password@www.sakul.com:256/query/index.htm?q=kuldeep#techpreach
scheme sub-domain host-name port path file-name get variables hash
http www sakul.com 80 query index.htm q="kuldeep" techpreach
but most likely you will see a domain like this
sakul.com/query/
schemeby default it add host name to http
host-nameminimum you have to pass that
username and passwordonly used for authentication purpose
sub-domaindefault is www but added according to server
portdefault port is 80
pathcan be null
file-nameif null passed server decide

but for now just get the hash part in your mind
sometimes when you click a link it don't reload but moves you to another part of the page or when you load a page with hash it automatically moves to new location on the page.
you must be thinking how??
the answer is hash
a hash is a part of URL that redirect the user to a part of the page and many browser store a new hash as new link so when you click back you again moves to the location that you left
hashing make pages more navigable and simple to work upon.
so now we will exploit these feature to use back and forward button in Ajax
if somehow we get the hash from the address bar how will JavaScript know that back button is clicked by user
the answer to this question is setInterval(function,milliseconds) function
we will check that if the hash stored in variable is matching with the hash from the address bar if hash don't match user has clicked back button
in an interval of 500 Milli seconds we will check this and user will see no change
reference to the function used int the code
function reference
window.location.hash this can be used to get and set hash in JavaScript
window.location.hash="hash value here";
var variable_to_store_hash=window.location.hash;
note:-remember that when you set a new hash the old hash will become history
add a special character before storing your Ajax information to hash because if a real hash[i mean here that if a "a" refer you to a new page location] come it can distinguish between them like twitter.com user "!" we will here use dollar sign "$"
setInterval(function,milliseconds)
setInterval is a function that load the specific function pass in after a time-period of the milliseconds passed
note:-1000 Milli-seconds= 1 second
window.onload=< function name >
load's the function on window load or simply when the page load's
< string >.split(delimiter)
a delimiter is a character that is used to break a string into array
counting of array starts from 0
for-example:-
var array="this is a string".split(" ");//" " stands for space
now,
array[0]="this";
array[1]="is";
array[2]="a";
array[3]="string";
< string >.charAt(position)
return the character which is found on position where position is an integer and can have value 0
same work can be done by < string >[position]here string behaves like array

now here is the code for it
<html>
<head>
<title>ajax backbutton and bookmarking using hash</title>
<script type="text/JavaScript">
/*tested on Mozilla Firefox 5.0 [don't work on internet explorer =<6.0]*/
var saved_hash="";
/*-----on form load this will run------*/
window.onload=function ()
{
if(window.location.hash!="") alert("opening bookmark");
setInterval(function(e){
 var visible_hash=window.location.hash;
 if(visible_hash!=saved_hash)
  {
  ajax(visible_hash,false);
  }
 },500);
}
/*------------------------------------------------------------------*/
function Ajax(rec_hash,newhash)
{
saved_hash=rec_hash;
/* newhash Tell's weather the hash is new or old if new  then set a new hash in address bar*/
if(newhash==true) window.location.hash=rec_hash;
alert("opening:-"+rec_hash); /*append Ajax code here*/
}
</script>
</head>
<body>
<div onclick='javascript:ajax("aboutme",true)'>open aboutme</div>
</body>
</html>

here is a bad news that internet explorer =<6.0 doesn't support this method.but there is one solution that Gmail.com use but even Gmail.com method don't support mac safari browser
so long for next time
soon i will also give a post for Gmail method.
recommended to that you must read to ensure full knowledge of AJAX
introduction to Ajax with full example
please do post comment [+report bugs (if any)*].

Labels: , , , , , , , , , , ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home