14th Jun 2007 02:13am
576 views | 0 comments
Flattr this

I have spent almost all day creating my own Instant Messenger made with HTML, CSS, PHP, MySQL and AJAX. As bad as I thought AJAX was when looking at it, to be honest it is not exactly too hard. The one thing I do like about it is that it refreshes a page for you without refreshing in a sense. So you could be filling in a form and it can refresh the page and allow you to continue typing uninterrupted. For those of you who don't know what AJAX means, basically its an acronym of Asynchronous JavaScript and XML and is basically JavaScript and XML together as the meaning explains.

Anyways, here is a code snippet to make the page refresh without refreshing, great if it's attached to a RSS Feed, so you can have live news on a web page without even refreshing manually.

Place the following code in the <head> </head> tags:

<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxUpUp(){
     // Basically determines what browser the viewer is using
     var ajaxRequest;

     try{
          ajaxRequest = new XMLHttpRequest();
     } catch (e){
          try{
               ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (e) {
               try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
               } catch (e){
                    alert("Error");
                    return false;
               }
          }
     }
     // Create a function that will receive data sent from the server
     ajaxRequest.onreadystatechange = function(){
          if(ajaxRequest.readyState == 4){
               var ajaxDisplay = document.getElementById('ajaxDiv');
               ajaxDisplay.innerHTML = ajaxRequest.responseText;
          }
     }
     ajaxRequest.open("GET", "test.php", true);
     ajaxRequest.send(null);
}
// Refreshes the above code every 1 second
setInterval('ajaxUpUp()', 1000);
//-->
</script>

Within the BODY tag add this property
onload="ajaxReadChat()"

Then add this following piece of code where you want your content from the AJAX page to go.
<div id="ajaxDiv"></div>

And hey presto! You have finished it.

 

Tweet ThisShare On FacebookShare On Google ReaderAdd To Del.icio.usShare On DiggShare On RedditShare On LinkedInShare On StumbleUpon

Comments

Post your comment...

Your Name:

Your Email:

Your Comment:

Are You Human?

Tick this box to confirm you're not a bot.

  • © Dale Hay, 2005 - 2016