Documentation of global variable and function Bijax

Variabel Global :

Ada 4 variabel yang digunakan dalam bijax

var XHR = new Array(); // array dari objex XMLHTTP
var targets=new Array(); // target element dari request
var maxXHR = 10; // maksimal objex XMLHTTP yang digunakan
var freeIndex = 0; //
var statusRequest = “loading…” //status request, bisa disi dengan gambar animasi loading

Fungsi

Ada 5 fungsi utama yang digunakan Bijax

GetId = function(id)
Fungsi : untuk mendapatkan handle dari element HTML berdasarkan nilai atribut ID tag / element HTML pada sebuah halaman HTML
Parameter :
id : string, id dari element HTML yang ingin di handle
Nilai balik : objek dari element HTML sesuai dengan ID-nya

Ajax= function()
Fungsi : untuk menciptakan objek XMLHTTP yang merupakan mesin AJAX.
Parameter : -
Nilai balik : objek XMLHTTP

Request = function( vUrl , vTarget, vForm, vMethod)
Fungsi : untuk merequest halaman dari server
Parameter :
vUrl : url atau nama file yang direquest, misal http://example.com/data.txt, atau data.txt, atau data.php?page=1
vTarget : id dari target elemnent yang digunakan untuk menempatkan data hasil request dari server
vForm : objek dari form
vMethod : methode request yang digunakan GET atau POST
Nilai balik : false jika sukses, true jika gagal

Handle = function()
Fungsi : merupakan fungsi callback dari fungsi Request, untuk mengecek apakah data dari server sudah diperoleh atau belum, jika sudah maka data tersebut diletakkan di element HTML dengan id sesuai dengan parameter vTarget yang dikirimkan fungsi Request
Parameter : -
Nilai balik : -

GetIndex = function ()
Fungsi : untuk mendapatkan index yang tidak sedang digunakan request data
Parameter : -
Nilai balik : index yang tidak digunakan atau -1 jika semua index digunakan

Getting started with bijax

Untuk menggunakan bijax, caranya cukup mudah :

1. Include script bijax -> bijax.js pada kode html Anda,

sesuaikan dengan path dari file bijax.js dimana Anda meletakkannya diserver.

2. Gunakan fungsi Request() untuk mengambil data dari server secara asinkron (request menggunakan metode AJAX)

Request( Nama_File , Target_Id , Objek_Form , Metode_Request )

contoh

Request( ‘data.txt’ , ‘target_page’, ”, ‘GET’ );

Keterangan : kode diatas akan merequest atau mengambil data dari file data.txt untuk kemudian data tersebut diletakkan pada element HTML dengan ID -> target_page, metode request yang digunakan adalah GET.

Script Bijax Version 1.00

/*

Name : Bijax
Version : 1.00
Description : Base code to develop AJAX web application
Filename : bijax.js
Last Update : July 10, 2008
Coder : 1. Hafid Mukhlasin (milisstudio@gmail.com)
2. … (You)
Homepage : http://bijax.wordpress.com

*/
var XHR = new Array();
var targets=new Array();
var maxXHR = 10;
var freeIndex = 0;
var statusRequest = “loading…”

GetId = function(id){
if (document.getElementById)
return document.getElementById(id);
else if (document.all)
return document.all[id];
}

Ajax= function(){
vXHR=false
if (window.XMLHttpRequest) { // Mozilla, Safari,…
vXHR = new XMLHttpRequest();
if (vXHR.overrideMimeType) {
vXHR.overrideMimeType(‘text/html’);
}
}
else if (window.ActiveXObject) { // IE
var MsXML = new Array(‘Msxml2.XMLHTTP.5.0′,’Msxml2.XMLHTTP.4.0′,’Msxml2.XMLHTTP.3.0′,’Msxml2.XMLHTTP’,'Microsoft.XMLHTTP’);
for (var i = 0; i < MsXML.length; i++) {
try {
vXHR = new ActiveXObject(MsXML[i]);
} catch (e) {}
}
}
return vXHR
}

Request = function( vUrl , vTarget, vForm, vMethod) {
if (freeIndex==-1) {
alert(‘Max ‘+maxXHR+’ request’)
return true
}
XHR[freeIndex]=Ajax()

if (!XHR[freeIndex]) {
//alert(“Ajax is’nt support to Your browser!”)
return true
}
targets[freeIndex]=vTarget

if (vForm == “”){
XHR[freeIndex].open(vMethod, vUrl, true);
XHR[freeIndex].onreadystatechange = Handle;
XHR[freeIndex].send(null);
}
else {
var params = ”;
for(i = 0; i < vForm.length; i++){
if (params.length) params += ‘&’;
params += vForm.elements[i].name + ‘=’ + encodeURI(vForm.elements[i].value);
}
if (vMethod==’POST’){
XHR[freeIndex].open( vMethod , vUrl , true);
XHR[freeIndex].setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
XHR[freeIndex].setRequestHeader(‘Content-Length’, params.length);
XHR[freeIndex].onreadystatechange = Handle;
XHR[freeIndex].send(params);
}
else{
XHR[freeIndex].open(vMethod, vUrl + ‘?’ + params, true);
XHR[freeIndex].onreadystatechange = Handle;
XHR[freeIndex].send(null);
}
}

freeIndex=GetIndex()
return false;
}

Handle = function(){
for (var i=0;i<maxXHR;i++){
if (XHR[i]!=undefined){
GetId(targets[i]).innerHTML = statusRequest
if (XHR[i].readyState == 4) {
if (XHR[i].status == 200) {
result = XHR[i].responseText;
GetId(targets[i]).innerHTML = result;
freeIndex=i;
} else {
XHR[i].abort();
GetId(targets[i]).innerHTML = “Data Not Found”;
freeIndex=i;
}
}
}
}
}

GetIndex = function (){
for (var i=0;i<maxXHR;i++){
if ( (targets[i]==undefined) || (targets[i]==”)){
return i
break
}
}
return (-1)
}

Simpan dengan nama -> bijax.js