Ajax & PHP : Mengirim Data Ke Web Server

Tutorial Ajax & PHP : Mengirim Data Ke Web Server akan menjelaskan bagaimana mengirim data ke web server menggunakan Ajax (XMLHttpRequest). Pada website yang tidak menggunakan ajax, untuk mengirim data ke server, web browser akan membuat request ke document di server dengan method POST dan setidaknya akan mengirim header Content-type: application/x-www-form-urlencoded. Jika menggunakan Ajax maka anda akan mengunakan method open() dari XMLHttpRequest untuk membuka koneksi ke server. Menggunakan method setRequestHeader()  untuk menentukan header yang akan dikirim web server, dan yang terakhir menggunakan method send() untuk mengirim request ke server dan sekaligus mengirim data ke server.

Untuk mengirim data ke web server menggunakan Ajax (XMLHttpRequest), anda dapat menggunakan method POST. Sebagai contoh jika anda memiliki Sebuah HTML form seperti di bawah.

 
First name :

Last name :

Code Form :

<form id="form1" name="form1" method="post" action="handle_data.php">
First name :
<input name="first_name" type="text" id="first_name" />
<p>Last name :
<input name="last_name" type="text" id="last_name" />
<input type="button" name="Button" value="Submit" />
</p>
</form>

Pada website yang tidak menggunakan Ajax, web browser akan mengirim nilai-nilai dari element form di atas dan mengirim header "Content-Type: application/x-www-form-urlencoded" ke web server. Jika menggunakan Ajax anda dapat menggunakan script di bawah untuk mengirim nilai-nilai dari element form di atas dan juga mengirim header ke server.

//membentuk XMLHttpRequest menggunakan function 
//yang telah dibuat pada tutorial sebelumnya 
var xmlhttp=getXMLHttpRequet(); 
function sendData(handlePage,ElementID){ 
//mengambil nilai dari element form 
var first_name=document.getElementById('first_name').value; 
var last_name=document.getElementById('last_name').value; 
var obj=document.getElementById(ElementID); 
obj.innerHTML="Sending Data Please wait...."; 
if(xmlhttp.readyState==4 || xmlttp.readyState==0){
 xmlhttp.open("POST",handlePage,true);  
 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
 xmlhttp.onreadystatechange=function(){ 
 if(xmlhttp.readyState==4 && xmlhttp.status==200){
 obj.innerHTML=xmlhttp.responseText; 
 } 
} 
var dataToSend="first_name="+first_name; 
dataToSend+="&last_name="+last_name; 
xmlhttp.send(dataToSend); } }

function di atas mengambil dua buah parameter, yaitu : handlePage dan ElamentID. handlePage adalah document atau file di web server yang akan meng-handle data yang dikirim, ElementID adalah ID element HTML tempat menampilkan response dari web server. Pertama yang dilakukan oleh function di atas adalah mengambil nilai dari element-element form, kemudian menampilkan text "Sending Data Please wait....", membuka koneksi ke web server menggunakan method POST. Selanjutnya men-set header yang akan dikirim ke server dengan method setRequestHeader, mengirim nilai-nilai dari element form dengan method send, dan yang terakhir menampilkan response dari web server pada saat readyState=4 (complete) dan status=200(OK).

Contoh Ajax Mengirim Data ke Web Server

Untuk lebih memperjelas dan memperdalam pemahaman anda, anda akan diajak berlatih mengirim data ke web server dengan Ajax dan menggunakan function yang telah dijelaskan di atas. Latihan ini akan dijelaskan menggunakan video.


Download Video

Download Tutorial

Daftar Rujukan

Babin lee. 2007. Beginning Ajax with PHP: From Novice to Professional. United State : Apress.
Ullman Larry. 2008. Building a Web Site with Ajax: Visual QuickProject Guide. United State: Peachpit Press