Web Engineering 2010 Pertemuan ke09 Teknologi Aplikasi Web

  • Slides: 68
Download presentation
Web Engineering 2010 Pertemuan ke-09 Teknologi Aplikasi Web II (Java. Script, AJAX) Husni husni@if.

Web Engineering 2010 Pertemuan ke-09 Teknologi Aplikasi Web II (Java. Script, AJAX) Husni [email protected] trunojoyo. ac. id Husni. trunojyo. ac. id Komputasi. trunoojoyo. ac. id

Outline • • Pengantar Java. Script AJAX Rangkuman 2

Outline • • Pengantar Java. Script AJAX Rangkuman 2

Bagaimana menambahkan beberapa logika bisnis ke dalam halaman web JAVASCPRIPT 3

Bagaimana menambahkan beberapa logika bisnis ke dalam halaman web JAVASCPRIPT 3

Bahasa Scripting? • Bahasa yang digunakan untuk menulis program yang menghitung input untuk prosesor

Bahasa Scripting? • Bahasa yang digunakan untuk menulis program yang menghitung input untuk prosesor bahasa yang lain. – Satu bahasa dilekatkan dalam bahasa lain • Embedded Java. Script memperhitungkan input HTML untuk browser • Shell script memperhitungkan perintah yang dieksekusi oleh shell • Karakteristik umum dari bahasa scripting – Pemrosesan string – karena perintah sering berwujud string – Struktur program sederhana, mendefinisikan hal-hal “on the fly” – Mengutamakan fleksibilitas di atas efisiensi dan keamanan • Kurangnya keamanan itu baik? (Contoh: Java. Script digunakan untuk aplikasi web…) 4

Sejarah Java. Script • Dikembangkan oleh Brendan Eich di Netscape – Bahasa scripting untuk

Sejarah Java. Script • Dikembangkan oleh Brendan Eich di Netscape – Bahasa scripting untuk Navigator 2 • Kemudian distandardkan untuk kompatibilitas browser – ECMAScript Edisi 3 (Java. Script 1. 5) • Terkait dengan Java (hanya nama) – Nama merupakan bagian dari ide penjualan : -) • Tersedia berbabagi implementasi – Implementasi Spider. Monkey C (dari Mozilla) – Implementasi Rhino Java (juga dari Mozilla) 5

Pemanfaatan Java. Script • • • Validasi form HTML Afek khusus pada halaman web

Pemanfaatan Java. Script • • • Validasi form HTML Afek khusus pada halaman web Sistem navigasi Kalkulasi matematika sederhana Manipulasi Content dinamis • Aplikasi Contoh – Dashboard widgets pada Mac OS X, Google Maps, Philips universal remotes, Writely word processor, dan banyak lagi… 6

Contoh 1: Penambahan 2 Bilangan <html> … <p> … </p> <script> var num 1,

Contoh 1: Penambahan 2 Bilangan <html> … <p> … </p> <script> var num 1, num 2, sum num 1 = prompt("Enter first number") num 2 = prompt("Enter second number") sum = parse. Int(num 1) + parse. Int(num 2) alert("Sum = " + sum) </script> … </html> 7

Contoh 2: Browser Event <script type="text/Java. Script"> function which. Button(event) { if (event. button==1)

Contoh 2: Browser Event <script type="text/Java. Script"> function which. Button(event) { if (event. button==1) { alert(“Anda men-klik tombol mouse kiri!") } else { alert(“Anda men-klik tombol mouse kanan!") } Kejadian Mouse menyebabkan } fungsi dipanggil. </script> … <body onmousedown="which. Button(event)"> … </body> 8

Contoh 3: Manipulasi Halaman • Beberapa kemungkinan – create. Element(element. Name) – create. Text.

Contoh 3: Manipulasi Halaman • Beberapa kemungkinan – create. Element(element. Name) – create. Text. Node(text) – append. Child(new. Child) – remove. Child(node) • Contoh: tambahkan item daftar baru var list = document. get. Element. By. Id('t 1') var newitem = document. create. Element('li') var newtext = document. create. Text. Node(text) list. append. Child(newitem) newitem. append. Child(newtext) 9

Dasar Bahasa • Java. Script bersifat case sensitive – on. Click, ONCLICK, … sama

Dasar Bahasa • Java. Script bersifat case sensitive – on. Click, ONCLICK, … sama di HTML, tidak case-sensitive • Pernyataan diakhiri dengan enter atau titik koma – x = x+1; same as x = x+1 • Blok pernyataan diletakkan di dalam { …} • Variabel – Definisi menggunakan pernyataan var – Defnisi secara implisit dengan penggunaan pertamanya, harus diberikan suatu nilai • Definisi implisir mempunyai cakupan global, meski ditulis di dalam lingkup bersarang 10

Tipe Data Primitif • Boolean: true dan false • Bilangan: desimal 64 -bit –

Tipe Data Primitif • Boolean: true dan false • Bilangan: desimal 64 -bit – Sama dengan double dan Double dalam Java – Tidak ada tipe integer – Nilai khsusu Na. N (bukan bilangan) dan Infinity • String: dereratan nol atau lebih karakter Unicode – Tidak ada tipe karakter (hanya string dengan panjang 1) – String literal menggunakan karakter ' atau “ (harus cocok) • Obyek khusus: null dan undefined 11

Obyek • Obyek adalah koleksi dari properti bernama • Dapat dianggap sebagai array asosiatif

Obyek • Obyek adalah koleksi dari properti bernama • Dapat dianggap sebagai array asosiatif atau hash table – Himpunan dari pasangan nama: nilai • obj. Bob = {name: “Bob", grade: 'A', level: 3}; – Berperan mirip list (daftar) dalam Lisp / Scheme • Anggota baru dapat ditambahkan kapanpun • obj. Bob. fullname = 'Robert'; • Dapat mempunyai metode • Dapat dirujuk oleh obyek lain 12

Fungsi • Fungsi adalah obyek dengan metode bernama “( )” – Properti dari suatu

Fungsi • Fungsi adalah obyek dengan metode bernama “( )” – Properti dari suatu obyek dapat berupa fungsi (=method) • function max(x, y) { if (x>y) return x; else return y; }; • max. desc = “mengembalikan maksimum dari 2 argumen”; – Deklarasi lokal dapat muncul dalam tubuh fungsi • Pamanggilan dalam menyertakan sejumlah argumen – functionname. length : jumlah argumen dalam definisi – functionname. arguments. length : jumlah argumen saat pemanggilan – Tipe dasar dilewatkan dengan nilai, obyek dengan referensi • Fungsi “Anonymous” – (function (x, y) {return x+y}) (2, 3); 13

Contoh Fungsi • Fungsi Curried function Curried. Add(x) { return function(y){ return x+y} };

Contoh Fungsi • Fungsi Curried function Curried. Add(x) { return function(y){ return x+y} }; g = Curried. Add(2); g(3) • Jumlah Argumen variabel function sum. All() { var total=0; for (var i=0; i< sum. All. arguments. length; i++) total+=sum. All. arguments[i]; return(total); } sum. All(3, 5, 3, 2, 6) 14

Fungsi Anonymous • Fungsi anonim sangat berguna untuk callbacks – set. Timeout(function() { alert("done");

Fungsi Anonymous • Fungsi anonim sangat berguna untuk callbacks – set. Timeout(function() { alert("done"); }, 10000) – Evaluasi dari alert("done") ditunda sampai function dipanggil • Menirukan blok dengan definisi dan pemanggilan function var u = { a: 1, b: 2 } var v = { a: 3, b: 4 } (function (x, y) { var temp. A = x. a; var temp. B =x. b; // local variables x. a=y. a; x. b=y. b; y. a=temp. A; y. b-temp. B }) (u, v) // Works because objs are passed by ref 15

Fitur Obyek Dasar • Gunakan fungsi untuk membangun obyek – function car(make, model, year)

Fitur Obyek Dasar • Gunakan fungsi untuk membangun obyek – function car(make, model, year) { this. make = make; this. model = model; this. year = year; } • Obyek punya prototipe, dapat diubah – var c = new car(“Ford”, ”Taurus”, 1988); – car. prototype. print = function () { return this. year + “ “ + this. make + “ “ + this. model; } – c. print(); 16

Java. Script dalam Halaman Web • Dilekatkan dalam halaman HTML sebagai elemen <script> element

Java. Script dalam Halaman Web • Dilekatkan dalam halaman HTML sebagai elemen <script> element – Java. Script ditulis langsung di dalam elemen <script> • <script> alert("Hello World!") </script> – File dilinkkan sebagai atribut src dari elemen <script> • <script type="text/Java. Script" src=“functions. js"></script> • Atribut Event handler • <a href="http: //www. yahoo. com " onmouseover="alert('hi'); "> • Pseudo-URL yang dirujuk oleh link • <a href=“Java. Script: alert(‘You clicked’); ”>Click me</a> 17

Fitur dalam Kelas This • Manajemen Stack memory – Parameter, variabel lokal dalam rekaman

Fitur dalam Kelas This • Manajemen Stack memory – Parameter, variabel lokal dalam rekaman aktifiasi • Garbage collection • Closures – Function bersama dengan lingkungan (variabel global) • Exceptions • Object features – Dynamic lookup, encapsulation, subtyping, inheritance • Concurrency 18

Evaluasi Java. Script • String evaluasi sebagai kode – Fungsi eval mengevaluasi suatu string

Evaluasi Java. Script • String evaluasi sebagai kode – Fungsi eval mengevaluasi suatu string kode Java, dalam lingkup kode dipanggil var code = "var a = 1"; eval(code); // a bernilai '1‘ var obj = new Object(); obj. eval(code); // obj. a bernilai 1 19

Fitur Tak-Biasa • • Eval, fungsi pengecekan tipe run-time Dukungan bagi pencocokan pola (reg.

Fitur Tak-Biasa • • Eval, fungsi pengecekan tipe run-time Dukungan bagi pencocokan pola (reg. expression) Dapat menambahkan metode ke obyek Dapat menghapus metode dari obyek – myobj. a = 5; myobj. b = 12; delete myobj. a; • Iterasi terhadap metode dari suatu obyek – for (variabel dalam obyek) { pernyataan } 20

Kadang kita belum melihatnya: manipulasi halaman web JAVASCRIPT UNTUK MEMODIFIKASI HTML 21

Kadang kita belum melihatnya: manipulasi halaman web JAVASCRIPT UNTUK MEMODIFIKASI HTML 21

Hello World <html> <body> <script type="text/javascript"> document. write(“<h 1>Hello World!</h 1>"); </script> </body> </html>

Hello World <html> <body> <script type="text/javascript"> document. write(“<h 1>Hello World!</h 1>"); </script> </body> </html> Pemanfaatan DOM 22

", "description": "Hello World ", "width": "540" }
URL dari Dokumen <html> <body> URL dari dokumen ini adalah: <script type="text/javascript"> document. write(document.

URL dari Dokumen <html> <body> URL dari dokumen ini adalah: <script type="text/javascript"> document. write(document. URL); </script> </body> </html> 23

Validasi Form HTML <html> <head> <script type="text/javascript“> function validate() …(slide berikut) </script> </head> <body>

Validasi Form HTML <html> <head> <script type="text/javascript“> function validate() …(slide berikut) </script> </head> <body> <form action="tryjs_submitpage. htm" onsubmit="return validate()"> Nama (s. d 10 huruf): <input type="text" id="fname“ size="20"> Usia(1 s. d 100): <input type="text" id="age" size="20"> E-mail: <input type="text" id="email" size="20"> <input type="submit" value="Submit"> </form> </body> </html> 24

", "description": "Validasi Form HTML
Memperkenalkan paradigma “push” dalam aplikasi web ASYNCHRONOUS JAVASCRIPT AND XML (AJAX) 26

Memperkenalkan paradigma “push” dalam aplikasi web ASYNCHRONOUS JAVASCRIPT AND XML (AJAX) 26

Sebelum AJAX? • Halaman-halaman statis memberikan ilusi mengenai interaktifitas melalui submisi form standard. •

Sebelum AJAX? • Halaman-halaman statis memberikan ilusi mengenai interaktifitas melalui submisi form standard. • Submisi form mengakibatkan pemuatan halaman penuh. 27

So, Masalahnya? • Banyak action hanya mengubah bagian kecil dari halaman tetapi halaman lengkap

So, Masalahnya? • Banyak action hanya mengubah bagian kecil dari halaman tetapi halaman lengkap harus dimuat ulang (reload). • Respon server memuat content halaman lengkap, bukan hanya bagian yang akan diupdate. • Pemuatan halaman lengkap biasanya mengakibatkan beberapa tambahan request HTTp untuk gambar (image) images, style sheet, script, dan content lain yang mungkin ada dalam halaman. 28

AJAX - Asynchronous Java. Script and XML • Suatu antarmuka yang memungkinkan komunikasi HTTP

AJAX - Asynchronous Java. Script and XML • Suatu antarmuka yang memungkinkan komunikasi HTTP tanpa merefresh halaman. • Halaman web dimuat ke dalam eksekusi suatu obyek dalam script (misal: Java. Script) dan diintegrasikan dengan content halaman • Jadi, halaman web dapat berkomunikasi dengan server tanpa merefresh halaman keseluruhan. 29

Mengapa Menggunakan AJAX • Meningkatkan pengalaman pengguna – Menaikkan usability, speed, interactivity – Memungkinkannya

Mengapa Menggunakan AJAX • Meningkatkan pengalaman pengguna – Menaikkan usability, speed, interactivity – Memungkinkannya update bagian dari suatu halaman web tanpa memuat ulang halaman secara lengkap – Asynchronous— Tak Sinkron. Pengguna tak harus menunggu server memberikan respon. 30

Contoh Aplikasi AJAX • Google Maps – http: //maps. google. com/ • Goolgle Suggest

Contoh Aplikasi AJAX • Google Maps – http: //maps. google. com/ • Goolgle Suggest – http: //www. google. com/webhp? complete=1&hl=en • Gmail – http: //gmail. com/ • Yahoo Maps (baru) – http: //maps. yahoo. com/ • Banyak lagi. . 31

Contoh: Google Suggest • Memanfaatkan data dari popularitas pencarian untuk membantu perankingan. • Tidak

Contoh: Google Suggest • Memanfaatkan data dari popularitas pencarian untuk membantu perankingan. • Tidak mendapatkan saran pada history pencarian personal. 32

Mengapa Menggunakan AJAX? • Aplikasi AJAX dapat digunakan pada banyak dan berbeda: – Sistem

Mengapa Menggunakan AJAX? • Aplikasi AJAX dapat digunakan pada banyak dan berbeda: – Sistem operasi – Browser – Arsitektur komputer • Standard web yang digunakan AJAX (XHTML, CSS, Java. Script, XML) telah terdefinisi dengn baik dan didukung oleh semua browser utama. 33

Bagaimana AJAX Bekerja • Java. Script berkomunikasi secara langsung dengan server, menggunakan obyek XMLHttp.

Bagaimana AJAX Bekerja • Java. Script berkomunikasi secara langsung dengan server, menggunakan obyek XMLHttp. Request (atau Active. XObject pada IE 5 & 6) • Data yang diretrieve dari server dapat dalam format bervariasi: file XML, HTML, atau text. 34

Request HTTP: Model Tradisional • Java. Script tradisional: – Buat form html • Gunakan

Request HTTP: Model Tradisional • Java. Script tradisional: – Buat form html • Gunakan GET atau POST untuk berkomunikasi dengan server – Pengguna men-click tombol “Submit” untuk mengirimkan dan menerima informasi – Pengguna MENUNGGU • Server merespon • Halaman baru dimuat bersama dengan hasilnya 35

Model Tradisional 36 Sumber: http: //www. openajax. org/member/wiki/Technical_Overview_Whitepaper

Model Tradisional 36 Sumber: http: //www. openajax. org/member/wiki/Technical_Overview_Whitepaper

Sumber: http: //www. adaptivepath. com/ideas/essays/archives/000385. php 37

Sumber: http: //www. adaptivepath. com/ideas/essays/archives/000385. php 37

Request HTTP: Cara AJAX • Java. Script berkomunikasi secara langsung dengan server, melalui obyek

Request HTTP: Cara AJAX • Java. Script berkomunikasi secara langsung dengan server, melalui obyek Java. Script XMLHttp. Request (atau Active. XObject, IE 5 & 6) • Dengan XMLHttp. Request, halaman web dapat membuat suatu resquest ke atau mendapatkan respon dari web server tanpa pemuatan ulang • Pengguna dapat tetap pada halaman yang sama, tidak memberitahu bahwa halaman request script dan mengirim data ke server berada di latar belakang 38

XMLHttp. Request • API yang Java. Script dan bahasa scripting browser lain gunakan untuk

XMLHttp. Request • API yang Java. Script dan bahasa scripting browser lain gunakan untuk mentransfer XML dan data lain antara client halaman web dan sisi server • Data yang dikembalikan dari pemanggilan XMLHttp. Request sering disediakan oleh database back-end. 39

Sejarah XMLHttp. Request • Microsoft Internet Explorer version 5 – Obyek Active. X •

Sejarah XMLHttp. Request • Microsoft Internet Explorer version 5 – Obyek Active. X • Mozilla 1. 0 menambahkannya sebagai obyek native dengan suatu API kompatibel. • Apple menambahkannya ke Safari pada version 1. 2 40

Teknologi pada AJAX • Kombinasi dari: – XHTML (atau HTML) – Cascading Style Sheets

Teknologi pada AJAX • Kombinasi dari: – XHTML (atau HTML) – Cascading Style Sheets (CSS) – Document Object Model dimanipulasi menggunakan Java. Script untuk menampilkan dan berinteraksi secara dinamis dengan informasi yang disajikan – Obyek XMLHttp. Request untuk bertukar data secara asinkron dengan server web 41

Java. Script • Mendefinisikan obyek untuk pengiriman request HTTP • Menginisiasi request: – Dapatkan

Java. Script • Mendefinisikan obyek untuk pengiriman request HTTP • Menginisiasi request: – Dapatkan obyek request – Tunjuk suatu fungsi response handler – Inisiasi request GET atau POST – Kirimkan data • Menangani respon – Tunggu ready. State 4 dan status HTTP 200 – Ekstrak teks kembalian dengan response. Text atau response. XML – Lakukan sesuai dengan hasil • Misal: Gunakan inner. HTML untuk menyisipkan hasil ke dalam elemen yang ditunjuk 42

Sisi Server • Kita sudah mengurangi beban pada server? • Pendatang baru di AJAX

Sisi Server • Kita sudah mengurangi beban pada server? • Pendatang baru di AJAX kadang percaya bahwa AJAX, karena menyediakan user interface yang responsif, mengurangi trafik pada sisi server. • Nyatanya, aplikasi AJAX meminta trafil sisi server lebih besar karena setiap request AJAX melibatkan perjalanan ke server. – Karena request tersebut bersifat asinkron, AJAX membuat persepsi UI yang lebih responsif tadi, meskipun biasanya tidak mengurangi beban pada server. 43

So, Bagaimana Kerjanya? • Java. Script digunakan untuk: – Membuat dan mengontrol instance dari

So, Bagaimana Kerjanya? • Java. Script digunakan untuk: – Membuat dan mengontrol instance dari obyek XMLHttp. Request (XHR). – Menyediakan handler terhadap respon. – Memanipulasi DOM. • Obyek XMLHttp. Request: – Membolehkan skrip mengerjakan fungsionalitas client HTTP. – Mendukung operasi GET dan POST. 44

Menjalankan Request HTTP Biasanya diperlukan 3 langkah: 1. Bangun dan konfigurasikan suatu obyek XMLHttp.

Menjalankan Request HTTP Biasanya diperlukan 3 langkah: 1. Bangun dan konfigurasikan suatu obyek XMLHttp. Request 2. Jalankan request 3. Proses respon 45

Membangun XMLHttp. Request Mozilla: var request = new XMLHttp. Request(); Microsoft Explorer: var request

Membangun XMLHttp. Request Mozilla: var request = new XMLHttp. Request(); Microsoft Explorer: var request = new Active. XObject("Microsoft. XMLHTTP"); 46

Konfigurasi XMLHttp. Request request. open("method", "URL", false) • Metode adalah GET, POST, dll. •

Konfigurasi XMLHttp. Request request. open("method", "URL", false) • Metode adalah GET, POST, dll. • URL harus berupa domain atau URL relatif, alasan keamanan request. set. Request. Header("header", "value") 47

Menjalankan Request request. send(content ) • content adalah yang terdapat dalam request POST •

Menjalankan Request request. send(content ) • content adalah yang terdapat dalam request POST • content dapat berupa "null" atau kosong 48

Membaca Respon request. response. Text • Respon sebagai flat text request. response. XML •

Membaca Respon request. response. Text • Respon sebagai flat text request. response. XML • Respon sebagai suatu obyek dokumen (DOM) • Tersedia jika Content-Type respon bernilai text/XML request. status. Text request. get. All. Response. Headers() request. get. Response. Header("header") 49

Contoh <html> <head> <title>Jokes</title> <script type="text/javascript">. . . 2 slides ahead. . . </script>

Contoh <html> <head> <title>Jokes</title> <script type="text/javascript">. . . 2 slides ahead. . . </script> </head> 50

", "description": "Contoh Jokes ", "width": "540" }
Contoh <body onload="init(); set. Joke()"> <h 1>Select a Joke: </h 1> <p><select onchange="set. Joke(value)">

Contoh <body onload="init(); set. Joke()"> <h 1>Select a Joke: </h 1> <p><select onchange="set. Joke(value)"> <option value="1" selected="selected">Joke 1</option> <option value="2">Joke 2</option> <option value="3">Joke 3</option> </select></p> <div id="jokediv"></div> </body> </html> 51

Contoh <script type="text/javascript"> var j. Div; function init() { j. Div = document. get.

Contoh <script type="text/javascript"> var j. Div; function init() { j. Div = document. get. Element. By. Id("jokediv"); } function set. Joke(value) { request = new XMLHttp. Request(); request. open("GET", "joke"+value+". txt", false); request. send(null); if(request. status==200){j. Div. inner. HTML=request. response. Text; } else {j. Div. inner. HTML = "<i>Cannot load joke. . . </i>"; } } </script> Bagaimana jika kita belum mendapatkan respon pada tahap ini? 52

Contoh • Contoh di atas menggunakan “false" dalam parameter ke-3 dari open(). – Parameter

Contoh • Contoh di atas menggunakan “false" dalam parameter ke-3 dari open(). – Parameter ini menentukan apakah request akan dihandel secara asinkron. • True berarti bahwa script lanjut berjalan setelah metode send(), tanpa menunggu respon dari server. 53

Request Asinkron • Pembacaan halaman web membutuhkan waktu lama selama browser diblok • Solusi:

Request Asinkron • Pembacaan halaman web membutuhkan waktu lama selama browser diblok • Solusi: Jalankan request secara asinkron • Yaitu, eksekusi berlanjut setelah send dipanggil tanpa menunggunya selesai request. open("method", "URL", true) • Saat request dilengkapkan, suatu fungsi yang telah didefinisi dipanggil 54

Status XMLHttp. Request • XMLHttp. Request melalui beberapa status: 0 not initialized 1 loading

Status XMLHttp. Request • XMLHttp. Request melalui beberapa status: 0 not initialized 1 loading 3 interactive 2 loaded 4 complete • Dalam konfigurasi request, anda dapat mendefinisikan suatu fungsi untuk dipanggil pada saat status berubah: request. onreadystatechange = function. Name 55

Status XMLHttp. Request • Gunakan request. ready. State untuk mendapatkan status terkini dari request

Status XMLHttp. Request • Gunakan request. ready. State untuk mendapatkan status terkini dari request • Gunakan request. abort() untuk menghentikan request 56

Contoh Asinkron var request; function set. Joke(value) { request = new XMLHttp. Request(); request.

Contoh Asinkron var request; function set. Joke(value) { request = new XMLHttp. Request(); request. open("GET", "joke"+value+". txt", true); request. onreadystatechange = update. Joke. Div; request. send(null); } 57

Contoh function update. Joke. Div() { if(request. ready. State<4) { joke. Div. inner. HTML

Contoh function update. Joke. Div() { if(request. ready. State<4) { joke. Div. inner. HTML = "<i>Loading. . . </i>"; return; } if(request. status==200) { joke. Div. inner. HTML = request. response. Text; } else { joke. Div. inner. HTML = "<i>Cannot load joke!</i>"; } 58 }

Integrasi AJAX & XML Via DOM • Contoh berikut memperlihatkan bagaimana data XML dapat

Integrasi AJAX & XML Via DOM • Contoh berikut memperlihatkan bagaimana data XML dapat diparsedan ditambahkan ke dalam content dari halamn web. 59

XML+AJAX: Contoh <html> <head><title>Country List</title> <script type="text/javascript"> … </script> </head> <body onload="init(); load. Countries()">

XML+AJAX: Contoh <html> <head><title>Country List</title> <script type="text/javascript"> … </script> </head> <body onload="init(); load. Countries()"> <h 1>Select a Continent: </h 1> 60

", "description": "XML+AJAX: Contoh Country List ", "width": "540" }
XML+AJAX: Contoh <p> <select id="continenet. List” onchange="load. Countries()"> <option value="asia">Asia</option> <option value="africa">Africa</option> <option value="europe">Europe</option>

XML+AJAX: Contoh <p> <select id="continenet. List” onchange="load. Countries()"> <option value="asia">Asia</option> <option value="africa">Africa</option> <option value="europe">Europe</option> </select> </p> <p><select size="10" id="country. List"></select></p> </body> </html> 61

XML+AJAX: Contoh function init() { continents = document. get. Element. By. Id("continenet. List"); countries

XML+AJAX: Contoh function init() { continents = document. get. Element. By. Id("continenet. List"); countries = document. get. Element. By. Id("country. List"); } function load. Countries() { var xml. URL = "countries-"+continents. value+". xml"; var request = new XMLHttp. Request(); request. onreadystatechange = update. Countries (); request. open("GET", xml. URL, true); request. send(null); } 62

XML+AJAX: Contoh function update. Countries() { if(request. ready. State==4) { while(countries. length>0) { countries.

XML+AJAX: Contoh function update. Countries() { if(request. ready. State==4) { while(countries. length>0) { countries. remove(0); } if(request. status==200) { var names = request. response. XML. get. Elements. By. Tag. Name("name"); for(var i=0; i<names. length; ++i) { option = document. create. Element("option"); option. text=option. value=names[i]. first. Child. node. Value; countries. append. Child(option); } } 63

AJAX: Kekurangan Potensial • Fungsi "Back" dari browser bekerja tidak sesuai harapan • Mem-Bookmark

AJAX: Kekurangan Potensial • Fungsi "Back" dari browser bekerja tidak sesuai harapan • Mem-Bookmark status tertentu dari aplikasi • Navigasi mungkin sulit • Pengguna mungkin tidak memperhatikan kapan bagian kecil dri halaman berubah • Search engine tracking • Jika pengguna mendisable Java. Script • Banyak program web analytics mungkin tidak mentrack action Ajax karena dilakukannya pemuatan ulang (reload) halaman 64

Rangkuman • Java. Script untuk logika sisi client • Ajax mengaktifkan komunikasi asinkron antara

Rangkuman • Java. Script untuk logika sisi client • Ajax mengaktifkan komunikasi asinkron antara browser dan server 65

Bibliography • Bacaan Utama – Java. Script reference • http: //www. w 3 schools.

Bibliography • Bacaan Utama – Java. Script reference • http: //www. w 3 schools. com/jsref/default. asp – W 3 Schools Ajax Tutorial http: //www. w 3 schools. com/Ajax/Default. Asp 66

Tool Validasi • Java. Script Debugger (for Mozilla) – https: //addons. mozilla. org/en. US/firefox/addon/216

Tool Validasi • Java. Script Debugger (for Mozilla) – https: //addons. mozilla. org/en. US/firefox/addon/216 67

Pertanyaan? 68

Pertanyaan? 68