Our chat engine will save the contents of chat in your database as soon as you press enter. At the same time if the person at the other end has written something other than the previous contents, it updates your text box with the same. So, lets see how we do it using Jscript and AJAX

	function sendContents(value1){
 if(value1!=""){
  var con_history = document.getElementById('history').innerHTML;
  var new_cont = con_history + '\n' + "me:  " + value1;
  document.getElementById('history').innerHTML = new_cont;
  window.document.forms[0].elements[0].value = "";
   
   getLiveChat(value1);
   }
  }
	

So, function sendContents at first gets the contents of the history div (which was previous contents of your chat Box) and concats it with the newly entered value. Since the function is called instantaneously, the text box is updated as soon as you enter the value. It then also vacants the content of the text box in which you were typing. At the end it calls a function getLiveChat() and passes it the new contents. Its an AJAX function, which makes a request to the server to send the contents to the other user as well.Now, we will see what getLiveChat does.

	  function getLiveChat(contents) {             
  var myurl = "getChat.php"; 
  var myurl1 = myurl; 

 
  myRand = parseInt(Math.random()*999999999999999); 
  var modurl = myurl1+"?rand="+myRand ; 
   modurl = modurl + "&cont=" + contents; 
 
  http.open("GET", modurl, true); 
  http.onreadystatechange = useHttpResponse; 
  http.send(null); 
}
 

function useHttpResponse() { 
   if (http.readyState == 4) { 
    if(http.status == 200) { 
      var mytext = http.responseText; 
      document.getElementById('history').innerHTML = mytext; 
	  var objDiv = document.getElementById("history"); 
      objDiv.scrollTop = objDiv.scrollHeight; 
    } 
  } 
  else { 
 // do nothing till new chat is not available 
   
  } 
} 
	

Its a simple function making a simple AJAX request . It sends the contents to a file on your server called "getChat.php". It also sends a random number so that browser may not use the result from the cache as discussed earlier. Once the response from the server is available, it simply places the obtained result to our chat box and asks the chat window to scroll to the lowermost point so that new chat is visible to the user without any manual scrolling.

The script at the server side will basically deal with your database and send the updated chat. I will be uploading every file at the end of the project. Besides, we will also have a function to make auto call to the server so that your contents remain updated even if you are not responding to your friends. The function will be eactly similar to getLiveChat(), except that it will not have any argumnets.

We can make auto call to the function using Javascript as shown. Place this bit of code at a place such that it starts working as soon as the body loads. Once it is called, it will automatically call to itself as shown after a fixed interval of time.

setTimeout("refreshChat()",1000);

Body of the refreshChat() function :-

 function refreshChat(contents) {             
  var myurl = "refreshChat.php";    
  var myurl1 = myurl;    
  myRand = parseInt(Math.random()*999999999999999);    
  var modurl = myurl1+"?rand="+myRand ;    
  http1.open("GET", modurl, true);    
  http1.onreadystatechange = useHttpResponse2;    
  http1.send(null);    
}


function useHttpResponse2() {    
   if (http1.readyState == 4) {    
    if(http1.status == 200) {    
	 setTimeout("refreshChat()",1000); // auto call after every 1 sec    
      var mytext = http1.responseText;    
	  // work with the contents as you wish    
	      
    }    
  }     
  else {    
 // do nothing till new chat is not available    
      
  }    
}    

Please note that http and http1 are XMLHTTPRequest object made using the function getXMLHttpRequest()

Hope you enjoyed our basic tutorial on AJAX. We will keep on updating our site with several other silly contents that really matter.

Download files





Member Login

Member Login




Not a Member? Sign Up!




Login to comment

Be the first to comment on this topic







  


<<< Wanna review