Está en la página 1de 31

Asynchronous JavaScript and XML

AJAX

Pemrograman Web 1
Genap 2011 - 2012

Candra Utama

Digitally signed by Candra Utama DN: cn=Candra Utama, o, ou, email=kuliah@candrautama.com, c=ID Date: 2012.05.18 15:49:37 +07'00'

AJAX - Intro

AJAX = Asynchornous JavaScript And XML Diperkanalkan oleh Jesse James Garret pada tahun 2005. AJAX bukan bahasa pemrograman baru, tapi teknik baru dalam penggunaan standar yang telah ada. AJAX berbasiskan pada JavaScript dan HTTP Request. Dengan AJAX, akses data ke server yang dikirim oleh client atau sebaliknya menjadi lebih cepat dibandingkan mekanisme biasa. Dengan AJAX tidak perlu melakukan proses loading seluruh halaman, hanya bagian tertentu saja yang diinginkan.
Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

AJAX - Intro

AJAX dapat diintegrasikan dengan server side scripting seperti PHP, ASP, JSP. Contoh beberapa web yang menerapkan teknologi AJAX :

Google ( Google Suggest, Google Map, Gmail ) Yahoo Flickr.com Twitter Facebook Youtube

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Keunggulan Penggunaan AJAX


Aplikasi web menjadi lebih interaktif dibanding dengan web konvensional. Update data tidak perlu me-reload keseluruhan halaman, melainkan hanya yang dibutuhkan saja.

Aplikasi web menjadi lebih cepat dibanding dengan web konvensional. Komunikasi data dengan server dilakukan di-background.

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

AJAX - Intro

Kombinasi standar web yang digunakan pada teknologi AJAX :

XMLHTTPRequest object

Untuk pertukaran data secara asinkron dengan server. Untuk interaksi atau menampilkan informasi ke halaman. Untuk merubah style dari data. Sering digunakan sebagai format untuk transfer data antara server dengan client.

JavaScript / DOM

CSS

XML

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Synchronous

Proses synchronous yang telah lama digunakan pada pengembangan web.


WAKTU

Server server respon send request send request

Server server respon

Client web browser Interaksi menunggu respon dari server

Client web browser Interaksi menunggu respon dari server

Client web browser Interaksi

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Asynchronous

Pemanfaatan teknik Asynchronous dengan JavaScript pada pengembangan Web lebih dikenal dengan istilah Web 2.0 Proses komunikasi dengan server dilakukan secara background.
WAKTU

Server server respon send request send request

Server server respon

Client web browser Interaksi

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Mekanisme AJAX

Proses berawal dari web browser client. Client me-request sebuah halaman ke server (HTML, PHP, ASP) melalui JavaScript.

Server akan memproses request tersebut. Server mengirimkan respon dalam bentuk XML atau HTML, kemudian dikirim kembali ke browser client untuk diolah oleh JavaScript.

Hasil olahan JavaScript tersebut akan ditampilkan di browser tanpa harus mereload halaman web.

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

HTTP Request

HTTP Request, permintaan client (browser, telnet, dll) yang dikirimkan ke server untuk diolah di server. Komponen-komponen utama HTTP Request

Request Line

Contoh: GET /images/logo.gif HTTP/1.1 Request untuk mengambil /images/logo.gif dari sever User-Agent : Mozilla; Content-Length: 221 Ruang kosong (ENTER), harus ada jika hendak menyisipkan Optional Message Parameter tambahan yang dikirimkan ke server. Biasanya digunakan pada form dengan metode POST.
Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Header

Empty Line

Optional Message Body

HTTP Request

Contoh HTTP Request, method POST

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

HTTP Response

Respon yang diberikan server terhadap permintaan client. Contoh

Baris pertama menyatakaan HTTP/1.1 200 OK, menginformasikan bahwa request dari client sukses dieksekusi server.

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

HTTP Request

Macam macam HTTP Request

HEAD

Meminta respon server terhadap request metode GET. Request terhadap file tertentu. Mengirim data ke server untuk diproses. Upload ke server Menghapus resource tertentu di server

GET

POST

PUT

DELETE

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

HTTP Request

TRACE

Menampilkan status request dari client yang diterima server. Menginformasikan metode HTTP yang disupport oleh server. Merubah koneksi ke Transparent TCP/IP tunnel. Biasa digunakan untuk komunikasi yang dienkripsi. Melakukan perubahan terhadap suatu resource di server.

OPTIONS

CONNECT

PATCH

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

XML

XML = eXtensible Markup Language. Didisain untuk transfer, simpan, dan membuat struktur data. Terdiri atas tag-tag yang ditentukan sendiri oleh pembuat. XML hanya text biasa, yang dapat dibuka oleh semua text editor. Biasanya digunakan untuk pertukaran data antar aplikasi, antar platform

Web based desktop based, atau sebaliknya. Antar web server. Antar aplikasi desktop based.

Sangat disarankan oleh W3C Contoh penggunaan : RSS Feed.

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

XML

Struktur XML :

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

XML

Contoh file XML


root child

sub child

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

AJAX - XMLHttpRequest

XMLHttpRequest, adalah sebuah objek JavaScript yang digunakan untuk pertukaran data dengan server secara background. Cara instansiasi objek :

Browser versi baru (IE7+, Firefox, Chrome, Safari, Opera)


var xmlHttp = new XMLHttpRequest();

Browser versi lama (IE5 dan IE6)


var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

AJAX Kirim Request ke Server


Fungsi x.open(method, url, async) Deskripsi Menspesifikasikan tipe request, URL yang dituju, dan proses yang digunakan (Asynchronous, atau Synchronous method : GET atau POST url : resource yang dituju ( image, file xml, file html, file php, dll ) async : true (asynchronous), false (synchronous x.send(string) Mengirimkan data ke server. Hanya digunakan jika menggunakan method POST.

Contoh
var xmlHttp = new XMLHttpRequest(); xmlHttp.open(GET,profile.html,true); xmlHttp.send();

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

AJAX Respon dari Server

Untuk dapat menerima respon dari server, dapat menggunakan salah satu fungsi dari objek XMLHttpRequest.
Fungsi x.responseText x.responseXML Deskripsi Mengambil respon dari server yang berupa text. (HTML, JavaScript, txt). Mengambil respon dari server yang berupa XML.

Contoh
var xmlHttp = new XMLHttpRequest(); xmlHttp.open(GET,profile.html,true); xmlHttp.send(); respon = xmlHttp.responseText; document.getElementById(page).innerHTML = respon;

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

AJAX onReadyStateChange Event


Dipakai jika ingin ada suatu aksi yang dilakukan JavaScript ketika menerima respon dari server. Event onReadyStateChange akan tereksekusi setiap saat perubahan nilai readyState. readyState menyimpan status hasil dari XMLHttpRequest.
Fungsi x.onreadystatechange x.readyState Deskripsi Harus diisi dengan nama fungsi atau fungsi yang akan dipanggil otomatis setiap kali terjadi perubahan nilai readyState. Berisi status hasil XMLHttpRequest. 0 : belum ada request. 1 : koneksi ke server sudah terbentuk. 2 : request sudah diterima oleh server. 3 : request sedang diproses oleh server. 4 : respon dari server sudah diterima. 200 : OK 404 : Page not found
Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

x.Status

AJAX onReadyStateChange Event

Contoh
var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState==4 && xmlHttp.status==200) { respon = xmlHttp.responseText; document.getElementById(page).innerHTML = respon; } } xmlHttp.open(GET,profile.html,true); xmlHttp.send();

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Contoh 1 AJAX responseText

Persiapan

Install web server di komputer. (Apache atau XAMPP) Buat folder contoh1 di xampp/htdocs Simpan file-file latihan berikut di folder : htdocs/contoh1/

Hasil

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Contoh 1 AJAX responseText

style.css

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Contoh 1 AJAX responseText

home.html

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Contoh 1 AJAX responseText

ajax.js

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Contoh 1 AJAX responseText

Sisipkan file berikut di home.html


style.css ajax.js

Buat 3 halaman lain, yang diberi nama


profile.html product.html customer.html

Buka file home.html di browser dengan mengetikkan

http://localhost/contoh1/home.html

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Contoh 2 AJAX responseXML

Persiapan

Buat folder contoh2 di xampp/htdocs Simpan file-file latihan berikut di folder : htdocs/contoh2/

Web pada contoh 2 ini akan me-load file XML, kemudian ditampilkan ke halaman. Hasil

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Contoh 2 AJAX responseXML

katalog.xml

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Contoh 2 AJAX responseXML

ajax.js

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

Contoh 2 AJAX responseXML

katalog.html

Tim Dosen Pemrograman Web 1 2011-2012. Teknik Informatika UNPAS

TERIMA KASIH
Pertemuan berikutnya membahas AJAX Framework