SlideShare ist ein Scribd-Unternehmen logo
1 von 21
Downloaden Sie, um offline zu lesen
AJAX ENABLE RICH INTERNET APPLICATION,[object Object],Alqod Elian		5106100033,[object Object], Edo Amri W.	 5106100050,[object Object],Sujono 	 	5106100055,[object Object]
AJAX merupakan paduan dari beberapa teknologi yang sudah dikenal sebalumnya yaitu HTML, DOM, XML, Javascript dan teknologi pendukung lainnya.,[object Object],AJAX adalah akronim dari Asynchronous JavaScript and XML,[object Object]
Komponen-komponen AJAX meliputi: ,[object Object],HTML (HyperText Markup Language),[object Object],XHTML (Extensible HyperText Markup Language),[object Object],CSS (Cascading Style Sheets ),[object Object],JavaScript,[object Object],DOM (Document Object Model),[object Object],XML (Extensible Markup Language),[object Object],XSLT (Extensible StylesheetLanguage Transformations ),[object Object],Objek XMLHttpRequest,[object Object],JSON (JavaScript Object Notation),[object Object]
Teknik yang umum digunakan untuk implementasi AJAX adalah dengan menggunakan:,[object Object],Hidden Frame,[object Object],		 Metode ini memanfaatkan frame  yang tersembunyi. ,[object Object],Hidden IFrame,[object Object],		 Metode ini hampir sama dengan hidden frame, perbedaannya hanya pada elemen yang digunakan yaitu IFrame, bukan Frame. ,[object Object],Objek XMLHttpRequest,[object Object],		 Metode yang satu ini memanfaatkan ActiveX Objek (IE) atau objek javascript XMLHttpRequest (Mozilla/Firefox, Safari, Opera).,[object Object]
Teknik pemprosesan halaman secara umum ada dua:,[object Object],Pemprosesan halam dengan pembuatan/manipulasi objek dokumen menggunakan javascript.,[object Object],Parsial rendering.,[object Object]
Dua keistimewaan Ajax adalah dapat:,[object Object],Membuat permintaan kepada server tanpa memuat kembali (reload) halaman.,[object Object],Mengurai (parse) dan bekerja dengan dokumen XML dan atau JSON.,[object Object]
Penggunaan Dasar,[object Object],1. MembuatPermintaan HTTP (HTTP Request),[object Object],	Untuk membuat permintaan HTTP kepada server menggunakan JavaScript, diperlukan sebuah class yang menyediakan fungsi-fungsi ini. Pada Internet Explorer tersedia objek ActiveX yang disebut XMLHTTP. Pada Mozilla, Safari, Opera dan beberapa peramban lain, menerapkan sebuah class Javascript objek XMLHttpRequest yang mendukung method dan properties objek Microsoft ActiveX. ,[object Object],	Untuk membuat instance (objek) class lintas-browser (cross-browser), dapat dilakukan dengan: ,[object Object],if (window.XMLHttpRequest) { // Mozilla, Safari, ...,[object Object],		 http_request = new XMLHttpRequest (); ,[object Object],	} else if (window.ActiveXObject) { // IE ,[object Object],		http_request = new ActiveXObject("Microsoft.XMLHTTP");,[object Object],	},[object Object],	Catatan: kode di atas hanya sebagai ilustrasi saja. Kode tersebut merupakan versi paling sederhana untuk membuat instance XMLHttp. Untuk penggunaan secara nyata dapat lihat di bagian 3 artikel ini. ,[object Object]
Beberapa versi browser Mozilla tidak bekerja dengan baik jika respon dari server tidak mengandung header mime-type XML. Untuk memenuhi kebutuhan ini, panggil method untuk mengganti/menambahkan header yang dikirim oleh server. ,[object Object],	http_request = new XMLHttpRequest(); ,[object Object],	http_request overrideMimeType('text/xml');,[object Object],Setelah itu, buat fungsi untuk mengolah setelah data diterima dari server berdasarkan permintaan yang dibuat sebelumnya. Tahap ini, daftarkan fungsi JavaScript yang menangani respon dari server. Setting properties onreadystatechange objek dengan nama fungsi Javascript yang disiapkan untuk mengerjakan proses respon. ,[object Object],	http_request.onreadystatechange = namaFungsi;,[object Object],Perlu dicatat bahwa tidak ada tanda kurung setelah nama fungsi dan tanpa parameter yang dilewatkan. Selain memberikan nama fungsi, dapat juga digunakan teknik JavaScript dalam pendefinisian fungsi (tanpa nama) saat program berjalan (run-time) -- yang disebut fungsi anonymous -- dan mendefinisikan tindakan untuk melakukan proses, seperti berikut: ,[object Object],http_request.onreadystatechange = function() { ,[object Object],// do the thing,[object Object],};,[object Object]
	Selanjutnya, setelah deklarasi dan segera setelah menerima respon, kemudian buat permintaan. Panggilmethod open() dan send() dari klas permintaan HTTP seperti kode berikut: ,[object Object],http_request.open('GET', 'http://www.example.org/somefile', true); http_request.send(null);,[object Object],Parameter panggil pertama dari open() adalah method permintaan HTTP GET, POST, HEAD atau method lain yang didukung oleh server. Gunakan huruf kapital sebagaimana standar HTTP. ,[object Object],Parameter kedua adalah URL dari halaman yang diminta. Demi keamanan, panggilan tidak dapat dilakukan pada halaman domain pihak ketiga. Pastikan untuk menggunakan nama domain yang pasti pada semua halaman jika tidak ingin mendapat error 'permision denied' ketika melakukan panggilan open(). ,[object Object],Parameter ketiga diset ketika permintaan adalah asinkron. Jika diset TRUE, eksekusi fungsi JavaScript akan berlanjut walau tanggapan dari peladen belum sampai. Ini adalah A dalam AJAX. ,[object Object]
	Parameter untuk method send() dapat berupa sembarang data untuk dikirim ke server saat mengirimkan permintaan POST. Data harus dalam format query string, seperti: ,[object Object],name=value&anothername=othervalue&so=on,[object Object],	Catatan bahwa jika ingin mengirim (POST) data, ganti tipe MIME permintaan menggunakan bari berikut: ,[object Object],http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); ,[object Object],	Bila tidak, server akan mengabaikan data yang dikirim. ,[object Object]
2. Penanganan Respon Server,[object Object],	Ingat bahwa ketika permintaan dikirim, fungsi JavaScript harus telah disediakan untuk menangani respon. ,[object Object],http_request.onreadystatechange = namaFungsi;,[object Object],	 Apa yang seharusnya dikerjakan oleh fungsi ini. Pertama, fungsi untuk memeriksa status tanggapan. Jika status memiliki nilai 4, berarti bahwa seluruh tanggapan peladen telah diterima dan siap dilanjutkan proses berikutnya. ,[object Object],if (http_request.readyState == 4) { ,[object Object],		// everything is good, the response is received ,[object Object],	} else { ,[object Object],		// still not ready,[object Object],	},[object Object]
Berikut adalah daftar nilai status readyState ,[object Object],0 (tidak diinisialisasi) ,[object Object],1 (dalam proses memuat) ,[object Object],2 (telah dimuat) ,[object Object],3 (interaktif) ,[object Object],4 (lengkap) ,[object Object]
Berikutnya adalah pemeriksaan kode status dari respon HTTP server. Pada contoh kali ini hanya digunakan status 200 yaitu respon OK. ,[object Object],if (httpRequest.status == 200) { ,[object Object],		// perfect! ,[object Object],	} else { ,[object Object],		// there was a problem with the request, ,[object Object],		// for example the response may be a 404 (Not Found) ,[object Object],		// or 500 (Internal Server Error) response codes ,[object Object],	},[object Object]
	Setelah semua status permintaan diperiksa dan kode status HTTP telah ada respon, data respon dari server dapat diolah. Terdapat dua pilihan untuk mengakses data. ,[object Object],httpRequest.responseText -- akan mengembalikan respon berupa teks string ,[object Object],httpRequest.responseXML -- akan mengembalikan respon berupa objek XMLDocument object yang dapat diakses dengan fungsi DOM JavaScript ,[object Object]
3. Contoh Sederhana,[object Object],Tulis bagian program menjadi satu permintaan HTTP sederhana. JavaScript akan meminta sebuah dokumen HTML yaitu test.html yang hanya mengandung tulisan "I'm a test" dan kemudian memanggil alert()dengan isi dari berkas test.html ,[object Object]
<script type="text/javascript" language="javascript"> ,[object Object],var http_request = false; ,[object Object],function makeRequest(url) { ,[object Object],	http_request = false ; ,[object Object],	if (window.XMLHttpRequest) { // Mozilla, Safari ,... ,[object Object],		http_request = new XMLHttpRequest(); ,[object Object],		if (http_request.overrideMimeType) { 				    http_request.overrideMimeType('text/xml'); ,[object Object],		    // See note below about this line ,[object Object],		} ,[object Object],	} else if (window.ActiveXObject) { // IE ,[object Object],	    	var aVersions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "Microsoft.XMLHTTP" ]; ,[object Object],	    	for (var i = 0; i < aVersions.length; i++) { ,[object Object],		    try { http_request = new ActiveXObject(aVersions[i]); 			        break; ,[object Object],		    } ,[object Object],		    catch (e) ,[object Object],		    { ,[object Object],		    // Do nothing ,[object Object],		    } ,[object Object],		} ,[object Object],	} ,[object Object],	if (!http_request) { ,[object Object],		alert ('Giving up :( Cannot create an XMLHTTP instance'); ,[object Object],		return false; ,[object Object],	} ,[object Object],	http_request.onreadystatechange = alertContents; ,[object Object],	http_request.open('GET', url, true); ,[object Object],	http_request.send(null); ,[object Object],} ,[object Object],	function alertContents() { ,[object Object],	if (http_request.readyState == 4) { ,[object Object],	    if (http_request.status == 200) { ,[object Object],	        alert(http_request.responseText); ,[object Object],	    } else { ,[object Object],	        alert('There was a problem with the request.'); ,[object Object],	    } ,[object Object],             } ,[object Object],} ,[object Object],</script> ,[object Object],<span style="cursor: pointer; text-decoration: underline" onclick ="makeRequest('test.html')">Make a request ,[object Object],</span > ,[object Object]
Pada contoh di atas: ,[object Object],Ketika pengguna menekan klik pada link &quote;Make a request&quote; maka fungsi makeRequent dipanggil dengan parameter nama file HTML test.html dalam direktori yang sama. ,[object Object],Permintaan dibuat dan kemudian event onreadystatechange melakukan eksekusi alertContents() ,[object Object],alertContents()memeriksa jika tanggapan telah diterima dalam keadaan baik dan kemudian tampilkan isi berkas test.html menggunakan fungsi alert(),[object Object]
4. Bekerja dengan Respon XML,[object Object],Sekarang, coba gunakan sifat responseXML Buat dokumen XML yang valid dengan nama test.xml seperti contoh di bawah: ,[object Object],<?xml version ="1.0" ?> ,[object Object],<root> ,[object Object],I'm a test. ,[object Object],</root>,[object Object],Ganti baris permintaan pada script untuk melakukan request dengan:,[object Object],...,[object Object],onclick ="makeRequest('test.xml')">,[object Object],... ,[object Object]
Kemudian pada alertContents()ganti pada baris alert(http_request.responseText);diganti dengan:,[object Object],var xmldoc = http_request.responseXML; ,[object Object],varroot_node = xmldoc.getElementsByTagName('root').item(0); alert(root_node.firstChild.data);,[object Object],Perintah tersebut untuk mengambil objek XMLDocument yang diberikan oleh responseXML dengan menggunakan method DOM untuk mengakses data dalam dokumen XML. ,[object Object]
4. Petukaran data menggunakan JSON,[object Object],Pada contoh berikut akan dijelaskan bagaimana implementasi JSON pada AJAX dibandingkan dengan XML.,[object Object],	Pertama, buat data JSON dalam sebuah file dengan nama test.txt yang isinya: ,[object Object],{ "FirstName" : "Ahmad", "LastName" : "Masykur" } ,[object Object],Ganti baris perintah pada script untuk melakukan request dengan:,[object Object],... ,[object Object],onclick ="makeRequest('test.txt')">,[object Object],... ,[object Object],Kemudian pada alertContents()ganti pada baris alert(http_request.responseText);diganti dengan:,[object Object],eval("jsonObj="+http_request.responseText+";"); alert(jsonObj.FirstName + ' ' + jsonObj.LastName); ,[object Object]
Dari contoh di atas terlihat bahwa JSON lebih sederhana dan ringan dibandingkan dengan XML. Jumlah data yang terkandung lebih banyak dan total byte yang dikirim lebih kecil. Juga pada penulisan di javascript lebih sederhana karena notasi data dapat langsung diterjemahkan menjadi objek Javascript dengan fungsi eval().,[object Object],Pada implementasi di projek nyata, data (baik XML maupun JSON) biasanya diambil dari application server atau webservice. ,[object Object]

Weitere ähnliche Inhalte

Andere mochten auch

Kelompok 15
Kelompok 15Kelompok 15
Kelompok 15alqod
 
Kelompok 15
Kelompok 15Kelompok 15
Kelompok 15alqod
 
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika AldabaLightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldabaux singapore
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionIn a Rocket
 
SEO: Getting Personal
SEO: Getting PersonalSEO: Getting Personal
SEO: Getting PersonalKirsty Hulse
 
How to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media PlanHow to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media PlanPost Planner
 

Andere mochten auch (7)

Kelompok 15
Kelompok 15Kelompok 15
Kelompok 15
 
Kelompok 15
Kelompok 15Kelompok 15
Kelompok 15
 
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika AldabaLightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
 
SEO: Getting Personal
SEO: Getting PersonalSEO: Getting Personal
SEO: Getting Personal
 
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job? Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
 
How to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media PlanHow to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media Plan
 

Ähnlich wie Kelompok 15

Ähnlich wie Kelompok 15 (20)

Jeni Web Programming Bab 3 Advanced Servlets
Jeni Web Programming Bab 3 Advanced ServletsJeni Web Programming Bab 3 Advanced Servlets
Jeni Web Programming Bab 3 Advanced Servlets
 
Pengenalan Teknologi ajax
Pengenalan Teknologi ajaxPengenalan Teknologi ajax
Pengenalan Teknologi ajax
 
Ajax tutorial 1
Ajax tutorial 1Ajax tutorial 1
Ajax tutorial 1
 
Ajax pada jquery
Ajax pada jqueryAjax pada jquery
Ajax pada jquery
 
Ajax pada jquery
Ajax pada jqueryAjax pada jquery
Ajax pada jquery
 
Ajax pada jquery
Ajax pada jqueryAjax pada jquery
Ajax pada jquery
 
Jquery Ajax Part 1 by Yussan
Jquery Ajax Part 1 by YussanJquery Ajax Part 1 by Yussan
Jquery Ajax Part 1 by Yussan
 
Tugas 3 0317 hendrie prasetyo 1612510899
Tugas 3 0317 hendrie prasetyo 1612510899Tugas 3 0317 hendrie prasetyo 1612510899
Tugas 3 0317 hendrie prasetyo 1612510899
 
Tugas 3 0317
Tugas 3 0317Tugas 3 0317
Tugas 3 0317
 
PEMROGRAMAN MOBILE "AJAX PADA JQUERY"
PEMROGRAMAN MOBILE "AJAX PADA JQUERY"PEMROGRAMAN MOBILE "AJAX PADA JQUERY"
PEMROGRAMAN MOBILE "AJAX PADA JQUERY"
 
Presentase mobile
Presentase mobilePresentase mobile
Presentase mobile
 
Presentasi pertemuan3
Presentasi pertemuan3Presentasi pertemuan3
Presentasi pertemuan3
 
Panduan lengkap php ajax j query
Panduan lengkap php ajax j queryPanduan lengkap php ajax j query
Panduan lengkap php ajax j query
 
2 panduan lengkap php ajax j query
2 panduan lengkap php ajax j query2 panduan lengkap php ajax j query
2 panduan lengkap php ajax j query
 
Web Service Menggunakan Axis
Web Service Menggunakan AxisWeb Service Menggunakan Axis
Web Service Menggunakan Axis
 
Dasar-dasar javascript
Dasar-dasar javascriptDasar-dasar javascript
Dasar-dasar javascript
 
Understanding asynchronous process on website
Understanding asynchronous process on websiteUnderstanding asynchronous process on website
Understanding asynchronous process on website
 
Dasar javascript
Dasar javascriptDasar javascript
Dasar javascript
 
Function pada PHP
Function pada PHPFunction pada PHP
Function pada PHP
 
Pelatihan j query
Pelatihan j queryPelatihan j query
Pelatihan j query
 

Kelompok 15

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.