473,392 Members | 1,326 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes and contribute your articles to a community of 473,392 developers and data experts.

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:

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
0 7154

Sign in to post your reply or Sign up for a free account.

Similar topics

10
by: G Matthew J | last post by:
interesting "signal vs. noise" blog entry: http://37signals.com/svn/archives2/whats_wrong_with_ajax.php
4
by: shalinmangar | last post by:
Hi, I want to build an Ajax based autocomplete feature. Being a server side guy, I have little knowledge regarding layers and DHTML stuff. Having already implemented the AJAX part of the app, I am...
2
by: Larry | last post by:
I am wondering if anyone has any thoughts on the following issues once Ajax is incorporated into a page: Now that we have this Ajax stuff, users have the potential to not leave a page for a long...
10
by: Steve | last post by:
I need to build a very dynamic client and would be interested in knowing the pros and cons of using JSF and Ajax to accomplish this. Thanks. Steve
31
by: Tony | last post by:
I just noticed that prototype.js is one of the files in the Ajax.NET distribution - I'm pretty concerned about this. Does anyone know if this is the same "prototype.js" that is not well-liked...
1
by: a | last post by:
what do you guys prefer for ajax? dojo mochikit prototype or somehting else/
1
by: www.web20developers.com | last post by:
http://www.web20developers.com http://www.web20developers.com/index.php?option=com_content&task=view... Ajallerix : AJAX, simple, fast Web image gallery demo ; at Novell AJAX -...
2
by: Nathan Sokalski | last post by:
I am moving my website from my machine to my webhost, and need some help with what extra files I need to include due to the fact that I used AJAX in my site. Everything on the site is obviously...
2
by: =?Utf-8?B?VG9u?= | last post by:
Hello, I want to understand teh benefits of ajax technology. Does anyone has a good website where AJAX EXTENSIONS is worked out so I really understand it. There a 2 main questions: 1) How about...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.