apa itu ajax

Download Apa Itu AJAX

Post on 27-Nov-2015

8 views

Category:

Documents

1 download

Embed Size (px)

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

PEMROGRAMAN INTERNETAJAX & JSON

Oleh :I Gede Eddy Wiputra(1004505006)

PROGRAM STUDI TEKNOLOGI INFORMASIFAKULTAS TEKNIKUNIVERSITAS UDAYANA2012

1.1 Penegertian AJAXAJAX 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 AJAXKelebihan dan kelemahan teknik dalam AJAX diantaranya adalah :a. XMLHttpRequestKelebihan : 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 implementasinyab. IFrameKelebihan : Dapat menjalankan request GET dan POST Mendukung upload file secara asynchronouseKekurangan : Tidak boleh menggunakan system synchronouse Implementasi berbeda pada tiap browser Semua request data adalah encode-URL dan dapat menambah ukuran Meninggalkan history tambahan.

c. Cookie:Kelebihan : Didukung oleh banyak browser Sedikit perbedaan pada implementasi tiap browserKekurangan : 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 BekerjaGambar 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

1.4 Cara Penggunaan AJAXAwalnya 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;}

SourceCode 1.1 fungsi untuk membuat object XMLHttpRequest

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:

Tabel 1.1 xmlHttp.readyState

NilaiPenjelasan

0Request belum dibuat

1Request sedang dalam proses (biasanya kita menggunakan gambar loading dengan ini)

2Request sudah dikirim tapi hasil belum diterima

3Request sedang diproses dikomputer klien

4Request 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 = ''; } if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { obj.innerHTML = xmlHttp.responseText; } } xmlHttp.send(null); }

SourceCode 1.2 fungsi untuk mengambil file dan menampilkannya

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

SourceCode 1.3 fungsi untuk memanggil fungsi getpages

1.5 Tampilan Web Menggunakan AJAXBerikut merupakan tampilan dari penggunaan dari script AJAX. Apabila tombol form diklik maka getpages akan berjalan, dan akan memanggil file lalu menampilkannya.Gambar 1.2 Tampilan web sebelum AJAX dieksekusi

Setelah tombol diklik makan akan muncul file yang telah dipanggil sebelumnya dan menampilkannya.Gambar 1.3 Tampilan web setelah AJAX dieksekusi

1.6 Pengertian JSONJSON (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

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

Gambar 1.5 Tampilan cara penulisan JSON Array

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.Gambar 1.6 Tampilan susunan struktur dari nilai

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.7 Tampilan cara penulisan String

Angka adalah sangat mirip dengan angka di C atau Java, kecuali format oktal dan heksadesimal tidak digunakan.Gambar 1.8 Tampilan cara penulisan format angka

1.7 Penggunaan JSONContoh JSON Objectsvar JSON = {nama : 'I Gede Eddy Wiputra',umur : 20,alamat: 'jln.Pudak,Gg.Pudak Harum no.26 Batubulan',hobby: 'Bermain Musik'};document.write ("Nama : "+JSON.nama +"
"+"Umur : "+JSON.umur+"
"+"alamat : "+JSON.alamat+"
"+"Hobby : "+JSON.hobby);

SourceCode 1.4 fungsi menggunakan JSON Object

Berikut tampilan dari contoh JSON Objects

Gambar 1.9 Tampilan dari JSON Object

Contoh JSON Arrayvar 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 +"
"+"Umur : "+JSON.umur+"
"+"alamat : "+JSON.alamat+"
"+"Hobby : "+JSON.hobby);document.write ("

  1. ");for (var i=0; i