AJAX. Pemrograman Web 1. Asynchronous JavaScript and XML. Genap

Transkripsi

1 AJAX Asynchronous JavaScript and XML Pemrograman Web 1 Genap

2 AJAX - Intro AJAX = Asynchornous JavaScript And XML Diperkanalkan oleh Jesse James Garret pada tahun 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.

3 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

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

5 AJAX - Intro Kombinasi standar web yang digunakan pada teknologi AJAX : XMLHTTPRequest object Untuk pertukaran data secara asinkron dengan server. JavaScript / DOM Untuk interaksi atau menampilkan informasi ke halaman. CSS Untuk merubah style dari data. XML Sering digunakan sebagai format untuk transfer data antara server dengan client.

6 Synchronous Proses synchronous yang telah lama digunakan pada pengembangan web. W A K T U Server Server send request server respon send request server respon Client web browser Client web browser Client web browser menunggu menunggu Interaksi respon dari Interaksi respon dari Interaksi server server

7 Asynchronous Pemanfaatan teknik Asynchronous dengan JavaScript pada pengembangan Web lebih dikenal dengan istilah Web 2.0 Proses komunikasi dengan server dilakukan secara background. W A K T U Server Server send request server respon send request server respon Client web browser Interaksi

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

9 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 Header User-Agent : Mozilla; Content-Length: 221 Empty Line Ruang kosong (ENTER), harus ada jika hendak menyisipkan Optional Message Optional Message Body Parameter tambahan yang dikirimkan ke server. Biasanya digunakan pada form dengan metode POST.

10 HTTP Request Contoh HTTP Request, method POST

11 HTTP Response Respon yang diberikan server terhadap permintaan client. Contoh Baris pertama menyatakaan HTTP/ OK, menginformasikan bahwa request dari client sukses dieksekusi server.

12 HTTP Request Macam macam HTTP Request HEAD Meminta respon server terhadap request metode GET. GET Request terhadap file tertentu. POST Mengirim data ke server untuk diproses. PUT Upload ke server DELETE Menghapus resource tertentu di server

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

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

15 XML Struktur XML :

16 XML Contoh file XML root child sub child

17 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");

18 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( );

19 AJAX Respon dari Server Untuk dapat menerima respon dari server, dapat menggunakan salah satu fungsi dari objek XMLHttpRequest. x.responsetext x.responsexml Fungsi 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;

20 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 x.status 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

21 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( );

22 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

23 Contoh 1 AJAX responsetext style.css

24 Contoh 1 AJAX responsetext home.html

25 Contoh 1 AJAX responsetext ajax.js

26 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

27 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

28 Contoh 2 AJAX responsexml katalog.xml

29 Contoh 2 AJAX responsexml ajax.js

30 Contoh 2 AJAX responsexml katalog.html

31 TERIMA KASIH Pertemuan berikutnya membahas AJAX Framework