AJAX

Pendahuluan

Hingga saat ini, aplikasi web mengikuti alur arsitektur berikut : satu  satunya cara dalam merepresentasikan content baru (sebagai contoh, dalam merespon interaksi  antara user dengan halaman pada aplikasi) dilakukan dengan cara mengirimkan  request kepada server dan menampilkan halaman baru pada user. Terdapat  teknologi client side scripting (JavaScript, VBScript, dan sebagainya) yang  memberikan gambaran pada user bahwa mereka telah membuka content baru dengan sebuah click pada tombol. Namun, teknologi scripting tersebut hanya dapat memodifikasi content yang terdapat pada sebuah halaman; teknologi tersebut juga hanya dapat bekerja terhadap informasi yang telah dikirimkan pada client. 

Bermacam solusi telah dibuat sebelumnya, yang bertujuan untuk mengubah paradigma yang ada, namun beberapa diantaranya bersifat komersial (Microsoft memiliki sebuah solusi yang hanya berfungsi dengan Internet Explorer), sulit untuk  diprogram, dan tidak dapat diakses dengan mudah.

Kemudian hadirlah AJAX sebagai penyelesaiannya. 

AJAX

Menyerupai J2EE, AJAX adalah 2 hal yang digabungkan : merupakan sebuah  teknologi, sekaligus arsitektir pemrograman.

AJAX sebagai sebuah teknologi

AJAX adalah singkatan dari “Asynchronous  JavaScript and XML”, yang dibuat dari serangkaian teknologi dengan berbagai  kemampuan : JavaScript, XML dan sebuah method komunikasi asinkron antara client dan server.

3 teknologi yang saling berinteraksi : JavaScript menangkap isyarat, gerak serta aksi. Sebagaimana pada situasi yang mungkin terjadi, JavaScript menggunakan jalur komunikasi pada server (object JavaScript dengan nama XMLHttpRequest) untuk memanggil method yang tersimpan pada server dan menggunakan XML sebagai mekanisme pengiriman data. Jika JavaScript pada client telah menerima respon dari server, maka JavaScript akan menggunakan kemampuan bawaannya untuk memanipulasi struktur DOM halaman untuk menambahkan content yang didapat dari server. Perubahan yang terjadi pada struktur DOM kemudian diterjemahkan oleh browser pada client, sehingga meningkatkan efek interaktivitas pada user.

AJAX sebagai sebuah Arsitektur

Pada awalnya AJAX dibuat sebagai sebuah rangkaian dari teknologi, namun  kemudian AJAX mengalami perkembangan. Sebagai contoh, adanya aplikasi web  yang tidak menggunakan XML dalam mentransfer data dari client ke server. Cara tersebut dilakukan dengan menggunakan object XMLHttpRequest.

Berdasarkan realita di atas, beberapa pihak mendefinisikan sebagai paradigma baru  dalam pemrograman, disamping teknologi yang menyediakan fungsionalitas. Mari kita bahas lebih mendalam tentang arsitektur AJAX.

Pengembang telah mengembangkan web programming sebelum hadirnya AJAX :  action dari user yang membutuhkan data dari server ditampilkan dalam halaman
yang digunakan, dimana data request dari user dikirimkan menuju server. setelah mengolah halaman tersebut, server menampilkan halaman baru bagi user yang mengandung hasil dari proses sebelumnya.

Permasalah dari macam arsitektur tersebut adalah lambat dan cukup memakan  waktu, terutama bila dibandingkan dengan aplikasi desktop. Aplikasi desktop mampu merespon cepat atas request dari user, aplikasi ini tidak memproses ulang masing – masing komponen interface yang akan ditampilkan sebagai respon.

AJAX menggunakan arsitektur pemrograman  tersebut pada aplikasi Web. Daripada
memberikan sebuah halaman penuh pada  server dan mendapatkan pula sebuah halaman penuh sebagai hasil operasi, AJAX mengijinkan kita untuk mengirimkan
request dalam ukuran yang lebih kecil pada server. Halaman yang terpakai hanya termodifikasi untuk menampilkan hasil, bukan tergantikan dengan sebuah halaman baru.

Faktor penting yang lain dari arsitektur AJAX adalah request dan response dijalankan secara asinkron : AJAX tidak melarang user untuk melakukan proses lain pada halaman yang dipakai. User dapat mengisi dan menggunakan area lain pada halaman, sedangkan AJAX bekerja pada background.

Yang terakhir, AJAX mengijinkan user untuk berinteraksi dengan server sebagai  respon terhadap seluruh hal yang dilakukan oleh user. Arsitektur yang ada  sebelumnya hanya mengijinkan kita untuk berkomunikasi dengan server pada saat user menekan tombol atau link yang akan mengirim data pada halaman. AJAX memperbolehkan untuk me-request data baru dari server dalam bentuk mouseovers, keypress dan even lain yang dikenali oleh JavaScript.

Proses yang dilakukan oleh AJAX

Mari kita perhatikan contoh nyata yang menunjukkan bagaimana AJAX memperkaya interaktivitas user dan bagaimana kita menggunakannya dalam aplikasi.

Registration Form

Welcome new user!

Please enter your information in the fields below

Name :

Address :

City : Select One from List Tuban


Zip Code :

 Script download

<html>
<head>
<title>Registration Form</title>
</head>
<body>
<H1> Welcome new user! </H1>

Please enter your information in the fields below
<form action="/submit">
Name : <input type="text" name="name"/> <br/>
Address : <input type="text" name="address"/> <br/>
City : <select name="city">
<option>Select One from List</option
<option value="Quezon City">Quezon City</option>
</select>
<br/>
Zip Code : <input type="text" name="zip" size="4"/> <br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>

Contoh di atas adalah contoh sederhana dari form registrasi. Namun di sini terdapat suatu permasalahan, tidak semua user mengetahui nomor zip code.

Kita gunakan contoh diatas sebagai titik awal perjalanan kita di AJAX. Akan dikenalkan teknik penggunaan AJAX yang akan membuat halaman mengisikan  sendiri field zip code berdasarkan City yang dimasukkan oleh user.

Up Next ====>

AJAX 2010-01-13T21:05:00+07:00 Rating: 4.5 Diposkan Oleh: Abdul Muta'ali