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

 
<?php

  echo'     <div id="post_comment" class="post_comment">

<form name="myForm" id="myForm" class="myForm" method="get" action="index.php">

<input type="text" name="session" id="session" value="'.$_REQUEST[session].'" tabindex="1" onchange="sendRequestPost();"/>

<input type="text" name="id" id="id" style="width:5px" value="'.$_REQUEST[id].'" tabindex="2" onfocus="sendRequestPost();"  />
 
  </form>

<DIV id="response" class="response"></DIV>

        </div>
 
        <!--

        Created: 28 Jan 2005.

        Last updated: 1 Dec 2005.  Copyright &copy; 2005 James Dam.
 
        Modified: 19 July 2007

        Tarik Monem

        --> ';

?>

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

 
<body onload="javascript:myFooterFunction();javascript:InitialiseScrollableArea5();document.forms['myForm'].submit();">

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

 
// Set path to PHP script

    var phpscript = 'js_files/login.php';
 
    function createRequestObject() 

    {    

        var req;
 
        if(window.XMLHttpRequest)

        {

            // Firefox, Safari, Opera...

            req = new XMLHttpRequest();

        } 

        else if(window.ActiveXObject) 

        {

            // Internet Explorer 5+

            req = new ActiveXObject("Microsoft.XMLHTTP");

        } 

        else 

        {

            // There is an error creating the object,

            // just as an old browser is being used.

            alert('There was a problem creating the XMLHttpRequest object');

        }    

        return req;    

    }
 
    // Make the XMLHttpRequest object

    var http = createRequestObject();
 
    function sendRequestPost() 

    {

        var id = document.getElementById('id').value;

        var session = document.getElementById('session').value;
 
        // Open PHP script for requests

        http.open('post', phpscript);

        http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        http.onreadystatechange = handleResponsePost;

        http.send('id='+ id +'&session='+ session);

    }

}

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

Expand|Select|Wrap|Line Numbers

 
<?php
 
$session = $_POST['session'];     

$id = $_POST['id']; 
 
    echo 'javascript:writeMyHtmlFunction("'.$session.'","'.$id.'");'; 
 
?>

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

Expand|Select|Wrap|Line Numbers

 
function handleResponsePost() 

{

    if(http.readyState == 1)

    {

        document.getElementById("response").innerHTML = "Please wait, loading... " ; 

    } 

    else if(http.readyState == 4 && http.status == 200)

    {
 
        // Text returned from PHP script

        var response = http.responseText;

        document.forms.myForm.id.focus();

        window.onload = eval(response);
 
        if(response) 

        {

            // Update ajaxTest2 content

        document.forms.myForm.id.focus();

        window.onload = eval(response);

        }

    }

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

 
function writeMyHtmlFunction(someSectionParam, someSubSectionParam)

{

    if(someSectionParam == 'home')

    {

        if(someSubSectionParam == '1')

        {

            if(navigator.appName == 'Microsoft Internet Explorer')

            {

                var theDiv = document.getElementById('contentDiv');

                theDiv.innerHTML = '';    

                var theDiv2 = document.getElementById('contentDiv2');

                theDiv2.innerHTML = '';
 
                var theDiv5 = document.getElementById('contentDiv3');

                theDiv5.innerHTML = '';            

            }

            else

            {

                var theDiv = document.getElementById('contentDiv');

                theDiv.innerHTML = '';

            }    
 
            var theDiv2 = document.getElementById('contentDiv2');

            theDiv2.innerHTML = '';
 
            var theDiv3 = document.getElementById('extraDetails');

            theDiv3.innerHTML = '';            
 
            var theDiv4 = document.getElementById('extraDetails2');

            theDiv4.innerHTML = '';
 
            loadXMLDoc('xml/rw.xml');

            var newsvar=xmlDoc.getElementsByTagName('news');

            var urlvar=xmlDoc.getElementsByTagName('url');

            var photovar=xmlDoc.getElementsByTagName('photo');

            var newsitemvar=xmlDoc.getElementsByTagName('newsitem');
 
            for (i=0;i<newsitemvar.length;i++)

              {

              if (newsitemvar[i].nodeType==1)

                { 

            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>';

                }

              }
 
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>';
 
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>';
 
loadXMLDoc('xml/after_show.xml');

var newsvar2=xmlDoc.getElementsByTagName('news');

var urlvar2=xmlDoc.getElementsByTagName('url');

var photovar2=xmlDoc.getElementsByTagName('photo');

var newsitemvar2=xmlDoc.getElementsByTagName('newsitem');
 
for (j=0;j<newsitemvar2.length;j++)

  {

  if (newsitemvar2[j].nodeType==1)

    { 

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>';

    }

  }
 
loadXMLDoc('xml/music.xml');

var newsvar3=xmlDoc.getElementsByTagName('news');

var urlvar3=xmlDoc.getElementsByTagName('url');

var photovar3=xmlDoc.getElementsByTagName('photo');

var newsitemvar3=xmlDoc.getElementsByTagName('newsitem');
 
for (k=0;k<newsitemvar3.length;k++)

  {

  if (newsitemvar3[k].nodeType==1)

    { 

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>';

    }

  }
 
loadXMLDoc('xml/casting.xml');

var newsvar4=xmlDoc.getElementsByTagName('news');

var urlvar4=xmlDoc.getElementsByTagName('url');

var photovar4=xmlDoc.getElementsByTagName('photo');

var newsitemvar4=xmlDoc.getElementsByTagName('newsitem');
 
for (l=0;l<newsitemvar4.length;l++)

  {

  if (newsitemvar4[l].nodeType==1)

    { 

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>';

    }

  }
 
myFooterFunction('0');

        }

    }

}

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

  
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=home&id=1
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=aboutus&id=1
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=aboutus&id=2
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=2
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=3
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=4
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=5
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=6
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=7
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=1
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=2
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=3
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=4
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=5
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=6
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=7
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=2
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=3
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=4
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=5
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=6
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=7
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=8
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=9
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=hr&id=1
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=2
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=3
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=4
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=5
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=6
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=7
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=bmpfilms&id=1
 
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=bmpfilms&id=2

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

Subscribe Post Reply

7156

Similar topics

what's wrong with ajax?

by: G Matthew J | last post by:

interesting "signal vs. noise" blog entry: http://37signals.com/svn/archives2/whats_wrong_with_ajax.php

Javascript

AJAX based autocomplete

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...

Javascript

Ajax and Memory Usage

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...

Javascript

Pros & Cons of JSF/Ajax

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

Javascript

AJAX.NET and prototype.js

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...

Javascript

what do you guys prefer for ajax?

by: a | last post by:

what do you guys prefer for ajax? dojo mochikit prototype or somehting else/

Python

Ajallerix : AJAX, simple, fast Web image gallery demo ; at Novell

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 -...

Javascript

ASP.NET and AJAX: JavaScript files from the Microsoft AJAX Library

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...

ASP.NET

Ajax en the Form_load event and Ajax in serveruser controls

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...

ASP.NET

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

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...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

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...

Windows Server

Problem With Comparison Operator <=> in G++

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,...

C / C++

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA