|

PENGENALAN AJAX

Contents

Sejarah Ajax.......................................................................................................................3

Cara Kerja AJAX..................................................................................................................4

Konsep HTTP Request dan Response.............................................................................5

XMLHttpRequest Object.............................................................................................6

XMLHttpRequest Methods.........................................................................................8

XMLHttpRequest Properties.......................................................................................9

Kemampuan AJAX........................................................................................................10

Contoh Implementasi Ajax...........................................................................................12

JQuery Ajax......................................................................................................................13

Kesimpulan.......................................................................................................................15

Asynchronous JavaScript and XMLHTTP,

atau disingkat AJaX, adalah suatu teknik

pemrograman berbasis web untuk

menciptakan aplikasi web interaktif.

AJAX merupakan teknik baru di dunia

pengembanan halaman web yang berguna untuk membuat aplikasi web, yang lebih

“kaya” dibandingkan dengan aplikasi web biasa.

Ajax memungkinkan sebuah halaman web memperbarui data dari server yang

ditampilkannya tanpa harus melakukan refresh, sehingga halaman terlihat lebih

responsif. Ajax merupakan kombinasi dari:

DOM

Objek XMLHTTP dari Microsoft atau XMLHttpRequest yang lebih umum di

implementasikan pada beberapa browser.

XML umumnya digunakan sebagai dokumen transfer.

JSON

Fitur dan ciri utama AJAX adalah sebuah halaman web tidak perl di-refresh setiap kali

ada data baru yang ingin ditampilkan. Dengan demikian, sebuah aplikasi web akan

terasa seperti aplikasi desktop saja. kecepatan, interaktivis, fungsionalitas, dan tingkat

kegunaan halaman web akan meningkat.

Dari namanya, terlihat bahwa AJAX bersifat asynchronous. Arti asinkron di sini bahwa

permintaan data tambahan dari server dan loadingnya dilakukan di background tanpa

mempengaruhi tampilan dan sifat halaman web sekarang. Jadi, sembari AJAX bekerja

mengambil data dari server, user yang membuka halaman web masih tetap bisa

berinteraksi dengan alaman web tersebut, di mana halaman web tidak mengalami

freezing seperti halnya aplikasi web konvensional.

Sejarah Ajax

Ajax mulai trend atau popular digunakan pada tahun 2005, yang merupakan

pengembangan dari teknologi iFrame Elemen pada browser Internet Explorer (IE) yang

dibuat oleh Microsoft. Kemudian Microsoft mengembangkan teknologi Remote Script

pada tahun 2008, kemudian dilanjutkan dengan pengembangan ActiveX di IE versi 5.0

sebagai pengganti Java Applet pada tahun 1999. Kemudian Mozilla dan Safari mengikuti

teknologi ini. Pada akhirnya World Wide Web Consorsium (W3C) memutuskan pada

tanggal 5 April 2006 menjadi standart pengembangan web.

Keuntungan

1. Aplikasi web dapat meminta hanya konten yang perlu di-refresh, sehingga

secara drastis mengurangi penggunaan bandwidth dan beban waktu.

2. Penggunaan asynchronous permintaan memungkinkan klien Web browser UI

untuk lebih interaktif dan merespon dengan cepat untuk masukan, dan bagian-

bagian tertentu dari halaman juga dapat direload secara parsial. Pengguna

mungkin akan merasa aplikasi lebih cepat atau lebih responsif, bahkan jika

aplikasi tersebut belum berubah pada sisi server.

3. Penggunaan Ajax dapat mengurangi koneksi ke server, karena Klien skrip dan

CSS hanya didownload ke klien sekali saja.

Kerugian

1. Fungsi ajax tidak akan berjalan bila fitur javascript tidak diaktifkan.

2. Rentan serangan hacker, karena klien dapat mengakses remote procedure

Cara Kerja AJAX

Secara sederhana cara kerja ajax adalah dengan browser membuat suatu object

XMLHttpRequest. Objeck XMLHttpRequest memperkenankan Javascript untuk

mengakses server secara asynchronous sehingga dapat meng-update bagian-bagian

tertentu dari halaman web tanpa harus memanggil keseluruhan halaman web. Untuk

mengakses server singkatnya adalah membuat request HTTP sederhana untuk suatu

file/script yang terletak di server, kemudian request HTTP dikirimkan ke server melalui

jaringan Internet. Setelah sampai di server maka server akan memproses dan merespon

request HTTP dan mengirimkan kembali data ke sisi browser melalui jaringan Internet.

Setelah proses kembali ke browser maka browser akan memproses data, tapi tidak

seperti Website pada umumnya. Proses pengembalian data mengunakan format yang

dapat dengan mudah di-parsing oleh kode Javascript yang ada di browser. Setelah data

diproses maka terjadilah proses update yang telah ditentukan tadinya pada halaman

web page. (lihat gambar).

Konsep HTTP Request dan Response

Untuk mengetahui bagaimana konsep dari Ajax maka perlu mengetahui bagaimana

sebuah web browser memproses sebuah request dan menerima sebuah response dari

web server.

Standar yang digunakan web browser pada saat ini adalah HTTP (HyperText Transfer

Protocol). HTTP digunakan oleh web browser untuk mengirim request dari website ke

web server dan kemudian menerima response dari web server. HTTP request berkerja

seperti email, memberitahukan kapan request dikirim, berisi header yang memberitahu

apa yang harus dilakukan server dan bagaimana menghandle request tersebut.

Sekali sebuah request diterima, web server kemudian menentukan response apa yang

akan diberikan.

Terdapat banyak request method yang ada, tetapi yang paling sering digunakan adalah

GET dan POST.

XMLHttpRequest Object

Ajax bisa dibilang adalah sebuah konsep untuk menerangkan interaksi antara client-side

XMLHttpRequest Object dengan script server-side. Untuk membuat request ke web

server menggunakan Ajax, Object XMLHttpRequest harus terlebih dahulu terbentuk.

XmlHttpRequest adalah sebuah object javascript yang digunakan untuk mengakses web

server secara asingkron, jadi user dapat terus melakukan aktifitasnya di sebuah halaman

web tanpa me-refresh halaman tersebut, karena proses requestnya dilakukan di

background.

Gambar 1 HTTPRequest Tradisional (non-ajax)

Gambar 2 HTTPRequest (with Ajax)

Mengakses web server artinya adalah melakukan sebuah request biasa ke sebuah

halaman di webserver yang berisi script (server side script). Teknisnya XMLHttpRequest

(XHR) adalah sebuah DOM API yang dapat digunakan pada web browser scripting

language seperti JavaScript

Pada proses request ini, tentunya ada data yang akan kita lewatkan untuk diproses di sisi

server. Metode request yang dapat dan biasa kita gunakan adalah GET atau POST.

Tentunya akan sangat mudah bagi server untuk membaca data yang di kirimkan oleh

client dengan menggunakan metode tersebut.

Setelah data tersebut terkirim, otomatis server akan mengirimkan respon balik atas

request yang telah dilakukan. Berbeda dengan respon web server biasa, biasanya hasil

respon tersebut dalam sebuah format yang mudah di parsing oleh javascript di sisi

client. Walaupun berlabel XML kita juga dapat menggunakan data format lain seperti #

HTML, JSON, CSV. Text Format yang banyak digunakan adalah XML dan Json. Xml banyak

digunakan karena format ini sudah di dukung banyak system dan ada banyak library

yang dapat digunakan untuk memanipulasi dokumen XML tersebut. Sedangkan

JavaScript Object Notation (JSON) karena simple dalam mendecode dan ukurannya yang

sangat kecil dan data oriented.

Konsep utama XMLHttpRequest ini berasal dari Microsoft pada project Outlook Web

Access. Sebuah interface bernama IXMLHTTPRequest telah diimplementasikan di

MSXML. Dan pada versi kedua MSXML, IXMLHTTPRequest sudah dapat digunakan pada

Internet Explorer 5.0(March 1999) menggunakan ActiveX wrapper.

Hal tersebut diikuti oleh Mozilla Foundation dengan membangun sebuah interface yang

disebut nsIXMLHttpRequest pada browser engine mereka – gecko. Interface ini

dibangun mirip dengan Microsoft’s IXMLHTTPRequest interface. Perbedaanya Mozzila

menjadikannya sebagai salah satu object dalam javascript.

Karena konsepnya yang bagus, XMLHttpRequest menjadi standard diantara browser-

browser besar. Safari mengimplementasikan pada February 2004 (safari 1.2),

Konqueror, Opera 8.0 pada April 2005. Pada tahun 2006 World Wide Web Consortium

(W3C) mempublish sebuah draft tentang XMLHttpRequest ini untuk menjadi standar

yang lebih baku.

XMLHttpRequest Methods

Setelah XMLHttpRequest terbentuk, terdapat beberapa method atau fungsi yang bisa

digunakan. Method-method tersebut dijelaskan di bawah ini.

1. abort()

Method abort() digunakan untuk menghentikan request yang sedang berjalan.

Method ini sangat berguna jika anda memperhitungkan lama waktu koneksi,

misalnya jika waktu koneksi melebihi rentang waktu tertentu anda bisa

menggunakan method abort() untuk menghentikan request secara prematur.

2. getAllResponseHeader()

Method ini untuk memperoleh semua informasi dari semua header HTTP yang

sedang diberikan oleh server.

3. getResponseHeader("headername")

Method ini dapat digunakan untuk memperoleh isi dari begian sebuah header,

sebagai contoh untuk memperoleh ukuran dari document yang sedang

direquest, anda dapat menggunakan getResponseHeader("Content-Length").

4. open ("method","URL","async","username","pswd")

Method ini merupakan method yang paling penting dan berguna pada

XMLHttpRequest. Method ini digunakan untuk membuka koneksi dengan

document yang ada di server. Dengan method ini anda memberitahukan kepada

web server method apa yang digunakan untuk membuka file ("GET" atau

"POST"). Sebagai catatan tidak semua argument pada method ini harus diisi,

tergantung dengan situasi dan kebutuhan.

5. setRequestHeader("label","value")

Method ini dapat digunakan untuk menentukan header pada saat melakukan

request. Sebagai catatan, method ini hanya bisa dipanggil setelah method open

digunakan dan sebelum method send dipanggil.

6. send("content")

Method ini digunakan untuk mengirim request ke server. Jika request dikirim

secara asynchronous, maka response akan datang secepatnya. Jika tidak,

response akan datang setelah response diterima oleh web browser. Parameter

pada method ini tidak harus diisi, parameter ini sangat berguna untuk

memproses HTML form dan memberikan anda untuk mengirim nilai dari

element form ke web server.

XMLHttpRequest Properties

XMLHttpRequest memiliki properti yang dapat digunakan dan dimanipulasi, seperti

dijelaskan di bawah.

1. Onreadystatechange

Properti ini adalah sebuah event handler yang memberikan anda untuk men-

trigger sebuah blok kode atau function, ketika state (sampai dimana proses

request berlangsung pada waktu tertentu) berubah. Contoh, misalnya anda

ingin menampilkan pesan (alert) pada saat state telah berubah menjadi

complete state.

2. readyState

Berisi informasi state dari object XMLHttpRequest pada saat properti ini

digunakan (0: uninitialized, 1: loading, 2: loaded, 3: interactive, 4: complete).

Properti ini bisa digunakan untuk menangani kesalahan, memanggil blok kode

atau function untuk setiap readyState. Misalnya, untuk menampilkan text

"loading" pada saat readyState sama dengan 1 (fase loading) dan memanggil

sebuah function pada saat readyState=4 (complete).

3. responseText

Properti ini akan dihasilkan pada saat request telah berhasil/complete. Misalnya

anda melakukan request terhadap sebuah document di server, respon dari

server akan disimpan pada properti ini. Biasanya properti ini digunakan untuk

mengganti properti innerHTML dari sebuah element HTML.

4. responseXML

Properti ini sama dengan responseText, tetapi respon yang dihasilkan dalam

format XML.

5. Status

Properti ini memberitahukan response code yang dihasilkan dari direquest yang

dilakukan. Misalkan, jika file yang direquest ke server tidak ditemukan maka

status akan berisi 404.

6. statusText

Properti ini merupakan textual dari properti status, misal status sama dengan

404 maka statusText akan sama dengan Not Found.

Kemampuan AJAX

Berikut ini adalah beberapa contoh kemampuan dari ajax :

1. AutoComplete atau AutoSuggest

Penjelasanya lebih lanjut adalah ketika user sedang mengisi data di sebuah

form, karakter yang sedang dituliskan oleh user akan bisa langsung dilengkapi

oleh data-data yang disarankan (suggestion). Contoh yang paling akrab adalah

gambar di atas yaitu form Google (Google Suggest) di mana ketika menuliskan

satu kalimat yang belum utuh, maka secara otomatis akan tersedia daftar data-

data yang menyambungkan kalimat tersebut secara utuh, sehingga tidak perlu

lagi menuliskan semua kata yang ingin dicari.

Gambar 3 Contoh Penggunaan Teknologi Ajax

2. Real Time Validation

Selain validasi terhadap data berupa email, pencoccokan password, umur (harus

angka), dan lain-lain. Contoh lain adalah pengecekan username sudah ada yang

memakai merupakan salah satu validasi yang dilakukan dengan segera atau real

time. Hal ini sangat berguna pada kondisi yang tidak memungkinkan pengiriman

keseluruhan data ke client yang dibutuhkan untuk melakukan validasi ketika

halaman di load di awal mula.

3. Load on demand

Berdasarkan event tertentu, sebuah halaman HTML bisa mengambik tambahan

data di belakang layar, sehingga memungkinkan browermenampilkan halaman

web secara lebih cepat dan bisa diatur kapan penampilannya.

4. Refresh data dan server push

Halaman web dapat mengambil data dari server tertentu untuk menampilkan

informasi terkini, misalknya nilai tukar, dolar, stok, ramalan cuaca, dan

sebagainya. Kemampuan ini memungkinkan halaman web melihat informasi

terkini tanpa harus merefresh atau reload halaman web.

5. Partial Submit

Halaman web dapat melakukan submit atau pengiriman sebagian form terlebih

dahulu, tanpa meminta halaman web untuk merefreshnya terlebih dahulu.

6. Mashup (Mencampur data)

Halaman web dapat menampilkan data menggunakan berbagai media seperti

proxy server side ataupun menggunakan skrip eksternal. Dengan demikian,

teman-teman dapat menggunakan berbagai data untuk aplikasi teman-teman.

Misalnya menggabungkan nilai tukar menukar dolar ke rupiah dengan halaman

web e-comerce.

7. Membuat Chat Online

Chat online dapat dibuat dengan sederhana yang tidak memerlukan library

eksternal seperti Java Runtime Machine atau Flash.

8. Mendayagunakan teknologi

Misalnya pembuatan garafik secara real time menggunakan Scalable Vector

Graphics (SVG) atau membuat daftar yang bisa di drag and drop.

9. Pembuatan data grid

Data grid yang responsive untuk mengupdate database server-sever secara on

the fly.

10. Membuat aplikasi yang membutuhkan update

Update di sini berarti secara real time dari berbagai sumber eksternal misalnya

RSS. Contoh nya yang paling sering ditemui adalah Timeline Twitter, Facebook

Wall (Timeline), Google Plus Wall.

Contoh Implementasi Ajax

Berikut ini adalah contoh sederhana dari penggunaan teknologi Ajax.

Gambar 4 Implementasi Ajax (With Debuging)

Pada keadaan awal halaman hanya berisi page kosong dengan isi 1 Tombol. Ketika user

menekan tombol Proses, maka client mengirimkan request (XHR) ke server kemudian

menampilkan response dari server tanpa merefresh halaman.

Untuk Implementasi, diperlukan 3 buah file dengan code sebagai berikut :

1. Ajax.js

2. proses.php

3. Index.html

JQuery Ajax

Seperti dikatakan sebelumnya AJAX (Asynchronous JavaScript and XML) adalah sebuah

teknik pemrograman yang memungkinkan kita melakukan pertukaran data antara client

dengan server secara asynchronous, yang artinya komunikasi terjadi di belakang layar

sehingga halaman web tidak harus dimuat ulang hanya untuk mengganti sebagian dari

isinya.

Sebelum era jQuery, pemrograman AJAX sangat sulit dilakukan, karena berhubungan

dengan pengaksesan DOM menggunakan JavaScript. Dengan jQuery, pemrograman

menggunakan teknik AJAX bisa menjadi lebih mudah dan cepat.

Sementara yang dimaksud Jquery adalah komponen/librari/framework yang dibuat dari

javascript dengan tujuan memudahkan seorang programmer dalam menggunakan

fungsi-fungsi yang lebih rumit. Dengan jquery, seorang programmer bisa lebih leluasa

dan mudah melakukan kontrol/manipulasi halaman web. Oleh karena kemudahan

tersebut jquery memiliki semboyan "write less, do more" yang bisa kita artikan dengan

sedikit menulis kode tapi dapat melakukan banyak hal.

Dengan library ini, seorang developer tidak perlu lagi menuliskan javascript ajax secara

traditional dan panjang lebar, karena didalam jquery sudah include dengan ajax,

sehingga dapat melakukan operasi-operasi yang dapat dilakukan oleh ajax native,

bahkan lebih.

Jika dilihat contoh sederhana perbandingan antara Javascript dengan jQuery:

Gambar 5 Perbandingan Javascript dan jQuery

Terlihat pada potongan sintak diatas untuk melakukan sebuah manipulasi background

dokumen html, ternyata penggunakaan jQuery lebih singkat. Tentu saja ini sama ketika

menggunakan teknologi ajax, sehingga seseorang tidak lagi harus membuat object

XMLHTTPRequest, melainkan tinggal menggunakan.

Kesimpulan

Dengan menggunakan teknologi Ajax. Saat ini web developer dimudahkan untuk

membangun sebuah aplikasi berbasis website agar lebih interaktif, dan mampu

menyediakan aplikasi dengan data RealTime tanpa harus me-reload sebuah halaman

terus menerus.