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.
1. 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,
2.contoh
<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>
Menyiapkan halaman form.
Pertama-tama, kita harus mempersiapkan HTML yang akan digunakan oleh user. Jika kita akan menggunakan AJAX sebagai respon user input pada field City, perlu ditambahkan sebuah event listener pada field City. Akan ditambahkan juga atribut id pada elemen form – hal ini akan memudahkan pekerjaan kita.
Menggunakan event listener pada input field City merupakan hal yang mudah : hanya perlu meregistrasikan fungsi JavaScript yang akan dipanggil pada events. Dibawah ini adalah HTML form yang disempurnakan :
...
Address : <input type="text" name="address"/> <br/>
City : <select id=”city” name="city" onchange=”updateZip(this.value)”>
<option>Select One from List</option
<option value="Quezon City">Quezon City</option>
</select>
<br/>
Zip Code : <input id=”city” type="text" name="zip" size="4"/> <br/>
...
Dengan perubahan diatas, browser akan memanggil fungsi updateZip tiap kali user memilih value dari daftar City.
Tidak ada komentar:
Posting Komentar