Wednesday, March 25, 2020

KD 3.15.1 Menerapkan konsep aplikasi interaktif dalam pemrograman aplikasi web


AJAX  memiliki  kepanjangan  Asynchronous  Javascript  And  XML  merupakan  suatu  teknik baru dalam dunia web. Sejak telah dikembangkan sekitar 2-3 tahun yang lalu, AJAX mulai dilirik oleh para web desainer dan web 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 seperti PHP, ASP, JSP dll. 

Perhatikan mekanisme proses AJAX menggunakan PHP berikut ini:










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 :

Pada  mekanisme  biasa,  respon  yang  dihasilkan  oleh  server  berupa  HTML  yang mengakibatkan halaman web akan merefresh tampilan. Dilihat dari sisi efisiensi, hal ini akan membutuhkan lebih banyak waktu dan byte data untuk melakukan load daripada XML. 

Dengan  demikian  AJAX  ini  merupakan  teknologi  baru  yang  merupakan  hasil  perkawinan sempurna antara client side programming (Javascript) dan server side programming. 

AJAX  tidak  hanya  dapat  diimplementasikan  menggunakan  PHP,  namun  juga  server  side programming yang lain, seperti ASP, JSP dsb. 

Sedangkan  kekurangan  AJAX  dibandingkan  mekanisme  biasa  adalah  memiliki  tingkat kesukaran pemrograman yang lebih tinggi, karena programmer harus menguasai 4 hal yaitu HTML-(XHTML), Javascript, XML dan juga server side programming.  

But it’s fine…  ☺ Ketrampilan dapat diasah dengan banyak latihan… 

Teknologi AJAX telah banyak digunakan oleh situs-situs terkenal. Beberapa diantaranya 
adalah Google, Yahoo, serta Flickr (www.flickr.com). Oleh Google, AJAX 
diimplementasikan dalam GMAIL (www.gmail.com),  Google Suggest 
(www.google.com/webhp?complete=1), Google Maps (maps.google.com), serta Google 
Adsense (www.google.com/adsense). 

Bagi  Anda  yang  memiliki  email  account  email  di  Gmail,  tentu  sudah  pernah  merasakan 
teknologi ini, khususnya ketika membuka email di Inbox. Ketika Anda membuka inbox dan 
membaca email, serasa halaman web tidak merefresh. 

AJAX sudah support di banyak browser, seperti IE (mulai versi 4.0), Firefox (semua versi), 
Opera (mulai versi  7.6),  Konqueror,  Netscape  (mulai  versi  7.1),  serta  Apple  Safari  (mulai 
versi 1.2). 


HTTP Request dan Dasar-dasar Respon 

 Untuk memahami konsep AJAX, pertama kali akan dibahas mengenai bagaimana situs web 
merequest dan menerima respon dari web server.  

Saat ini standar browser untuk memperoleh informasi dari web server adalah berbasis pada 
metode HTTP (HyperText Transfer Protocol). Hal ini berarti bahwa browser menggunakan 
metode tersebut untuk mengirim request dan menerima respon dari web server.  

HTTP bekerja seperti halnya email, yaitu ketika mengirim request akan terdapat header yang 
digunakan oleh web server. Oleh web server, header ini digunakan untuk mengetahui tugas 
apa yang harus dilayaninya dan bagaimana menghandle request dari HTTP. 

Meskipun  beberapa  header  bersifat  optional,  namun  terdapat  pula  yang  mutlak  harus  ada, 
misalnya  host  header.  Header  ini  sangat  penting  karena  akan  digunakan  web  server  untuk 
mengetahui tugas apa yang harus dilayani. 

Ketika request sudah diterima oleh server, selanjutnya server akan menentukan jenis respon 
yang akan dikembalikan kepada HTTP. Berikut ini beberapa jenis kode respon HTTP 


Sedangkan untuk metode request HTTP yang umum digunakan antara lain POST dan GET. 
Metode  GET  sering  digunakan  untuk  merequest  sumber  tertentu  ke  web  server.  Biasanya 
GET digunakan untuk mempassing value untuk diproses ke web server dan selanjutnya value 
itu diassign ke sebuah variabel untuk diproses oleh server. Sedangkan POST pada prinsipnya 
sama dengan GET, namun metode ini ideal untuk value yang diperoleh dari isian form dan 
halaman web. 

XMLHttpRequest 

Selain metode request HTTP yang telah dijelaskan pada bab sebelumnya, masih ada metode 
lain  yaitu  XMLHttpRequest.  XMLHttpRequest  merupakan  metode  request  HTTP  yang 
beroperasi  di  belakang  layar  (tanpa  harus  merefresh  halaman  web).  Metode  ini  berwujud 
suatu  obyek.  Sehingga  dalam  hal  ini  AJAX  merupakan  konsep  yang  mendeskripsikan 
interaksi antara XMLHttpRequest  (client side object) dengan server script seperti PHP, ASP 
dll.  

Sayangnya,  XMLHttpRequest  ini  memiliki  bentuk  obyek  yang  berbeda  dalam  beberapa 
browser sehingga dalam penggunaannya perlu penanganan khusus yang disesuaikan dengan 
jenis  browsernya.  Sebagai  contoh,  dalam  IE  obyek  tersebut  dinyatakan  sebagai  ActiveX 
Control. Pada Firefox dan Safari, XMLHttpRequest dinyatakan sebagai Javascript Object.  

Pada  aplikasi  AJAX,  pendeklarasian  penggunaan  XMLHttpRequest  ini  dilakukan  dalam 
sebuah  Javascript.  Berikut  ini  adalah  script  yang  digunakan  untuk  pendeklarasian 
penggunaan XMLHttpRequest 

Metode-metode pada XMLHttpRequest 

Dalam  obyek  XMLHttpRequest  terdapat  beberapa  metode  yang  digunakan  untuk  proses 
request. Berikut ini beberapa diantaranya: 

Metode  Deskripsi 
abort()  Untuk membatalkan request 
open()  Untuk melakukan koneksi ke server secara asynchronous 
send()  Untuk mengirim request 

Keterangan: 

Untuk metode open(), secara lengkap memiliki paramater-parameter yaitu  

open("method","URL","async") 

dengan  parameter  method  adalah  metode  request  HTTP  yang  digunakan  yaitu  POST  atau 
GET.  Parameter  URL  adalah  nama  URL  yang  akan  dikoneksikan.  Sedangkan  parameter 
async dapat digantikan dengan true apabila koneksi dilakukan secara asynchronous atau 
false apabila tidak secara asynchronous.  

Ketika Anda menggunakan request secara asynchronous, proses request tidak akan berhenti 
meskipun  response  dari  server  belum  diperoleh.  Sedangkan  apabila  menggunakan  request 
secara synchronous, maka proses request akan terhenti selama response belum diterima. Hal 
inilah yang menjadikan perbedaan dari kedua jenis request. Kedua jenis request tidak akan 
menjadi masalah apabila koneksi antara client dengan server sangat cepat. Akan tetapi untuk 
koneksi yang lambat, penggunaan request synchronous akan sangat mengganggu penggunaan 
aplikasi. 

Sebagai  contoh,  misalnya  pada  penggunaan  aplikasi  Google  Suggest  yang  dapat  Anda 
kunjungi di www.google.com/webhp?complete=1. 


Sumber :  http://source.rosihanari.net 

0 comments:

Post a Comment

 

© Copyright 2010 oleh HariZ| Powered By : Blogger