By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,220 Members | 1,633 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

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

P: 63
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:

Expand|Select|Wrap|Line Numbers
  1. <?php
  2.   echo'     <div id="post_comment" class="post_comment">
  3. <form name="myForm" id="myForm" class="myForm" method="get" action="index.php">
  4. <input type="text" name="session" id="session" value="'.$_REQUEST[session].'" tabindex="1" onchange="sendRequestPost();"/>
  5. <input type="text" name="id" id="id" style="width:5px" value="'.$_REQUEST[id].'" tabindex="2" onfocus="sendRequestPost();"  />
  6.  
  7.   </form>
  8. <DIV id="response" class="response"></DIV>
  9.         </div>
  10.  
  11.  
  12.         <!--
  13.         Created: 28 Jan 2005.
  14.         Last updated: 1 Dec 2005.  Copyright &copy; 2005 James Dam.
  15.  
  16.         Modified: 19 July 2007
  17.         Tarik Monem
  18.         --> ';
  19. ?>
  20.  
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:

Expand|Select|Wrap|Line Numbers
  1. <body onload="javascript:myFooterFunction();javascript:InitialiseScrollableArea5();document.forms['myForm'].submit();">
  2.  
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:

Expand|Select|Wrap|Line Numbers
  1. // Set path to PHP script
  2.     var phpscript = 'js_files/login.php';
  3.  
  4.     function createRequestObject() 
  5.     {    
  6.         var req;
  7.  
  8.         if(window.XMLHttpRequest)
  9.         {
  10.             // Firefox, Safari, Opera...
  11.             req = new XMLHttpRequest();
  12.         } 
  13.         else if(window.ActiveXObject) 
  14.         {
  15.             // Internet Explorer 5+
  16.             req = new ActiveXObject("Microsoft.XMLHTTP");
  17.         } 
  18.         else 
  19.         {
  20.             // There is an error creating the object,
  21.             // just as an old browser is being used.
  22.             alert('There was a problem creating the XMLHttpRequest object');
  23.         }    
  24.         return req;    
  25.     }
  26.  
  27.     // Make the XMLHttpRequest object
  28.     var http = createRequestObject();
  29.  
  30.  
  31.     function sendRequestPost() 
  32.     {
  33.         var id = document.getElementById('id').value;
  34.         var session = document.getElementById('session').value;
  35.  
  36.         // Open PHP script for requests
  37.         http.open('post', phpscript);
  38.         http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  39.         http.onreadystatechange = handleResponsePost;
  40.         http.send('id='+ id +'&session='+ session);
  41.     }
  42. }
  43.  
Now, it sends the text field values to a php page:

Expand|Select|Wrap|Line Numbers
  1. <?php
  2.  
  3. $session = $_POST['session'];     
  4. $id = $_POST['id']; 
  5.  
  6.     echo 'javascript:writeMyHtmlFunction("'.$session.'","'.$id.'");'; 
  7.  
  8. ?>
  9.  
Which in turn, the PHP page echos a newly created string to the javascript page via the http.responseText :

Expand|Select|Wrap|Line Numbers
  1. function handleResponsePost() 
  2. {
  3.     if(http.readyState == 1)
  4.     {
  5.         document.getElementById("response").innerHTML = "Please wait, loading... " ; 
  6.     } 
  7.     else if(http.readyState == 4 && http.status == 200)
  8.     {
  9.  
  10.         // Text returned from PHP script
  11.         var response = http.responseText;
  12.         document.forms.myForm.id.focus();
  13.         window.onload = eval(response);
  14.  
  15.         if(response) 
  16.         {
  17.             // Update ajaxTest2 content
  18.         document.forms.myForm.id.focus();
  19.         window.onload = eval(response);
  20.         }
  21.     }
  22.  
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.

Expand|Select|Wrap|Line Numbers
  1. function writeMyHtmlFunction(someSectionParam, someSubSectionParam)
  2. {
  3.     if(someSectionParam == 'home')
  4.     {
  5.         if(someSubSectionParam == '1')
  6.         {
  7.             if(navigator.appName == 'Microsoft Internet Explorer')
  8.             {
  9.                 var theDiv = document.getElementById('contentDiv');
  10.                 theDiv.innerHTML = '';    
  11.                 var theDiv2 = document.getElementById('contentDiv2');
  12.                 theDiv2.innerHTML = '';
  13.  
  14.                 var theDiv5 = document.getElementById('contentDiv3');
  15.                 theDiv5.innerHTML = '';            
  16.             }
  17.             else
  18.             {
  19.                 var theDiv = document.getElementById('contentDiv');
  20.                 theDiv.innerHTML = '';
  21.             }    
  22.  
  23.             var theDiv2 = document.getElementById('contentDiv2');
  24.             theDiv2.innerHTML = '';
  25.  
  26.             var theDiv3 = document.getElementById('extraDetails');
  27.             theDiv3.innerHTML = '';            
  28.  
  29.             var theDiv4 = document.getElementById('extraDetails2');
  30.             theDiv4.innerHTML = '';
  31.  
  32.             loadXMLDoc('xml/rw.xml');
  33.             var newsvar=xmlDoc.getElementsByTagName('news');
  34.             var urlvar=xmlDoc.getElementsByTagName('url');
  35.             var photovar=xmlDoc.getElementsByTagName('photo');
  36.             var newsitemvar=xmlDoc.getElementsByTagName('newsitem');
  37.  
  38.  
  39.             for (i=0;i<newsitemvar.length;i++)
  40.               {
  41.               if (newsitemvar[i].nodeType==1)
  42.                 { 
  43.             theDiv.innerHTML += '<div id="real_world_module_home" class="real_world_module_home"><img src=' + photovar[i].childNodes[0].nodeValue + ' width=300px>' + newsitemvar[i].childNodes[0].nodeValue + '<a onclick=' + urlvar[i].childNodes[0].nodeValue + ' style="cursor:pointer; cursor:hand;">Click to see more</a></div>';
  44.                 }
  45.               }
  46.  
  47.  
  48. theDiv.innerHTML += '<div id="this_week_module_home" class="this_week_module_home"><img src="global_images/thisweek_realworldrecap.gif" width="220px" valign="top" alt="This Week"><br><iframe id="dataframe" src="http://www.tvgasm.com/shows/export/real_world_export.htm" srctype="text/html" width="215px" height="270px" scrolling="auto"></iframe></div>';
  49.  
  50.  
  51. theDiv.innerHTML += '<div id="news_module_home" class="news_module_home"><img src="global_images/news.gif" width="220px" alt="News" valign="top"  alt="News"><br> <iframe id="dataframe" src="http://www.tvgasm.com/shows/export/tvgasm_export.htm" srctype="text/html" width="215px" height="270px" scrolling="auto"></iframe></div>';
  52.  
  53. loadXMLDoc('xml/after_show.xml');
  54. var newsvar2=xmlDoc.getElementsByTagName('news');
  55. var urlvar2=xmlDoc.getElementsByTagName('url');
  56. var photovar2=xmlDoc.getElementsByTagName('photo');
  57. var newsitemvar2=xmlDoc.getElementsByTagName('newsitem');
  58.  
  59. for (j=0;j<newsitemvar2.length;j++)
  60.   {
  61.   if (newsitemvar2[j].nodeType==1)
  62.     { 
  63. theDiv.innerHTML += '<div id="after_show_module_home" class="after_show_module_home"><img src="global_images/logo_inferno3.jpg" width="200px" height="75px" valign="top" alt="inferno3"><font size=2px>' + newsitemvar2[j].childNodes[0].nodeValue + '<a onclick=' + urlvar2[j].childNodes[0].nodeValue + ' style="cursor:pointer; cursor:hand;">&nbsp;&nbsp;&nbsp;&nbsp;<br><font color=#FFFFFF>Click here to see more</font></a></font><img src=' + photovar2[j].childNodes[0].nodeValue + ' width=200px><br></div>';
  64.     }
  65.   }
  66.  
  67. loadXMLDoc('xml/music.xml');
  68. var newsvar3=xmlDoc.getElementsByTagName('news');
  69. var urlvar3=xmlDoc.getElementsByTagName('url');
  70. var photovar3=xmlDoc.getElementsByTagName('photo');
  71. var newsitemvar3=xmlDoc.getElementsByTagName('newsitem');
  72.  
  73. for (k=0;k<newsitemvar3.length;k++)
  74.   {
  75.   if (newsitemvar3[k].nodeType==1)
  76.     { 
  77. theDiv.innerHTML += '<div id="music_module_home" class="music_module_home" style="white-space: normal;"><img src="global_images/spot3_music.gif" width="199px" valign="top" alt="This Week"><br> <div><a onclick=' + urlvar3[k].childNodes[0].nodeValue + ' style="cursor:pointer; cursor:hand;">Click to see more</a><br>' + newsitemvar3[k].childNodes[0].nodeValue + '<br><img src=' + photovar3[k].childNodes[0].nodeValue + ' style="position:absolute; bottom:0px; width:200px;"><br>&nbsp;<br></div></div>';
  78.     }
  79.   }
  80.  
  81. loadXMLDoc('xml/casting.xml');
  82. var newsvar4=xmlDoc.getElementsByTagName('news');
  83. var urlvar4=xmlDoc.getElementsByTagName('url');
  84. var photovar4=xmlDoc.getElementsByTagName('photo');
  85. var newsitemvar4=xmlDoc.getElementsByTagName('newsitem');
  86.  
  87. for (l=0;l<newsitemvar4.length;l++)
  88.   {
  89.   if (newsitemvar4[l].nodeType==1)
  90.     { 
  91. theDiv.innerHTML += '<div id="casting_module_home" class="casting_module_home"><img src="global_images/spot4_castingcalls.gif" width="199"  valign="top" alt="Casting"><br> <div style="color: #000000;"><img src=' + photovar4[l].childNodes[0].nodeValue + ' height=200px width=200px><br><a onclick=' + urlvar4[l].childNodes[0].nodeValue + ' style="cursor:pointer; cursor:hand;">Click to see more</a><br><a onclick="http://www.bunim-murray.com/registration/casting_registration.php" style="cursor:pointer; cursor:hand;">' + newsitemvar4[l].childNodes[0].nodeValue + '</a><br>&nbsp;<br></div>';
  92.     }
  93.   }
  94.  
  95.  
  96.  
  97. myFooterFunction('0');
  98.         }
  99.     }
  100. }
  101.  
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:

Expand|Select|Wrap|Line Numbers
  1.  
  2. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=home&id=1
  3.  
  4. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=aboutus&id=1
  5.  
  6. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=aboutus&id=2
  7.  
  8. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=2
  9.  
  10. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=3
  11.  
  12. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=4
  13.  
  14. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=5
  15.  
  16. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=6
  17.  
  18. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=7
  19.  
  20. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=1
  21.  
  22. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=2
  23.  
  24. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=3
  25.  
  26. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=4
  27.  
  28. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=5
  29.  
  30. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=6
  31.  
  32. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=7
  33.  
  34. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=2
  35.  
  36. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=3
  37.  
  38. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=4
  39.  
  40. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=5
  41.  
  42. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=6
  43.  
  44. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=7
  45.  
  46. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=8
  47.  
  48. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=9
  49.  
  50.  
  51.  
  52. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=hr&id=1
  53.  
  54. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=2
  55.  
  56. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=3
  57.  
  58. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=4
  59.  
  60. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=5
  61.  
  62. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=6
  63.  
  64. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=7
  65.  
  66. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=bmpfilms&id=1
  67.  
  68. http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=bmpfilms&id=2
  69.  
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 :-)
Jul 26 '07 #1
Share this Article
Share on Google+