Pertemuan ke-3
Membangun Aplikasi Web dengan AJAX- Langkah
pertama yang akan kita lakukan adalah menyiapkan script AJAX. Untuk lebih jelasnya, dibawah ini
penulis paparkan bagaimana cara membuat script AJAX.
/*
===========================================================
AJAX Routine Class
Author :Sumarni
Version :1.0
===========================================================
*/
001: function Ajax()
002: {
003:
var http_request = false;
004:
//var _datareturn='';//data return
005:
var _postvalue='';//get data from form value
006:
var _method='';//get or post
007:
var _url='';//url address
008:
var _responsetype='';//text or xml
009: var
_formobject;//form id
010:
var _documentid='';//get document id
011:
012:
function setMethod(setValue){
013:
_method=setValue;
014:
return false;
015: }
016:
this.setMethod=setMethod;
017:
018:
function setUrl(setValue){
019:
_url=setValue;
020: }
021:
this.setUrl=setUrl;
022:
023:
function setResponseType(setValue){
024:
_responsetype=setValue;
025: }
026:
this.setResponseType=setResponseType;
027:
028:
function setDocumentId(setValue){
029:
_documentid=setValue;
030: }
031:
this.setDocumentId=setDocumentId;
032:
033:
function setFormObject(setValue){
034:
_formobject=setValue;
035: }
036:
this.setFormObject=setFormObject;
037:
038:
function createRequest()
039: {
040:
041:
http_request = false ;
042:
if (window.XMLHttpRequest)
043:
{ // Mozilla, Safari ,...
044:
http_request = new XMLHttpRequest();
045:
if (http_request.overrideMimeType)
046:
{
047:
http_request.overrideMimeType('text/xml');
048:
// See note below about this line
049:
}
050:
}
051:
else
052:
if (window.ActiveXObject)
053:
{ // IE
054:
var aVersions = [ "MSXML2.XMLHttp.6.0",
055:
"MSXML2.XMLHttp.5.0",
056:
"MSXML2.XMLHttp.4.0",
057:
"MSXML2.XMLHttp.3.0",
058: "Microsoft.XMLHTTP" ];
059:
for (var i = 0; i < aVersions.length; i++)
060:
{
061:
try
062:
{
063:
http_request = new ActiveXObject(aVersions[ i ]);
064:
break;
065:
}
066:
catch (e)
067:
{
068: // Do nothing
069:
}
070:
}//end for
071:
}//end if window.ActiveXObject
072:
if (!http_request)
073:
{
074:
alert ('Giving up :( Cannot create an XMLHTTP instance');
075:
return false;
076:
}
077:
078: var timestamp = new Date();
079: var uniqueURI = _url+
(_url.indexOf("?") > 0 ? "&" : "?")+
"timestamp="+
timestamp.getTime();
080:
081:
if(_method=="get")
082:
{
083:
http_request.open('GET', uniqueURI, true);
084: http_request.onreadystatechange =
handleResponse;
085:
http_request.send(null);
086:
}
087:
else
088:
{
089:
if(!_formobject)return false;
090:
for(i = 0; i < _formobject.length; i++)
091:
{
092:
if (_postvalue.length) _postvalue += '&';
093:
switch(_formobject.elements[i].type)
094:
{
095:
case "text":
096:
_postvalue += _formobject.elements[i].name + '=' +
encodeURI(_formobject.elements[i].value);
097:
break;
098:
case "password":
099:
_postvalue += _formobject.elements[i].name + '=' +
encodeURI(_formobject.elements[i].value);
100:
break;
101:
case "textarea":
102:
_postvalue += _formobject.elements[i].name + '=' +
encodeURI(_formobject.elements[i].value);
103:
break;
104:
case "hidden":
105:
_postvalue += _formobject.elements[i].name + '=' +
encodeURI(_formobject.elements[i].value);
106:
break;
107:
case "select-one":
108:
if(_formobject.elements[i].selectedIndex>=0)
109:
{
110:
_postvalue += _formobject.elements[i].options[_formobject.elements[i].
selectedIndex-1].value;
111:
}
112:
break;
113:
}//end switch
114:
}//end for
115:
http_request.open('POST', uniqueURI, true);
116:
http_request.onreadystatechange = handleResponse;
117:
http_request.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
118:
http_request.send(_postvalue);
119:
for(i = 0; i < _formobject.length; i++)
120:
{
121:
if((_formobject.elements[i].type=="text")||
122:
(_formobject.elements[i].type=="textarea")||
123:
(_formobject.elements[i].type=="hidden")||
124:
(_formobject.elements[i].type=="password"))
125:
_formobject.elements[i].value="";
126:
}
127:
128:
}//end else
129:
}//end function
130: this.createRequest=createRequest;
131:
132:
function handleResponse()
133: {
134:
if (http_request.readyState == 4)
135: {
136:
if (http_request.status == 200)
137:
{
138:
var docid=new Array();
139:
var i;
140:
docid=_documentid.split('~');
141:
142:
if(_responsetype=="text")
143:
{
144:
var responsetxt=new Array();
145:
responsetxt=http_request.responseText.split('|');
146:
147:
for(i=0;i<docid.length;i++)
148:
{
149:
document.getElementById(docid[i]).innerHTML=''+responsetxt[i];
150:
}
151:
}
152:
else if(_responsetype=="xml")
153:
alert(http_request.responseXML);
154:
155:
} else alert('There was a problem with the request.');
156:
}//else alert('There was a problem with the request
'+http_request.readyState);
157:
return false;
158:
}//end function
159: }//end class
160:
161: function doRequest(requestmethod,
urladdress, responsetype, documentid, formobject){
162:
try
163: {
164: var
obj=new Ajax();
165:
obj.setMethod(requestmethod);
166:
obj.setUrl(urladdress);
167:
obj.setResponseType(responsetype);
168:
obj.setDocumentId(documentid);
169:
if(formobject)
170: {
171:
obj.setFormObject(formobject);
172: }
173:
obj.createRequest();
174:
}catch(ex)
175:
{
176:
alert(ex.message);
177:
}
178: }
Jika
dilihat pada contoh script diatas, terdapat dua function utama yang menjadi
inti dari AJAX
yaitu function createRequest dan function handleRequest. Penjelasan kedua
fungsi ini bisa anda lihat dibawah ini.
Function
createRequest ini bertugas untuk menginisialisasi object XMLHttpRequest, dimana
object tersebut nantinya digunakan sebagai media komunikasi dengan server.
Dalam function createRequest tersebut disertakan pengecekan object
XMLHttpRequest yang disupport oleh browser client yang antara lain
XMLHttpRequest untuk jenis browser FireFox, Safary, Opera dan ActiveXObject
untuk Microsoft Internet Explorer (lihat baris 042 sampai dengan 072).
Pada
umumnya dalam membangun aplikasi web, terdapat dua metode yang paling umum
digunakan yaitu metode get dan post. Kedua metode ini akan dijalankan pada saat
fungsi open pada object XMLHttpRequest kita panggil. Metode get pada umumnya
digunakan untuk mengambil data dari server
yang
selanjutnya data tersebut ditampilkan di browser. Penanganan metode get ini
bisa anda lihat pada baris ke 081 sampai dengan 085 pada contoh script diatas.
Metode post pada umumnya digunakan untuk mengirimkan data dari client ke
server. Penanganan metode post ini bisa anda lihat pada baris ke 089 sampai
dengan 111 pada contoh script diatas.
Jika
createRequest berfungsi sebagai media komunikasi client-server, maka fungsi
handleRequest bertugas untuk menangani respon dari server. Jika anda amati pada
baris ke 134 terdapat deklarasi
if
(http_request.readyState == 4)dimana property readystate = 4 ini menunjukkan
status respon dari server telah selesai (complete). Readystate itu sendiri
terbagi menjadi 4 buah yaitu :
- 0 - The request is not initialized
- 1 - The request has been set up
- 2 - The request has been sent
- 3 - The request is in process
- 4 - The request is complete
Setelah
respon dari server selesai dilakukan tentunya langkah selanjutnya adalah
menampilkan hasil respon tersebut ke browser kita. Untuk menampilkan hasil
respon tersebut bisa anda lihat pada baris ke 149 pada contoh script diatas. Untuk mencobanya
simpan terlebih dahulu script anda dengan nama ajax.js.
Sampai
disini script AJAX
telah selesai kita bahas. Untuk selanjutnya kita akan menyiapkan HTML serta
script PHP. Dalam contoh kali ini penulis akan membuat autocomplete combobox
untuk menampilkan merk serta tipe-tipe handphone.
Oke sampai disini dulu turial Membangun Aplikasi Web dengan AJAX sampai jumpa dipertemuan berikutnya.
