Simple AJAX Methodology
What is AJAX? Well you can see what is it stand for behind the word to the left image shown. But - for those who just heard AJAX acronym - what does it like? What does it purposed to? Many of AJAX online documentation you can pointed to and learned, but anyway, this official wiki page is a good start. As personally for me, AJAX give many useful things in a web programming. Generally, it can eliminated some limitations you will face in a pure HTML page. And somehow, it can make website more attractive & increasing interactivity.Moreover, this blog article would like describe out about a simple AJAX implementation, especially just for beginner programmer like me ;-). AJAX technology is not a latest one in World Wide Web but it’s almost new to me. I’m not an expert but this is my first experience to AJAX and I’d like to share about it to you. Think about a job but you have to force finished it only with one tool. And this was happened to me when I had to create a web chat module written in PHP.
Basically, a common rule acceptable chat application is that it has capability to refresh the display automatically when everyone leave a message, for example: Yahoo Messenger or IRC. In a regular HTML page (web based application), you can use a META tag but it will refresh the whole page in a specified time. Look at an example below:
<meta equiv="refresh" content="5;URL=chat.php">
The lack is, the message you type in a input box will lost when the time achieved (5 second to get the page refreshed automatically – chat.php). Give it 60 second and you will get an unreliable chat application since there are long duration time to rendering a new screen.
The point is, you will never have a good chat application with above technique. But the mighty AJAX can. How? First of all, take a subject to the database side. This will hold the whole messages from users. Create a table contains 2 row in MySQL just like below script. (database name: chat)
# MySQL-Front Dump 2.5
#
# Host: xxx Database: chat
# --------------------------------------------------------
# Server version 4.1.11
USE chat;
#
# Table structure for table 'chat'
#
DROP TABLE IF EXISTS chat;
CREATE TABLE chat (
pesan text,
time time NOT NULL default '00:00:00'
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
This is a simple table, you can rearrange it to your needs later. Anyway, look at the picture below and this what’s looks like with MySQLFront
Finally, I remade & simplify the chat AJAX script until it contain only 2 files; the chat library (chat.lib.php) & the form page (index.php).
Take a look at complete chat.lib.php class below:
<?php
class chat
{
var $host="your_db_host_server";
var $user="your_db_user";
var $db="chat";
var $pass="your_db_password";
function connect_easy($query)
{
$b = array();
if(!$connect = mysql_connect($this->host,$this->user,$this->pass));
if(!$dbr = mysql_select_db($this->db));
if(!($result = mysql_query($query)));
@$num = mysql_num_rows($result);
@$num2 = mysql_num_fields($result);
for($x=0;$x<$num;$x++)
{
$a = mysql_fetch_array($result);
for($i=0;$i<$num2;$i++)
{
$b[$x][$i] = html_entity_decode($a[$i]);
}
}
return $b;
}
function show($a)
{
if(count($a)>0)
{
$a=array_reverse($a);
if(count($a)<9)
$end=count($a);
else
$end=9;
for($i=0;$i<$end;$i++)
{
echo "<font size=2 color=red>".$a[$i][1]."</font>: ".$a[$i][0]."<br />";
}
}
}
}
All you need to do is change the variable of $host, $user and $pass and make an appropriate with your existing database server. Globally, this class has 2 function; the connection query & retrieval argument. Next, copy below script as form page and rename it as index.php.
<?
session_start();
require_once("chat.lib.php");
$action=$_GET["action"];
switch ($action)
{
case 'refresh' : $refresh = new chat();
$query="select * from chat";
$a=$refresh->connect_easy($query);
$refresh->show($a);
exit;
break;
case 'submit': $submit = new chat();
$query="insert into chat values ('".$_GET["chat"]."',NOW())"; $submit->connect_easy($query);
exit;
break;
}
?>
<html>
<head>
<title>AJAX Chat</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function ajaxConstructor()
{
var request_;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
request_ = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
request_ = new XMLHttpRequest();
}
return request_;
}
var http = new Array();
var http2 = new Array();
function getRefresh()
{
var curDateTime = new Date();
http[curDateTime] = ajaxConstructor();
http[curDateTime].open('get', 'index.php?action=refresh');
http[curDateTime].onreadystatechange = function()
{
if (http[curDateTime].readyState == 4)
{
if (http[curDateTime].status == 200 || http[curDateTime].status == 304)
{
var response = http[curDateTime].responseText;
document.getElementById('ajax_chat').innerHTML = response;
}
}
}
http[curDateTime].send(null);
}
function getSubmit()
{
var curDateTime = new Date();
http2[curDateTime] = ajaxConstructor();
http2[curDateTime].open('get', 'index.php?action=submit&chat=' + document.ajax.chat.value);
http2[curDateTime].send(null);
}
function kirim()
{
getSubmit();
document.ajax.chat.value=" ";
}
function refreshLayar()
{
getRefresh();
window.setTimeout("refreshLayar()", 2000);
}
</script>
</head>
<body onLoad="refreshLayar()">
<div id="ajax_chat" style="overflow=auto; width: 375px; height: 200px; border: 1px;" align="left"></div><br>
<form action="JavaScript: kirim()" method="get" name="ajax">
<font size="2" face="Trebuchet MS, Verdana, MS Sans Serif">Tulis Pesan: </font>
<input name="chat" type="text">
<input type="button" value="Kirim" onClick="kirim()">
</form>
</body>
</html>
All the both files must stay in the same path of a web server and make sure that you have a valid parameter database connection described earlier in chat.lib.php. Take a test and call the index page from any browser available from client.
That’s it & you’re done. The explanation of index page is very much simple. It contains some of core chat functions in JavaScript; the AJAX constructor, refreshing display, submit message & auto render screen in 2 second!. Got it? Well, class dismissed & hope this lesson benefit to us.
| PS: If you've benefit from this blog, you can support it by making a small contribution. |
Sunday, July 06, 2008 9:54:00 PM
Thanks for this, you might like an intriguing read via our blog.
Sunday, September 07, 2008 6:19:00 AM
Hi blogowner, just to let you know that the commenter 'never in that carriage' is a convicted stalker and a hate blogger.
Saturday, November 14, 2009 7:58:00 AM
Who knows where to download XRumer 5.0 Palladium?
Help, please. All recommend this program to effectively advertise on the Internet, this is the best program!
Tuesday, May 17, 2022 2:17:00 PM
Your article looks really adorable, here’s a site link i dropped for you which you may like.
메이저사이트
온라인경마