PHP : Belajar AJAX dengan bantuan SAJAX

Download Contoh Kode

Saat ini aplikasi web selalu darahkan untuk menggunakan ajax. Dalam artikel ini, kita akan belajar mengimplementasikan ajax dengan menggunakan library bantuan dari modernmethod.com yang bernama sajax.

Kenapa menggunakan ajax

Aplikasi web berjalan halaman demi halaman. misalkan, jika kita ingin menambah data pada sebuah table maka akan melibatkan paling tidak 2 halaman, yaitu :

1. halaman form
2. halaman pemroses.

Apabila tidak ada data yang khusus ingin dimunculkan pada halaman form, maka proses standar menggunakan 2 halaman seperti dapat digunakan. masalah akan muncul apabila ada informasi yang ingin dimunculkan pada saat input data di form. misalkan data yang diinput adalah data order, yang pada saat kode produk diinput maka dihalaman yang sama akan muncul stok dan nama produk yang dmaksud.

Masalah tersebut bisa diatasi dengan 2 cara :
1. menggunakan window.open yang akan membuka window baru
2. menggunakan ajax

Kita hanya akan membicarakan solusi nomor 2 , yaitu ajax. Ajax menggunakan komponen browser yang disebut dengan XMLHttpRequest yang diciptakan pertama kali oleh Microsoft untuk browsernya Internet Explorer. Dengan menggunakan XMLHttpRequest ini ditambah dengan Javascript maka ajax dapat terlaksana .

Berikut ini contoh kode :

<?php
//file Index.php

include("Sajax.php");

//sajax function
$sajax_request_type = "GET";
sajax_init();
include("ajax.php"); //daftarkan fungsi-fungsi yang akan diexpose sebagai fungsi javascript
sajax_handle_client_request();

echo "<script>";
echo sajax_get_javascript();
echo "</script>";
?>

<?php
//ajax.php

function luasLingkaran($jari){
$luas = 3.14*($jari*$jari);
return $luas;
}

//contoh dengan database
function cariProduk(){
//fungsi database disini
//return
return "hasil dari database";
}


sajax_export("luasLingkaran"); // sajax akan menghasilkan fungsi javascript bernama x_luasLingkaran
                           // yang dapat digunakan sebagai pintu menuju fungsi yang berada di php

sajax_export("cariProduk"); //akan ada fungsi javascript x_cariProduk                           
?>

Jika kode diatas dijalankan dan tidak ada error maka kita berhasil mensetup ajax dengan sajax, selanjutnya kita akan melihat source code untuk memastikan kembali.Berikut ini adalah sebagian source code yang seharusnya nampak jika kode diatas dijalankan.

<script>
// remote scripting library
// (c) copyright 2005 modernmethod, inc
var sajax_debug_mode = false;
var sajax_request_type = "GET";
var sajax_target_id = "";
var sajax_failure_redirect = "";

function sajax_debug(text) {
if (sajax_debug_mode)
 alert(text);
}

function sajax_init_object() {
 sajax_debug("sajax_init_object() called..")

 var A;

 var msxmlhttp = new Array(
 'Msxml2.XMLHTTP.5.0',
 'Msxml2.XMLHTTP.4.0',
 'Msxml2.XMLHTTP.3.0',
 'Msxml2.XMLHTTP',
 'Microsoft.XMLHTTP');
for (var i = 0; i < msxmlhttp.length; i++) {
 try {
  A = new ActiveXObject(msxmlhttp[i]);
 } catch (e) {
  A = null;
 }
}

if(!A && typeof XMLHttpRequest != "undefined")
 A = new XMLHttpRequest();
if (!A)
 sajax_debug("Could not create connection object.");
return A;
}

var sajax_requests = new Array();

function sajax_cancel() {
for (var i = 0; i < sajax_requests.length; i++)
 sajax_requests[i].abort();
}

function sajax_do_call(func_name, args) {
var i, x, n;
var uri;
var post_data;
var target_id;

sajax_debug("in sajax_do_call().." + sajax_request_type + "/" + sajax_target_id);
target_id = sajax_target_id;
if (typeof(sajax_request_type) == "undefined" || sajax_request_type == "")
 sajax_request_type = "GET";

uri = "/satiri/projek/websample/ajax1/";
if (sajax_request_type == "GET") {

 if (uri.indexOf("?") == -1)
  uri += "?rs=" + escape(func_name);
 else
  uri += "&rs=" + escape(func_name);
 uri += "&rst=" + escape(sajax_target_id);
 uri += "&rsrnd=" + new Date().getTime();

 for (i = 0; i < args.length-1; i++)
  uri += "&rsargs[]=" + escape(args[i]);

 post_data = null;
}
else if (sajax_request_type == "POST") {
 post_data = "rs=" + escape(func_name);
 post_data += "&rst=" + escape(sajax_target_id);
 post_data += "&rsrnd=" + new Date().getTime();

 for (i = 0; i < args.length-1; i++)
  post_data = post_data + "&rsargs[]=" + escape(args[i]);
}
else {
 alert("Illegal request type: " + sajax_request_type);
}

x = sajax_init_object();
if (x == null) {
 if (sajax_failure_redirect != "") {
  location.href = sajax_failure_redirect;
  return false;
 } else {
  sajax_debug("NULL sajax object for user agent:\n" + navigator.userAgent);
  return false;
 }
} else {
 x.open(sajax_request_type, uri, true);
 // window.open(uri);

 sajax_requests[sajax_requests.length] = x;

 if (sajax_request_type == "POST") {
  x.setRequestHeader("Method", "POST " + uri + " HTTP/1.1");
  x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 }

 x.onreadystatechange = function() {
  if (x.readyState != 4)
   return;

  sajax_debug("received " + x.responseText);

  var status;
  var data;
  var txt = x.responseText.replace(/^\s*|\s*$/g,"");
  status = txt.charAt(0);
  data = txt.substring(2);

  if (status == "") {
   // let's just assume this is a pre-response bailout and let it slide for now
  } else if (status == "-")
   alert("Error: " + data);
  else {
   if (target_id != "")
    document.getElementById(target_id).innerHTML = eval(data);
   else {
    try {
     var callback;
     var extra_data = false;
     if (typeof args[args.length-1] == "object") {
      callback = args[args.length-1].callback;
      extra_data = args[args.length-1].extra_data;
     } else {
      callback = args[args.length-1];
     }
     callback(eval(data), extra_data);
    } catch (e) {
     sajax_debug("Caught error " + e + ": Could not eval " + data );
    }
   }
  }
 }
}

sajax_debug(func_name + " uri = " + uri + "/post = " + post_data);
x.send(post_data);
sajax_debug(func_name + " waiting..");
delete x;
return true;
}


// wrapper for luasLingkaran
function x_luasLingkaran() {
sajax_do_call("luasLingkaran",
 x_luasLingkaran.arguments);
}


// wrapper for cariProduk
function x_cariProduk() {
sajax_do_call("cariProduk",
 x_cariProduk.arguments);
}

</script>

Langkah selanjutnya adalah memodifikasi index.php agara dapat menggunakan fungsi php yang telah di expose sebagai javascript.berikut ini adalah file index.php yang telah dimodifikasi

<?php
include("Sajax.php");

//sajax function
$sajax_request_type = "GET";
sajax_init();
include("ajax.php"); //daftarkan fungsi-fungsi yang akan diexpose sebagai fungsi javascript
sajax_handle_client_request();

echo "<script>";
echo sajax_get_javascript();
echo "</script>";
?>

<script>
function hitungLuas(){
jari=document.getElementById("jari").value;
x_luasLingkaran(jari,handleHitungLuas); //membutuhkan fungsi yang menghandle hasil dari
                                      //perhitungan ajax
}

function handleHitungLuas(data){
document.getElementById("luasnya").innerHTML="Luasnya:"+data;
}
</script>


<input type='text' id='jari' name='jari' onChange="hitungLuas()">
<div id='luasnya'>Luasnya:0</div>

apabila kode diatas dijalankan maka, setiapkali textfield diisi dan ditekan enter maka hasilnya akan segera muncul dilayar.berikut ini screenshot aplikasi ajax.


Ok.Cukup untuk sekarang, pahami dulu kode ini, selanjutnya akan lebih mudah apabila sudah kode ini sudah mengerti. happy coding!.