PHP/Ajax — Address Change

Summary

An exercise to figure out how to change the address of a page without refreshing it. It's supposed to look like a query address, but ultimately, the use of hash mark (#) did the trick.

This experiment was created for the portfolio page, whereby the page updates its navigation and content without refreshing.

Example

Change the address with question mark (?)

Click to change the address to ?addressValue=welcome&secondValue=visitor

The addressValue is:
And the second value is: .

Change the address with hash mark (#)

Click to change the address to ?addressValue=location.hash&secondValue=and%20Ajax.

Watch this area.

Random number: . If this number changes, that means the page is refreshed.

Date Created

29 Oct 2008.

Help

  1. Javascript - Change the address bar URL — Gave the ultimate solution to the problem, use hashes (#).
  2. Echoing new line in PHP - Invasion Power Services — Found out PHP will only read special characters in double quotes, like new lines (\n) and tabs (\t).
  3. w3schools.com - HTML DOM search Property — Learned I could pull values from the address bar query, sort of like in PHP, in JavaScript
  4. Unique URLs - Ajax Patterns — Learned how to access the address bar.

Process

Really simple, follow-the-instructions from w3schools.com to practice writing it myself instead of copy and paste.

  1. Test the GET method of PHP.
  2. Test two values.
  3. Store the GET method values into variables, then test it.
  4. Use JavaScript to change the address, and add a random number generator and see if the page still reloads.
  5. Use hash (#) in the link to set the address, but use Ajax to get the values.

The Code

Here’s the code. Please link back here if you’re using it.

Place this PHP in the body tag.


$firstValue=$_GET[addressValue];
$value2=$_GET[secondValue];

echo '<h4>Change the address with question mark (?)</h4>'."\n";
echo '<a href='?addressValue=welcome&secondValue=visitor' title='addressValue=welcome, secondValue=visitor' >Click to change the address</a> to <code>?addressValue=<b>welcome</b>&secondValue=<b>visitor</b></code>'."\n";

echo "<p id='stageFour' style='border:1px solid #000;padding:5px 10px;' >\nThe addressValue is: <strong>";
echo $firstValue;
echo "</strong>\n<br /> And the second value is: <strong>".$value2."</strong>.</p>\n";

echo '<h4>Change the address with hash mark (#)</h4>'."\n";
echo "<a id='hashAnchor' style='text-decoration:underline;color:blue;cursor:pointer;' href='index.php' >Click to change the address</a> to <code>?addressValue=<b>location.hash</b>&secondValue=<b>and%20Ajax</b></code>.\n";
echo "<p id='stageFive' style='border:1px solid #000;padding:5px 10px;' >Watch this area.</p>\n";
            

Place this JavaScript in the body tag AFTER the PHP above.


//define the anchor
var hashAnchor=document.getElementById("hashAnchor");
//start the function when the link is clicked
hashAnchor.onclick=hashAjax;

//function to change the address bar string
function hashAjax(){
    //get the values to be submitted
    var query="?addressValue=location.hash&secondValue=and%20Ajax";
    //change the href to the hash mark plus the query, which will change the address without reloading
    hashAnchor.href="#"+query;
    //pass the query to the ajax function
    ajaxData(query);
    }

//function for the ajax stuff
function ajaxData(query){
    //get new xml request object
    var xmlHttp=GetXmlHttpObject();
    //if the xmlHttp object isn't created, then the browser doesn't support it.
    if (xmlHttp==null){
        alert("Your browser does not support HTML Request.");
        return;
        }
    //define the uri to be sent with the xmlHttp object
    var uri="showValues.php";
    //add the query
    uri=uri+query;
    //add a random id to avoid duplication from subsequent clicks.
    uri=uri+"&sid="+Math.random();
    
    //when the state of the xmlHttp object changes (more specifically, "completes"), do the following
    xmlHttp.onreadystatechange=function(){
        if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
            //pass the response text to a variable
            var responseText=xmlHttp.responseText;
            //define the area on the page where the responseText will be held in
            var stageFive=document.getElementById("stageFive");
            //put the responseText in the area
            stageFive.innerHTML=responseText;
            //end "xmlHttp is complete"
            }
        }
    xmlHttp.open("GET",uri,true);
    xmlHttp.send(null);
    
    //temporary
    alert("This alert means the Ajax function should have completed!");

    }//end function hashAjax()

            


$addressValue=$_GET["addressValue"];
$secondValue=$_GET["secondValue"];
echo "addressValue is ".$addressValue."<br />\n";
echo "secondValue is ".$secondValue;
            

Return to top