Dokumen ini menjelaskan tentang AJAX, yaitu teknik pemrograman untuk menciptakan aplikasi web interaktif yang memungkinkan pembaruan data tanpa merefresh halaman. AJAX menggabungkan XMLHTTPRequest untuk mengakses server secara asynchronous, meningkatkan responsivitas aplikasi web. Selain manfaat, juga ada kerugian seperti ketergantungan pada JavaScript dan kerentanan terhadap serangan hacker.

1. [Pick the date]
PENGENALAN AJAX
Asynchronous JavaScript and XMLHTTP (AJAX) | Julia

2. 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

3. 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

4. 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 bagianbagian 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

5. 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.

6. 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)

7. 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 browserbrowser besar. Safari mengimplementasikan pada February 2004 (safari 1.2),
Konqueror, Opera 8.0 pada April 2005. Pada tahun 2006 World Wide Web Consortium

8. (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,

9. 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 mentrigger 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

10. 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 datadata yang menyambungkan kalimat tersebut secara utuh, sehingga tidak perlu
lagi menuliskan semua kata yang ingin dicari.
Gambar 1 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

11. 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

12. 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

13. 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.

14. 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.

15. 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.