Sejarah dan Contoh Bahasa Pemrograman Ajax

Posted by

Sejarah Bahasa Pemrograman Ajax

AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web tapi bukan merupakan bahasa pemrograman yang baru. Dikembangkan sekitar 2-3 tahun yang lalu, AJAX mulai dilirik oleh para web desainer dan programmer. Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa. Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refresh page) atau pindah ke page yang lain. AJAX dapat diintegrasikan dengan server side programming sepertiPHP, ASP, JSP dll. Perhatikan mekanisme proses AJAX menggunakan PHP berikut ini :

Gambar Proses Ajax
Gambar Proses Ajax

Pada mekanisme di atas, proses berawal dari web client. Web client merequest sebuah halaman PHP ke server melalui Javascript. Selanjutnya server akan merespon dan menjalankan script PHP. Script PHP akan menghasilkan respon dalam bentuk XML dan data XML tersebut akan dikirim kembali ke web client untuk diolah oleh Javascript. Hasil olahan javascript tersebut akhirnya akan ditampilkan di web client sebagai output tanpa harus merefresh halaman web. Bandingkan dengan mekanisme biasa dalam menjalankan PHP seperti yang ditunjukkan pada gambar berikut

Gambar Proses Biasa

Gambar Proses Biasa

Pada mekanisme biasa, respon yang dihasilkan oleh server berupa HTML yang mengakibatkan halaman web akan merefresh tampilan. Dilihat dari sisi efisiensi, hal ini tentu kurang sekali. Sedangkan kekurangan AJAX dibandingkan mekanisme biasa adalah memiliki tingkat kesukaran pemrograman yang lebih tinggi, karena programmer harus menguasai 4 halyaitu HTML-(XHTML), Javascript, XML dan juga server side programming seperti PHP dan lain sebagainya.

 Contoh coding Aplikasi Website dengan Ajax

Pada aplikasi Javascript konvensional jika kita menginginkan data dari server kita menggunakan Form dan memanggilnya dengan method GET atau POST. Sehingga pengunjung perlu mengklik tombol dan kemudian halaman akan kerefresh untuk menampilkan hasil dari request tersebut. Nah, kalau dengan Ajax, Javascript berkomunikasi langsung keserver dengan sebuah fungsi yang disebut *XMLHttpRequest*.

Dengan XMLHttpRequest suatu halaman web dapat direquest dari server danditerima hasilnya tanpa perlu terjadi refresh pada halaman web tersebut.XMLHttpRequest telah disupport oleh IE 5 keatas, Safari 1.2 keatas, Mozilla Firefox keatas dan Opera 8 keatas. Ajax merupakan penggabungan teknologi-teknologi *Javascript, HTML/XHTML, XML, CSS *dan *Server Side Client*. Jadi jika anda belum menguasai salah satu dari teknologi tersebut disarankan untuk anda mempelajari dahulu sebelum melanjutkan
pemahaman tentang *AJAX*.

Contoh aplikasi Ajax

Pada artikel ini saya akan coba memberikan contoh ajax yang paling sederhana karena aplikasi-aplikasi website yang besar dimulai dari sesuatau yang sederhana. Untuk memulainnya silahkan anda buat sebuah File HTML dan tuliskan kode dibawah ini lalu simpan dengan nama index.html

?

<#>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

|<||html||>|
|<||head||>|
|<||title||>Contoh AJAX title>|
|<||script| |language||=||”javascript”||>|
|function GetXmlHttpObject(){|
| ||var xmlHttp=null;|
| ||try {|
| ||//Untuk Browser Firefox, Opera 8.0+, Safari|
| ||xmlHttp=new XMLHttpRequest();|
| ||}|
| ||catch (e){|
| ||//Untuk Browser Internet Explorer|
| ||try {|
| ||xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);|
| ||}|
| ||catch (e){|
| ||xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);|
| ||}|
| ||}|
| ||return xmlHttp;|
|}|

|function getpages(url,centercol) {|
| ||xmlHttp=GetXmlHttpObject();|
| ||if (xmlHttp) {|
| ||var obj = document.getElementById(centercol);|
| ||xmlHttp.open(“GET”, url);|
| ||xmlHttp.onreadystatechange = function() {|
| ||if (xmlHttp.readyState == 1) {|
| ||obj.innerHTML = ‘<||img| |alt||=||”Halaman Sedang Dimuat “| |src||=||”images/wait.gif”| |alt||=||”loading”| |/ >’;|
| ||}|
| ||if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {|
| ||obj.innerHTML = xmlHttp.responseText;|
| ||}|
| ||}|
| ||xmlHttp.send(null);|
| ||}|
|}|
|</||script||>|
|</||head||>|
|<||body||>|

|<||h1||>Request File Dari HTML </||h1||>|
|<||form||>|
| ||<||input| |value||=||”Request File “| |onclick||=||”getpages(‘request.html’,’centercol’)”| |type||=||”button”||>|
|</||form||>|
|<||div| |id||=||”centercol”||>|
| ||File request.html akan ditampilkan disini |
|</||div||>|
|</||body||>|
|</||html||>|

Sekarang buat file HTML dengan nama request.html yang disimpan dengan folder yang sama dengan File diatas kemudian isilah dengan text berikut ini:

?

<#>
1

|Text ini ditampilkan dengan metode proses request <||strong||>Ajax</||strong||>|

*Berikut saya terangkan*

Awalnya kita perlu membuat object *XMLHttpRequest*, objek ini wajib ada dalam website yang menggunakan Ajax. Untuk memanggilnya kita perlu menggunakan fungsi berikut ini:

?

<#>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

|function| |GetXmlHttpObject(){|
| ||var| |xmlHttp=||null||;|
| ||try| |{|
| ||//Untuk Browser Firefox, Opera 8.0+, Safari|
| ||xmlHttp=||new| |XMLHttpRequest();|
| ||}|
| ||catch| |(e){|
| ||//Untuk Browser Internet Explorer|
| ||try| |{|
| ||xmlHttp=||new| |ActiveXObject(||”Msxml2.XMLHTTP”||);|
| ||}|
| ||catch| |(e){|
| ||xmlHttp=||new| |ActiveXObject(||”Microsoft.XMLHTTP”||);|
| ||}|
| ||}|
| ||return| |xmlHttp;|
|}|

Pertama-tama kita set xmlHttp=null tidak aktif, kemudian baru kita aktifkan lagi dengan membuat objek yang baru |xmlHttp = new XMLHttpRequest();| Khusus untuk Internet Explorer, karena menggunakan
ActiveX untuk membuat XMLHttpRequest kita harus membuat kode |xmlHttp =new ActiveXObject (“Microsoft.XMLHttp”);|

Setelah kita membuat objek XMLHttpRequest sekarang kita membuat fungsi untuk mengambil file dan menampilkannya. Disini kita membuat fungsi|function getpages(url,centercol)|, yang didalamnya terdapat
|xmlHttp.open (“GET”, url);| yang berarti kita mengambil url dengan method get. dengan menggunakan method get maka kita harus mengirimkan sesuatu keserver, tapi karena kita tidak mengirim apa-apa maka kita kirimkan saja nilai kosong dengan kode: |xmlHttp.send(null)|;

|xmlHttp.onreadystatechange = function()| merupakan sebuah fungsi dimana nanti kita akan memperoleh status dari request file yang telah kita lakukan. xmlHttp.readyState memiliki 4 status yaitu:

  1. Request kita belum dibuat
  2.  Request kita sedang dalam proses (biasanya kita menggunakan gambar loading dengan ini)
  3.  Request kita sudah dikirim tapi hasil belum diterima
  4. Request kita sedang diproses dikomputer klien
  5.  Request sudah sukses dikirim dan kita sudah sukses menerimanya

xmlHttp.status merupakan status http. Jika statusnya 200 berarti file html nya ada dan siap ditampilkan.Sehingga kita perlu mengecek kedua status tersebut dengan kode |if (xmlHttp.readyState == 4 &&xmlHttp.status == 200)|

Jika kedua statusnya oke, maka kita perlu menampilkannya dengan perintah |obj.innerHTML = xmlHttp.responseText| Dimana ini berarti kita menampilkannya di obj, sementara variabel obj telah kita isi dengan centercol, ini kode ketika kita mengisi obj dengan centercol, |var obj = document.getElementById (centercol).|
Terakhir Kita memanggil fungsi |getpages| pada tombol serta mengirim urlyang akan ditampilkan. Inilah kode yang digunakan untuk memanggil fungsi getpages: |<input type=”button” value=”Tampilkan Request”
onclick=”getpages(‘request.html’ ,’centercol’)”>|.

Sources : http://www.w3function.com/blog/?p=det&idn=23

Leave a Reply

Your email address will not be published. Required fields are marked *