AJAX. Pemrograman Web. Rajif Agung Yunmar, S.Kom

Ukuran: px

Mulai penontonan dengan halaman:

Download "AJAX. Pemrograman Web. Rajif Agung Yunmar, S.Kom"

Iwan Sutedja
6 tahun lalu
Tontonan:

1 AJAX Pemrograman Web Rajif Agung Yunmar, S.Kom

2 Synchronous Metode request HTTP yang sering digunakan dengan cara ini adalah metode POST dan GET. Pada saat client mengirimkan request terhadap server, client akan menunggu sampai proses yang diminta selesai dikerjakan, kemudian server akan mengembalikan hasil proses tersebut kepada client.

3 Synchronous waktu web server request respon client web browser menunggu client web browser

4 AJAX Singkatan dari Asynchronous JavaScript And XML. Bukanlah bahasa pemrograman, melainkan suatu teknik yang digunakan untuk membuat aplikasi website menjadi lebih interaktif.

5 Asynchronous Sebagian besar interaksi dan pertukaran data dilakukan dibelakang layar. Halaman web tidak harus selalu dimuat ulang secara keseluruhan setiap kali pengguna melakukan perubahan. Meningkatkan interaktifitas, kecepatan dan usability.

6 Asynchronous web server client web browser

7 AJAX Component XMLHttpRequest Object. DOM (Document Object Model). XML. JSON dapat menjadi pilihan alternatif sebagai dokumen transfer, mengingat JSON adalah bagian dari JavaScript, sehingga pengolahannya akan lebih mudah.

8 XMLHttpRequest Sebuah object JavaScript yang digunakan untuk menangani request browser kepada web server tanpa perlu melakukan reload (background request) terhadap halaman web.

9 XMLHttpRequest Sebagian besar web browser mendefinisikan XMLHttpRequest sebagai JavaScript object. Internet Explorer mendefinisikan object ini sebagai ActiveX Control.

10 Creating XMLHttpRequest Object General Browser xmlhttp = new XMLHttpRequest(); Internet Explorer 7 Above xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); Internet Explorer 6 Below xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

11 XMLHttpRequest Example function createxmlhttpobject(){ var xmlhttp = false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!= 'undefined'){ xmlhttp = new XMLHttpRequest(); } if(!xmlhttp){ alert("terjadi kesalahan saat pembuatan XMLHttpRequest object!"); } else { alert("xmlhttprequest berhasil dibuat."); } } return xmlhttp;

12 XMLHttpRequest Example <html> <head> <title>pembuatan Object XMLHttpRequest</title> <script language="javascript" src="09.latihan_01.js"></script> <head> <body onload="createxmlhttpobject();"> Halaman ini memanggil fungsi createxmlhttpobject() yang berguna untuk membuat object XMLHttpRequest. </body> </html>

13 XMLHttpRequest Method Me tode open() send() abort() Deskripsi Melakukan komunikasi dengan server Mengirimkan request Membatalkan request

14 readystate - XMLHttpRequest Property Digunakan untuk mengetahui status perubahan dari request yang dikirimkan ke web server. Properti ini diubah melalui event onreadystatechange.

15 readystate XMLHttpRequest Property Status Deskripsi 0 Uninitialized. Belum diinisialisasi. Koneksi belum terbentuk. 1 Loading. Metode open() berhasil dijalankan. 2 Loaded. Koneksi terbentuk dan response header telah diterima. 3 Interactive. Respon dari server dalam bentuk data sedang didownload. 4 Completed. Data selesai didownload.

16 Status XMLHttpRequest Property Kode Deskripsi 200 OK. Dokumen atau file ditemukan dan dapat diakses. 304 Not Modified. Mengindikasikan bahwa salinan dokumen yang terdapat pada cache web browser sama persis (tidak ada yang berubah) dengan dokumen yang ada di web server. 401 Unauthorized. Dibutuhkan authorisasi khusus untuk mengakses dokumen. 403 Forbidden. User tidak memiliki hak untuk mengakses dokumen yang diminta. 404 Not Found. Dokumen atau file yang dimaksud tidak ditemukan. 500 Internal Service Error. Terdapat kesalah teknis didalam server. 503 Service Unavailable. Jenis layanan yang diinginkan tidak dikenali. Juga seringkali digunakan untuk memberitahu bahwa server dalam tahap maintenance atau overloaded service.

17 statustext XMLHttpRequest Property Sama halnya seperti properti status, properti statustext digunakan untuk menyatakan response status dari server. Status yang diberikan dalam bentuk keterangan. Misalnya: respon 404 akan disampaikan dalam bentuk "Not Found", 403 dalam bentuk "Forbidden" dan seterusnya.

18 responsetext XMLHttpRequest Property Properti ini berisi data yang merupakan hasil komunikasi / respon request dari server dalam format plaint text (teks murni).

19 responsexml XMLHttpRequest Property Properti ini berisi data yang merupakan hasil komunikasi / respon request dari server dalam format XML.

20 onreadystatechange - XMLHttpRequest Event Digunakan untuk mengetahui status dari request yang telah dikirimkan. Ketika terjadi perubahan pada status request, event ini akan dijalankan dan mengupdate nilai dari property readystate yang terdapat pada object XMLHttpRequest.

21 onreadystatechange - XMLHttpRequest Event Ketika metode open() berhasil dijalankan, nilai dari properti readystate akan diubah menjadi 1. Ketika metode send() berhasil dijalankan dan response header telah diterima, nilai dari properti readystate akan diubah menjadi 2 Ketika browser mendapat perintah dari server untuk memulai memuat data yang diinginkan, event onreadystatechange akan mengubah nilai dari properti readystate menjadi 3. Ketika data yang diinginkan telah berhasil didownload dengan lengkap, event onreadystatechange akan mengubah nilai dari properti readystate menjadi 4.

22 Object innerhtml Object innerhtml merupakan turunan dari object document. innerhtml berisi content dari element HTML, yaitu nilai / value yang terletak diatara tag pembuka dan tag penutup. Contoh: <div id="divcontent">innerhtml disini</div> <span id="element_2">innerhtml disini</span>

23 Object innerhtml Untuk dapat mengambil atau mengubah data secara on the fly (tanpa melakukan reload) pada sebuah element HTML, diperlukan sebuah pengenal yang melekat pada element tersebut. Pengenal ini dapat didefinisikan melalui atribut ID.

24 Object innerhtml Example <html> <head> <title>object innerhtml</title> <script language="javascript"> function ubahinnerhtml(){ document.getelementbyid("divcontent").innerhtml = "Sesuatu"; } </script> <head> <body> <div id="divcontent"> innerhtml adalah sebuah turunan dari object document. </div> <a href="#" onclick="ubahinnerhtml();">ubah content element DIV</a> </body> </html>

25 XMLHttpRequest Implementation Lihat contoh pada Modul Praktikum AJAX halaman 9-10.

26 XML XML merupakan singkatan dari extensible Markup Language. Seperti halnya HTML, XML tersusun dari element-element. Element-element ini terdiri dari dari tag pembuka dan tag penutup serta mempunyai ID dan atribut.

27 HTML vs XML HTML Element penyusunnya sudah terstandarisasi. XML Memungkinkan element-element XML dideklarasikan dengan lebih fleksibel. Dengan begitu, setiap orang dapat menentukan element yang akan dibuat sesuai keinginannya.

28 DOM DOM adalah singkatan dari Data Object Model. Merupakan cara pandang JavaScript didalam melihat struktur data dari dokumen markup yang terdiri dari tag, ID dan atribut.

29 DOM <html> <head> <title>website title</title> <head> <body> <div>data didalam body</div> </body> </html> html head body title div Website title Data didalam body

30 DOM Function Fungsi getelementsbytagname getelementbyid getattribute Keterangan Membaca data berdasarkan nama element Membaca data berdasarkan ID element Membaca data berdasarkan atribut element

31 DOM Object Object firstchild last Child Keterangan Membaca node array pertama dari data element yang dibaca Membaca node array terakhir dari data element yang dibaca

32 DOM Property Property data innerhtml Keterangan Membaca content da ri element yang dimaksud Membaca atau menulis data dari element HTML yang dimaksud. Object ini berbeda dengan object data sebelumnya, karena properti innerhtml tidak hanya berupa content saja tapi juga berisi element-element XML lainnya

33 Dynamic Data Operation Lihat contoh pada Modul Praktikum AJAX halaman

34 Any Question?

dokumen-dokumen yang mirip

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

AJAX. Pemrograman Web 1. Asynchronous JavaScript and XML. Genap AJAX Asynchronous JavaScript and XML Pemrograman Web 1 Genap 2011-2012 AJAX - Intro AJAX = Asynchornous JavaScript And XML Diperkanalkan oleh Jesse James Garret pada tahun 2005. AJAX bukan bahasa pemrograman