Penulis : Aprianto

sebelum belajar menggunakan PHP, pastinya kita belajar dahulu mengenai sintaks dasar PHP itu sendiri. pada waktu pertama kali belajar php pastinya hal yang biasa kita buat adalah menampilkan tulisan "HELLO WORLD" pada browser di komputer kita. mungkin tidak asing lagi bagi anda yang telah menggunakan pemograman PHP bertahun-tahun dengan kata-kata "HELLO WORLD". untuk ber eksperimen lagi saya membuat tulisan hello world atau tulisan apa saja yang mesti tulisan ditampilkan setelah kata-kata dimasukkan kedalam sebuah teksbox dan ketika di submit menggunakan HTML form tulisan tersebut baru akan ditampilkan pada browser dengan halaman bisa berbeda ataupun sendiri. Namun untuk mengirimkan agar kata-kata dari teksbox dapat di tampilkan kita harus mengirimkan data dengan metode Get atau Post. kemudian data baru bisa ditampilkan. secara terdefenisi proses tersebut memerlukan loading request dengan refresh data dengan bantuan browser menggunakan http request. nah, mungkin anda tidak ingin menggunakan proses itu secara langsung atau proses itu ingin disembunyikan agar request data tidak benar-benar terlihat. pada AJAX anda dapat melakukan hal tersebut, sehingga ini memungkinkan request yang dikirimkan dapat di sembunyikan serta tanpa menggunakan refresh browser yang cukup lama. untuk lebih jelasnya anda dapat melihat Proses data menggunakan AJAX dan PHP,

1. tahap yang pertama simpan source code berikut ini dengan ajax.js

    function talktoServer(){
    var req = newXMLHttpRequest();
    //register the callback handler function
    var callbackHandler = getReadyStateHandler(req, updateMsgOnBrowser);
    req.onreadystatechange = callbackHandler;
    req.open("POST", "servertime.php", true);
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //get the value from the text input element and send it to server
    var testmsg = document.getElementById("testmsg");
    var msg_value = testmsg.value;
    req.send("msg="+msg_value);
    }

    // This is the callback functions that gets called
    // for the response from the server with the XML data

    var lastPing = 0;
    function updateMsgOnBrowser(testXML) {

    var test = testXML.getElementsByTagName("test")[0];
    var message = testXML.getElementsByTagName("message")[0];
    var ip = testXML.getElementsByTagName("ip")[0];

    var timestamp = test.getAttribute("timestamp");
    if (timestamp > lastPing) {
    lastPing = timestamp;

    var ip_value = ip.firstChild.nodeValue;
    var message_value = message.firstChild.nodeValue;

    var msg_display = document.getElementById("msg_display");
    msg_display.innerHTML = " Server got the message: \"" +
    message_value + "\"" +
    "<br>Server IP: "+ ip_value +
    " Server Timestamp: \""+ timestamp + "\"" ;
    }
    }


    //the following two functions are helper infrastructure to
    //craete a XMLHTTPRequest and register a listner callback function

    function newXMLHttpRequest() {
    var xmlreq = false;
    if (window.XMLHttpRequest) {
    xmlreq = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
    // Try ActiveX
    try {
    xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
    // first method failed
    try {
    xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e2) {
    // both methods failed
    }
    }
    }
    return xmlreq;
    }

    function getReadyStateHandler(req, responseXmlHandler) {
    return function () {
    if (req.readyState == 4) {
    if (req.status == 200) {
    responseXmlHandler(req.responseXML);
    } else {
    var hellomsg = document.getElementById("hellomsg");
    hellomsg.innerHTML = "ERROR: "+ req.status;
    }
    }
    }
    }

2. kemudian simpan SImpan source code ini dengan test.html


    <html>
    <head>
    <title>AJAX Hello World Test Page</title>

    <link rel="stylesheet" href="http://www.hackorama.com/css/common.css" type="text/css" title="default" media="screen">

    <script type="text/javascript" src="ajax.js"></script>

    </head>
    <body>
    <p>
    <input id="testmsg" type="text" value="Hello AJAX">
    <button onclick="talktoServer()">Say Hello to Server</button>
    <div id="msg_display" style="{ background: yellow; font-weight: bold; }">The data from the server will go here...</div>
    </body>

    </html>


3. Tahapan terakhir source code berikut simpan dengan servertime.php


    <?
    header('Content-Type: application/xml');
    $msg = htmlentities(trim(stripslashes($_REQUEST['msg'])));
    $ts = time();
    $ip = gethostbyname("hackorama.com");
    print ("<?xml version=\"1.0\"?>");
    print ("<test timestamp=\"$ts\">");
    print ("<ip>$ip</ip>");
    print ("<message>$msg</message>");
    print ("</test>");
    ?>


semoga bermanfaat bagi anda yang ingin mempelajari AJAX dan PHP. So nice with u.