Oldschool AJAX Post-Get

Dulu pernah iseng membuat posting tentang request-post dengan AJAX tanpa jQuery alias menggunakan javascript konvensional. Ternyata cara konvensional jauh lebih panjang, tetapi tetap menarik. Toh dengan begitu saya menjadi paham asal muasal http request-post dengan ajax yang selama ini digunakan. Baik dengan memanfaatkan $.post dan $.get milik jQuery.

Saya rasa $.post dan $.get pastinya extend dari $.ajax. Nah tapi di atasnya lagi ada Class sakti berdarah murni milik browser yaitu XMLHttpRequest hehe. Intinya sama, yaitu kita request secara background ke server dengan method POST or GET. Lalu setelah request disampaikan akan mendapat response. Berikut adalah contoh kita request ke suatu file lalu mendapatkan responsenya.

File yang digunakan adalah text file yang berisikan string “oi ini dari file yah!”. Filenya saya simpan dengan nama test.txt. Selanjutnya adalah coding yang memanggil file tersebut. Jangan kaget, karena agak sedikit lebih panjang hehe. Cek coding berikut ini :

<html>
	<head>
		<title>AJAX Pure &amp; Basic</title>
	</head>
	<body>
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0A%09%09function%20fnTekan()%20%7B%20%0A%09%09%09var%20hasil%20%3D%20false%3B%20%0A%09%09%09var%20tampil%20%3D%20%22%22%3B%20%0A%09%09%09if(window.XMLHttpRequest)%20%0A%09%09%09%09hasil%20%3D%20new%20XMLHttpRequest()%3B%20%0A%09%09%09else%20%0A%09%09%09%09hasil%20%3D%20new%20ActiveXObject(%22Microsoft.XMLHTTP%22)%3B%20%0A%09%09%09hasil.open(%22POST%22%2C%20%22test.txt%22%2Ctrue)%3B%20%0A%09%09%09hasil.onreadystatechange%20%3D%20function()%7B%20%0A%09%09%09%09%09if(hasil.readyState%20%3D%3D%204)%20%0A%09%09%09%09%09%09tampil%20%3D%20hasil.responseText%3B%20%0A%09%09%09%09%09document.getElementById(%22loadsini%22).innerHTML%20%3D%20tampil%3B%20%0A%09%09%09%09%7D%20%0A%09%09%09hasil.send(null)%3B%20%0A%09%09%7D%0A%09%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
		<input type="button" value="Tekan" onclick="javascript:fnTekan();" />
		<span id="loadsini"></span>

	</body>
</html>

Variabel hasil adalah response dari request ke server dengan class XmlHttpRequest. Untuk post ke server menggunakan method open. Untuk mendapatkan responsenya, karena file yang kita open atau kita request berisikan text atau string maka dapat menggunakan function responseText untuk menampung return valuenya. Biasa dalam jQuery kita mengenal “success” dan “error” sebagai callback. Nah untuk cara oldschool kita dapat menggunakan lambda function terhadap onreadystatechange sebagai callback. Jika response statenya bukan 4 biasanya adalah gagal. Jika 4 berarti berhasil.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.