apa itu ajax

15
PEMROGRAMAN INTERNET AJAX & JSON Oleh : I Gede Eddy Wiputra (1004505006) PROGRAM STUDI TEKNOLOGI INFORMASI FAKULTAS TEKNIK UNIVERSITAS UDAYANA 2012

Upload: eddy-wiputra

Post on 27-Nov-2015

38 views

Category:

Documents


1 download

DESCRIPTION

AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web tapi bukan merupakan bahasa pemrograman yang baru. Dikembangkan sekitar 2-3 tahun yang lalu, AJAX mulai dilirik oleh para web desainer dan programmer. Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa.

TRANSCRIPT

Page 1: Apa Itu AJAX

PEMROGRAMAN INTERNET

AJAX & JSON

Oleh :

I Gede Eddy Wiputra

(1004505006)

PROGRAM STUDI TEKNOLOGI INFORMASI

FAKULTAS TEKNIK

UNIVERSITAS UDAYANA

2012

Page 2: Apa Itu AJAX

1.1 Penegertian AJAX

AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web tapi bukan merupakan bahasa pemrograman yang baru. Dikembangkan sekitar 2-3 tahun yang lalu, AJAX mulai dilirik oleh para web desainer dan programmer. Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa. Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refresh page) atau pindah ke page yang lain. AJAX dapat diintegrasikan dengan server side programming seperti PHP, ASP, JSP dll.

Contoh aplikasi menggunakan AJAX: Google Maps, Gmail, Youtube, dan tab Facebook.

1.2 Kelebihan dan Kelemahan AJAX

Kelebihan dan kelemahan teknik dalam AJAX diantaranya adalah :

a. XMLHttpRequest

Kelebihan :

Dapat mengirim dan menerima semua HTTP header, Dapat membuat request HTTP menggunakan tipe (GET, POST, dll) Dapat mengontrol semua request POST dan semua tipe.

Kekurangan :

ActiveX request harus ada Tiap browser memiliki perbedaan cara implementasinya

b. IFrame

Kelebihan :

Dapat menjalankan request GET dan POST Mendukung upload file secara asynchronouse

Kekurangan :

Tidak boleh menggunakan system synchronouse Implementasi berbeda pada tiap browser Semua request data adalah encode-URL dan dapat menambah ukuran Meninggalkan history tambahan.

Page 3: Apa Itu AJAX

c. Cookie:

Kelebihan :

Didukung oleh banyak browser Sedikit perbedaan pada implementasi tiap browser

Kekurangan :

Tidak boleh menggunakan synchronous request Tidak dapat bekerja dengan request atau hasil yang besar Membutuhkan halaman server yang mendukung cookie Hanya menggunakan

request GET HTTP.

1.3 Bagaimana AJAX Bekerja

Gambar di bawah merupakan bagaimana AJAX bekerja dimana browser mengakses file ke server melalui internet dan mengirimkan kembali ke browser.

Gambar 1.1 Tampilan bagaimana AJAX bekerja

Page 4: Apa Itu AJAX

1.4 Cara Penggunaan AJAX

Awalnya perlu membuat object XMLHttpRequest, objek ini wajib ada dalam website yang menggunakan Ajax. Untuk memanggilnya diperlukan menggunakan fungsi berikut ini:

function GetXmlHttpObject(){ var xmlHttp=null; try { //Untuk Browser Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ //Untuk Browser Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp;}

Setelah membuat objek XMLHttpRequest, sekarang membuat fungsi untuk mengambil file dan menampilkannya. Disini dibuat fungsi function getpages(url,centercol), yang didalamnya terdapat xmlHttp.open ("GET", url); yang berarti mengambil url dengan method get, dengan menggunakan method get maka harus mengirimkan sesuatu ke server, tapi karena tidak mengirim apa-apa maka kirimkan saja nilai kosong dengan kode: xmlHttp.send(null);

xmlHttp.onreadystatechange = function() merupakan sebuah fungsi dimana nanti akan memperoleh status dari request file yang telah dilakukan. xmlHttp.readyState memiliki 4 status yaitu:

SourceCode 1.1 fungsi untuk membuat object XMLHttpRequest

Page 5: Apa Itu AJAX

Nilai Penjelasan0 Request belum dibuat1 Request sedang dalam proses (biasanya kita

menggunakan gambar loading dengan ini)2 Request sudah dikirim tapi hasil belum

diterima3 Request sedang diproses dikomputer klien4 Request sudah sukses dikirim dan sudah sukses

diterima

xmlHttp.status merupakan status http. Jika statusnya 200 berarti file html nya ada dan siap ditampilkan. Sehingga perlu mengecek kedua status tersebut dengan kode if (xmlHttp.readyState == 4 && xmlHttp.status == 200). Jika kedua statusnya oke, maka perlu ditampilkan dengan perintah obj.innerHTML = xmlHttp.responseText Dimana ini berarti ditampilkan di obj, sementara variabel obj telah diisi dengan magnite, ini kode ketika kita mengisi obj dengan magnite, var obj = document.getElementById(magnite).

function getpages(url,magnite) { xmlHttp=GetXmlHttpObject(); if (xmlHttp) { var obj = document.getElementById(magnite); xmlHttp.open("GET", url); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 1) { obj.innerHTML = '<img alt=\"Halaman Sedang Dimuat \" src=\"images/wait.gif\" alt=\"loading\" / >'; } if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { obj.innerHTML = xmlHttp.responseText; } } xmlHttp.send(null); }

Terakhir memanggil fungsi getpages pada tombol serta mengirim url yang akan ditampilkan. Inilah kode yang digunakan untuk memanggil fungsi getpages:

<input type="button" value="Tampilkan Request" onclick="getpages('request.html','magnite')">.

Tabel 1.1 xmlHttp.readyState

SourceCode 1.2 fungsi untuk mengambil file dan menampilkannya

SourceCode 1.3 fungsi untuk memanggil fungsi getpages

Page 6: Apa Itu AJAX

1.5 Tampilan Web Menggunakan AJAX

Berikut merupakan tampilan dari penggunaan dari script AJAX. Apabila tombol form diklik maka getpages akan berjalan, dan akan memanggil file lalu menampilkannya.

Setelah tombol diklik makan akan muncul file yang telah dipanggil sebelumnya dan menampilkannya.

Gambar 1.2 Tampilan web sebelum AJAX dieksekusi

Gambar 1.3 Tampilan web setelah AJAX dieksekusi

Page 7: Apa Itu AJAX

1.6 Pengertian JSON

JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript, Standar ECMA-262 Edisi ke-3- Desember 1999. JSON merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun karena menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga C termasuk C, C++, C#, Java, JavaScript, Perl, Python dll. Oleh karena sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data. Beberapa orang lebih suka JSON, karena paling mudah untuk mem-parse-nya, hanya menempatkan sebuah eval dan selesai sudah. JSON terbuat dari dua struktur:

Kumpulan pasangan nama/nilai. Pada beberapa bahasa, hal ini dinyatakan sebagai objek (object), rekaman (record), struktur (struct), kamus (dictionary), tabel hash (hash table), daftar berkunci (keyed list), atau associative array.

Daftar nilai terurutkan (an ordered list of values). Pada kebanyakan bahasa, hal ini dinyatakan sebagai larik (array), vektor (vector), daftar (list), atau urutan (sequence).

Struktur-struktur data ini disebut sebagai struktur data universal. Pada dasarnya, semua bahasapemprograman modern mendukung struktur data ini dalam bentuk yang sama maupun berlainan. Hal ini pantas disebut demikian karena format data mudah dipertukarkan dengan bahasa-bahasa pemprograman yang juga berdasarkan pada struktur data ini.

JSON menggunakan bentuk sebagai berikut:Object adalah sepasang nama/nilai yang tidak terurutkan. Objek dimulai dengan { (kurung kurawal buka) dan diakhiri dengan } (kurung kurawal tutup). Setiap nama diikuti dengan : (titikdua) dan setiap pasangan nama/nilai dipisahkan oleh , (koma).

Gambar 1.4 Tampilan cara penulisan JSON Object

Page 8: Apa Itu AJAX

Array adalah kumpulan nilai yang terurutkan. Larik dimulai dengan [ (kurung kotak buka) dan diakhiri dengan ] (kurung kotak tutup). Setiap nilai dipisahkan oleh , (koma).

Nilai (value) dapat berupa sebuah string dalam tanda kutip ganda, atau angka, atau true atau false atau null, atau sebuah objek atau sebuah larik. Struktur-struktur tersebut dapat disusun bertingkat.

String adalah kumpulan dari nol atau lebih karakter Unicode, yang dibungkus dengan tanda kutip ganda. Di dalam string dapat digunakan backslash escapes "\" untuk membentuk karakter khusus. Sebuah karakter mewakili karakter tunggal pada string. String sangat mirip dengan string C atau Java.

Gambar 1.5 Tampilan cara penulisan JSON Array

Gambar 1.6 Tampilan susunan struktur dari nilai

Page 9: Apa Itu AJAX

Angka adalah sangat mirip dengan angka di C atau Java, kecuali format oktal dan heksadesimal tidak digunakan.

1.7 Penggunaan JSON

Contoh JSON Objects

<script language="javascript">var JSON = {

nama : 'I Gede Eddy Wiputra',umur : 20,alamat : 'jln.Pudak,Gg.Pudak Harum no.26

Batubulan',

Gambar 1.7 Tampilan cara penulisan String

Gambar 1.8 Tampilan cara penulisan format angka

Page 10: Apa Itu AJAX

hobby : 'Bermain Musik'};

document.write ("Nama : "+JSON.nama +"<br>"+"Umur : "+JSON.umur+"<br>"+"alamat : "+JSON.alamat+"<br>"+"Hobby : "+JSON.hobby);</script>

Berikut tampilan dari contoh JSON Objects

Contoh JSON Array

<script language="javascript">var JSON = {

nama : 'I Gede Eddy Wiputra',umur : 20,alamat : 'jln.Pudak,Gg.Pudak Harum no.26

Batubulan',hobby : 'Bermain Musik',riwayat : [

{nama:'TK Srikandi',alamat:'Sangeh'},

{nama:'SD 3 Kesiman',alamat:'jln.Bakung'},

{nama:'SMPN 8 Denpasar',alamat:'jln.Meduri'},

{nama:'SMKN 1 Denpasar',alamat:'jln.Hos Cokroaminoto'},

]};

document.write ("Nama : "+JSON.nama +"<br>"+"Umur : "+JSON.umur+"<br>"+"alamat : "+JSON.alamat+"<br>"+"Hobby : "+JSON.hobby);

document.write ("<ol>");for (var i=0; i<JSON.riwayat.length; i++) {

document.write ("<li>"+"Nama Sekolah : "+JSON.riwayat[i].nama

SourceCode 1.4 fungsi menggunakan JSON Object

Gambar 1.9 Tampilan dari JSON Object

Page 11: Apa Itu AJAX

+"Alamat Sekolah : "+JSON.riwayat[i].alamat+"</li>");}

document.write ("</ol>");</script>

Berikut merupakan tampilan dari JSON Array

SourceCode 1.5 fungsi menggunakan JSON Array

Gambar 1.10 Tampilan dari JSON Array