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 pelade

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;