09.ajax - teori - elearning.amikom.ac.idelearning.amikom.ac.id/index.php/download/materi/...metode...
TRANSCRIPT
AJAXPemrograman Web
Rajif Agung Yunmar, S.Kom
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.
Synchronous
client web browser client web browser
web server
menunggu
waktu
req
ue
st
resp
on
AJAX
● Singkatan dari Asynchronous JavaScript And XML.
● Bukanlah bahasa pemrograman, melainkan suatu teknik yang digunakan untuk membuat aplikasi website menjadi lebih interaktif.
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.
Asynchronous
client web browser
web server
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.
XMLHttpRequest
● Sebuah object JavaScript yang digunakan untuk menangani request browser kepada web server tanpa perlu melakukan reload (background request) terhadap halaman web.
XMLHttpRequest
● Sebagian besar web browser mendefinisikan XMLHttpRequest sebagai JavaScript object.
● Internet Explorer mendefinisikan object ini sebagai ActiveX Control.
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");
XMLHttpRequest Examplefunction 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;}
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>
XMLHttpRequest Method Me tode Deskripsi
open() Melakukan komunikasi dengan serversend() Mengirimkan requestabort() Membatalkan request
readyState - XMLHttpRequest Property
● Digunakan untuk mengetahui status perubahan dari request yang dikirimkan ke web server.
● Properti ini diubah melalui event onreadystatechange.
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.
Status – XMLHttpRequest PropertyKode 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.
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.
responseText – XMLHttpRequest Property
● Properti ini berisi data yang merupakan hasil komunikasi / respon request dari server dalam format plaint text (teks murni).
responseXML – XMLHttpRequest Property
● Properti ini berisi data yang merupakan hasil
komunikasi / respon request dari server dalam
format XML.
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.
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.
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>
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.
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>
XMLHttpRequest Implementation
● Lihat contoh pada Modul Praktikum AJAX halaman 9-10.
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.
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.
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.
DOM<html> <head> <title>Website title</title> <head> <body> <div>Data didalam body</div> </body></html>
head body
title div
Website title Data didalam body
html
DOM Function
Fungsi Keterangan
getElementsByTagName Membaca data berdasarkan nama element
getElementById Membaca data berdasarkan ID element
getAttribute Membaca data berdasarkan atribut element
DOM Object
Object KeteranganfirstChild Membaca node array pertama dari data element yang
dibaca
last Child Membaca node array terakhir dari data element yang dibaca
DOM Property
Property Keterangan
data Membaca content da ri element yang dimaksud
innerHTML 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
Dynamic Data Operation
● Lihat contoh pada Modul Praktikum AJAX halaman 16-21.
Any Question?