Membuat Metode XMLHTTPRequest untuk POST dan GET secara sederhana

Biasanya cuma GET aja yang dibuat pada aplikasi Ajax. tapi ada beberapa kasus, dimana metode POST juga diperlukan dalam membuat request ajax.  Disini aku mau coba nulis cara POST dan GET pake xmlhttprequest.

Kenapa memakai XMLHttpRequest()? karena bagi saya ini sudah cukup mudah bagi pemula. sebenernya masih ada lagi methode2 lain yang memiliki fungsi yang sama dan juga memiliki kelebihan antara lain bisa jalan di beberapa browser. Untuk kali ini, saya batasi lingkupnya sampai pengenalan XMLHttpRequest() aja, ya..

Membuat methode XMLHttpRequest() cukup mudah, pertama2 kita inisialisasi dengan perintah

var http = new XMLHttpRequest();

Untuk metode GET menggunakan kode dibawah ini :


var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("GET", url+"?"+params, true);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(null);


sedangkan untuk metode POST menggunakan metode dibawah ini :


var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);


Disini ada perbedaan antara XMLHttpRequest yang digunakan untuk POST dan GET, dalam fungsi open() argumen pertama sudah berbeda, yaitu POST dan GET, dan perhatikan juga ada perbedaan dalam penulisan argumen kedua.

Untuk fungsi GET, di argumen kedua diisi dengan nama url dengan parameter yang dipisahkan dengan karakter ‘?’.

http.open("GET",url+"?"+params, true);

sedangkan untuk fungsi POST, argumen kedua hanya diisi dengan nama url, dan parameter nya akan dikirim nanti.

http.open("POST", url, true);

Dalam request POST, beberapa http header harus diset terlebih dulu, antara lain :


http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");


dengan kode diatas kita mengirim request post dengan format isian form. (seperti kita buat form submit di html). Kita juga memberikan panjang dari parameter yang kita kirim.


http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}


Dari kode atas kita set handler event ‘ready state’. Ini adalah handler yang sama kita gunakan di GET request. Kamu dapat menggunakan http.responseText untuk dimasukan ke div di html.

http.send(params);

akhirnya kita kirim parameternya, url yang kita isikan tadi, hanya akan di panggil setelah baris ini dipanggil. Di request GET, kita isikan argumen dari send() dengan nilai null. Namun di POST, data yang akan dikirim, dikirim sebagai argumen di fungsi send(). Jadi variable params yang dideklarasikan di baris kedua dengan nilai “lorem=ipsum&name=binny” . Jadi kita kirim 2 parameter berisi id lorem dengan nilai ipsum dan id name dengan nilai binny.