Deep linking with AJAX made possible with the use of DHTML & PHP

I have been working on an all AJAX/DOM web site which is set to go live today and I thought I'd share my discoveries with all of you whom have helped me when I have encountered different issues along the way.

First, deep linking is not something that a completely AJAX web site should be able to do by it's very nature of everything being on one page basically. So how can a person deep link to something that is on one page?

This question appeared when I was almost complete with the totally AJAX/DOM driven web site, when my boss reminded me that we have ads over the internet that will point to a specific part of the web site and that got me thinking.

I knew that Flash with PHP can have deep linking using an old PHP trick -- http://www.mywebsite.com/db.php?someVar=home&someVar=1, which would then send these arguements to a database, which would in turn, return a web page. Simple enough, but then you're going back to a traditional web site that has several pages. Well, that would defeat the whole concept of making an all AJAX one page web site, if you have to create a different page for each ad, regardless of how dynamic the content would be.

And yes, it still could be done, but then I thought of the XMLHttpRequest object and an old DHTML trick that's been around since 2005, where you use the XMLHttpRequest object to send the values of some text fields to a php page, which in turns, sends those variables within an sql string to a db which returns a value, which you echo back to the handleResponsePost to display the result set -- you can read an excellent tutorial on using this method as a simple login process by James Dam written in 2005. Sorry I don't have the link but I'm sure you can search the net for it.

Anyways to the code that I used:

First I used PHP to echo a form which resides behind the big banner on the one index.php as follows:

So now when someone has a URL like http://www.bunim-murray.com/beta.bun...sion=home&id=1 it places the values of home and 1 into their respective text fields.

In the body of the index.php page, I have onload submitting the form as follows:

Now, you're probably thinking that this will continue to submit the form indefinitely when you see what happens after the form is submitted, but that's why I use a bogus function just prior to submitting the form-- this was some legacy code from a scrolling div function that hadn't been removed as of yet -- but it causes an error which precludes the form from being submitted a second time. Pretty cool error to have happen accidentally.

Now, what happens when the form is submitted? It calls a javascript script for using the xmlhttprequest object:

Now, it sends the text field values to a php page:

Which in turn, the PHP page echos a newly created string to the javascript page via the http.responseText :

Since I have the onfucus set to submit the form, which when submitted will use the window.onload function that will evaluate a string that should look something like javascript:writeMyHtmlFunction('home', '1'); -- which in turn, calls that javascript function.

This one function handles all the content which is displayed via innerHTML and a set of conditional statements to know which section, home, aboutus, casting, etc... and which portion of each section is where the id parameter comes in AND THAT'S DEEP LINKING AJAX.

Check the links:

This version of the web site should go live by sometime this afternoon, which in case it does, then just remove the beta.bunim_murray.com folder like so -- http://www.bunim-murray.com/index.php?session=home&id=1

Hope this helps anyone trying to accomplish deep linking an AJAX web site :-)