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 0: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 arefresh : $refresh = new chat();
    $query="select * from chat";
    $a=$refresh->connect_easy($query);
    $refresh->show($a);
    exit;
    break;

    case isubmit: $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.

source: paparadit.blogspot

 View Full Story.