Pengenalan Teknologi ajax

925 views

Published on

AJAX merupakan teknik baru di dunia pengembanan halaman web yang berguna untuk membuat aplikasi web, yang lebih “kaya” dibandingkan dengan aplikasi web biasa.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
925
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
44
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Pengenalan Teknologi ajax

  1. 1. [Pick the date] PENGENALAN AJAX Asynchronous JavaScript and XMLHTTP (AJAX) | Julia
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.

×