Welcome to Dotnet Semarang Sign in | Join | Help

AJAX - Asyncronous JavaScript and XML

Pendahuluan
Asynchronous JavaScript and XML (AJAX) adalah teknik pembangunan web untuk membuat aplikasi web interaktif menggunakan paduan beberapa teknologi sebagai berikut:
  • HTML (HyperText Markup Language) digunakan dalam membuat halaman web dan dokumen-dokumen lain yang dapat ditampilkan dalam peramban (browser). HTML merupakan standar internasional dengan spesifikasi yang ditetapkan oleh World Wide Web Consortium (W3C). Versi terakhir saat tulisan ini dibuat adalah HTML 4.01.
  • Extensible HyperText Markup Language (XHTML), adalah bahasa penanda (markup) sebagaimana HTML, tetapi dengan gaya bahasa lebih baik.
  • Cascading Style Sheets (CSS) adalah sebuat bahasa stylesheet yang digunakan untuk memaparkan presentasi sebuah dokumen yang ditulis dalam HTML atau XML (termasuk beberapa variasi bahasa XML seperti XHTML dan SVG).
  • JavaScript adalah bahasa scripting kecil, ringan, berorientasi-objek dan lintas platform. JavaScript tidak dapat berjalan dengan baik sebagai bahasa mandiri, melainkan dirancang untuk ditanamkan pada produk dan aplikasi lain seperti peramban web.
  • DOM (Document Object Model) adalah sebuah API (Application Program Interface) untuk dokumen HTML dan XML. DOM menyediakan representasi dokumen secara terstruktur, dimungkinkan untuk  merubah isi dan presentasi visual. Pada dasarnya, DOM menghubungkan halaman web dengan script atau bahasa pemprograman.
  • XML (Extensible Markup Language) adalah bahasa penanda untuk keperluan umum yang disarankan oleh W3C untuk membuat bahasa penanda keperluan khusus. Keperluan utama XML adalah untuk membagi data antar sistem yang berbeda, sebagian sistem terhubung melalui Internet.
  • Extensible Stylesheet Language Transformations (XSLT) adalah sebuah bahasa berbasis-XML untuk transformasi dokumen XML. Walaupun proses merujuk pada transformasi, dokumen asli tidak berubah melainkan dokumen XML baru dibuat dengan basis isi dokumen yang sudah ada. XSLT biasanya digunakan untuk merubah skema XML ke halaman web atau dokumen PDF.
  • Objek XMLHttpRequest untuk melakukan pertukaran data secara asinkron dengan peladen (server) web. Beberapa kerangka-kerja Ahax dan dalam beberapa situasi, objek IFrame digunakan selain objek XMLHttpRequest untuk melakukan pertukaran data dengan peladen web.
Perpaduan teknologi-teknologi tersebut dapat meningkatkan kinerja aplikasi web dan lebih responsif terhadap aksi pengguna sehingga dapat berjalan lebih cepat, pemutakhiran antarmuka pengguna secara berkala tanpa memuat kembali keseluruhan halaman.

Penggunaan Dasar
Dua keistimewaan Ajax adalah dapat:
  • Membuat permintaan kepada peladen tanpa membuat kembali halaman.
  • Mengurai dan bekerja dengan dokumen XML.
1. Membuat Permintaan HTTP (HTTP Request)
Untuk membuat permintaan HTTP kepada peladen menggunakan JavaScript, diperlukan sebuah klas yang menyediakan fungsi-fungsi ini. Seperti sebuah klas yang ada dalam Internet Explorer yaitu objek ActiveX, kemudian disebut XMLHTTP. Kemudian Mozilla, Safari dan beberapa peramban mengikutinya, menerapkan sebuah klas XMLHttpRequest yang mendukung method dan sifat (properties) objek asli Microsoft ActiveX.
Untuk membuat instance (objek) klas lintas-peramban (cross-browser), dapat dilakukan dengan:

if ( window XMLHttpRequest ) { // Mozilla, Safari, ...
    http_request = new XMLHttpRequest ();
} else if ( window ActiveXObject ) { // IE
    http_request = new ActiveXObject ("Microsoft XMLHTTP");
}

Beberapa versi peramban Mozilla tidak bekerja dengan baik jika tanggapan (response) dari peladen tidak mengandung kop (header) mime-type XML. Untuk memenuhi kebutuhan ini, panggil method untuk mengabaikan kop yang dikirim oleh peladen.

http_request = new XMLHttpRequest();
http_request overrideMimeType(’text/xml’);

Setelah itu, daftarkan fungsi JavaScript yang menangani tanggapan dari peladen. Setting sifat onreadystatechange objek untuk nama fungsi Javascript yang disiapkan untuk mengerjakan proses tanggapan

http_request onreadystatechange = namaFungsi ;

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 saat program berjalan dan mendefinisikan tindakan untuk melakukan proses, seperti berikut:

http_request onreadystatechange = function(){
    // do the thing
};
Selanjutnya, setelah deklarasi dan segera setelah menerima tanggapan, kemudian buat permintaan. Panggil
method open() dan send() dari klas permintaan HTTP seperti kode berikut:

http_request open (’GET ’, ’http ://www.example.org/some file’, true );
http_request send (null);

  • Parameter panggil pertama dari open() adalah method permintaan HTTP GET, POST, HEAD atau method lain yang didukung oleh peladen. Gunakan huruf kapital sebagaimana standar HTTP. Untuk informasi lebih lanjut mengenai method permintaan HTTP dapat dilihat pada spesifikasi W3C.
  • 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 galat ’permision denied’ ketika melakukan panggilan open().
  • 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.
Parameter untuk method send() dapat berupa sembarang data untuk dikirim ke peladen saat mengirimkan permintaan POST. Data harus dalam format query string, seperti:

name=value&anothername=othervalue&so=on

Catatan bahwa jika ingin mengirim (POST) data, ganti tipe MIME permintaan menggunakan bari berikut:

http_request setRequestHeader(’Content-Type’, ’application/x-www-form-urlencoded’);

Bila tidak, peladen akan mengabaikan data yang dikirim.

2. Penanganan Tanggapan Peladen
Ingat bahwa ketika permintaan dikirim, fungsi JavaScript telah disediakan untuk menangani tanggapan.

http_request onreadystatechange = namaFungsi;

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.

if ( http_request . readyState == 4) {
    // everything is good , the response is received
} else {
    // still not ready
}

Berikut adalah daftar nilai status readyState
  • 0 (tidak diinisialisasi)
  • 1 (dalam proses memuat)
  • 2 (telah dimuat)
  • 3 (interaktif)
  • 4 (lengkap)
3. Contoh Sederhana
Tulis bagian program menjadi satu permintaan HTTP sederhana. JavaScript akan meminta sebuah dokumen HTML yaitu test.html yang hanya mengandung tulisan ”Saya adalah percobaan.” dan kemudian memanggil alert() dengan isi dari berkas test.html

<script type ="text/javascript" language="javascript">
var http_request = false;
function makeRequest(url) {
    http_request = false ;
    if (window XMLHttpRequest) { // Mozilla, Safari ,...
        http_request = new XMLHttpRequest();
        if (http_request overrideMimeType) {
            http_request overrideMimeType(’text/xml’);
            // See note below about this line
        }
    } else if (window ActiveXObject) { // IE
        try {
            http_request = new ActiveXObject(" Msxml2 XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft XMLHTTP");
            } catch (e) {}
        }
    }
    if (!http_request) {
        alert (’Giving up :( Cannot create an XMLHTTP instance’);
        return false ;
    }
    http_request onreadystatechange = alertContents;
    http_request open(’GET’, url, true);
    http_request send(null);
}
function alertContents() {
    if (http_request readyState == 4) {
        if ( http_request status == 200) {
            alert ( http_request responseText);
        } else {
            alert (’There was a problem with the request.’);
        }
    }
}
</ script >
<span
    style="cursor: pointer; text-decoration: underline"
    onclick ="makeRequest(’test.html’)">
        Make a request
</span >

Pada contoh di atas:
  • Ketika pengguna menekan klik pada taut ”Make a request” maka fungsi makeRequent dipanggil dengan parameter nama berkas HTML test.html dalam direktori yang sama.
  • Permintaan dibuat dan kemudian kejadian onreadystatechange melakukan eksekusi alertContents()
  • alertContents() memeriksa jika tanggapan telah diterima dalam keadaan baik dan kemudian tampilkan isi berkas test.html menggunakan fungsi alert()
Contoh di atas dapat diuji dengan klik di sini dan juga berkas test dapat dilihat di sini. Catatan: baris http_request.overrideMimeType(’text/xml’); di atas mengakibatkan galat Console pada Firefox 1.5b seperti tercantum dalam dokumen pada https://bugzilla.mozilla.org/show_bug.cgi?id=311724 jika halaman yang dipanggil dengan XMLHttpRequest bukan XML yang valid (seperti teks datar).

4. Bekerja dengan Tanggapan XML
Pada contoh sebelumnya, setelah tanggapan dari permintaan HTTP diterima, digunakan sifat responseText dari objek permintaan yang mengandung isi berkas test.html. Sekarang, coba gunakan sifat responseXML Buat dokumen XML yang valid dengan nama test.xml seperti contoh di bawah:

<? xml version =" 1.0 " ?>
<root >
    Saya adalah percobaan .
</ root >

Ganti baris permintaan pada script dengan:

...
onclick =" makeRequest (’ test . xml ’)">
...

Kemudian pada alertContents() ganti pada baris alert(http_request.responseText); dengan:

var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName(’root’).item(0);
alert (root_node.firstChild.data );

Perintah tersebut untuk mengambil objek XMLDocument yang diberikan oleh responseXML dengan menggunakan method DOM untuk mengakses data dalam dokumen XML.

AJAX Framework
AJAX Framework adalah kerangka kerja lintas-peramban yang memungkinkan pengembang untuk membangun halaman web secara cepat dengan kemampuan untuk memanggil webservices dan halaman web menggunakan JavaScript tanpa melakukan submit pada halaman aktif.
AJAX Framework merupakan komponen JavaScript dibawah lisensi GNU yang dapat diambil secara cuma-cuma di http://sourceforge.net/projects/glm-ajax
Komponen ini dapat digunakan pada semua jenis halaman web baik berupa HTML biasa maupun aplikasi lain seperti (PHP dan ASP/ASP.NET). Untuk menggunakan AJAX Framework, cukup tambahkan <SCRIPT language="JavaScript"href="ajax/AJAX.js"></SCRIPT> pada <HEAD> dokumen.

AJAX Framework dapat dipanggil dengan mendeklarasikan instance klas seperti pada contoh berikut:

var ajax = new AJAX ();

Untuk memanggil webservices gunakan method callService() dan untuk memanggil halaman gunakan callPage(). Method callService() akan melakukan invoke kepada webservice dan mengembalikan isi tanggapan berupa dokumen XML. Method callPage() akan memanggil halaman dan mengembalikan isi dokumen HTML.

Contoh callPage() :
function pageCallback(response){
    alert(response);
}
var ajax = new AJAX ();
ajax callPage("mypage.html", pageCallback);

Contoh callService() :
function serviceCallback ( response ){
    alert ( response );
}
var ajax = new AJAX ();
ajax.callService("MyWebService.asmx","MyMethodToCall",serviceCallback);

Contoh callService() dengan parameter :
function serviceCallback ( response ){
    alert ( response );
}
var ajax = new AJAX ();
/* paramter ditambahkan pada akhir method callService dengan pasangan kunci=nilai */
ajax.callService("MyWebService.asmx", "MyMethodToCall", serviceCallback, "par1=hello", "par2=world");

Contoh callService() dengan namespace sendiri :
function serviceCallback ( response ){
    alert ( response );
}
var ajax = new AJAX ();
/* set namespace baru untuk menggunakan dengan webservice */
ajax.setNameSpace("http://mynamespaceuri/");
ajax.callService("MyWebService.asmx","MyMethodToCall",serviceCallback);

Contoh penanganan galat :
/* Tetapan awal galat akan ditampilkan. Untuk menyembunyikannya
lakukan redirect terhadap fungsi tersebut. */
function myErrorHandler(error){
    alert(error);
}
var ajax=new AJAX ();
ajax.onError = myErrorHandler;

Published Tuesday, May 02, 2006 10:33 AM by cahnom
Attachment(s): ajax.pdf

Comments

No Comments
Anonymous comments are disabled