Ajax dengan Prototype

pasti udah pada tau ajax kan, jadi saya baru belajar ajax menggunakan prototype, sebuah javascript framework. silahkan download dulu.

untuk diketahui prototype menawarkan 3 object untuk bekerja dengan ajax yaitu : Ajax.PeriodicalUpdater ,
Ajax.Request, Ajax.Updater.

kita akan mencoba salah satu object yaitu Ajax.Updater.

disini saya akan membuat sebuah form yang akan menampilkan lokasi dan description.
dengan menggunakan Ajax.Updater dari prototype.

mulai dengan membuat form.

<h3>Location Form</h3>
<div id="content"></div>
<form>
    Location:
    <label>
    <input name="location" type="text" id="location" />
    </label>

Description
      <label>
      <input name="description" type="text" id="description" />
      </label>

      <label>
      <input name="btnSave" type="button" id="btnSave" value="Save" onclick="insertLocation();"/>
      <!-- apabila di click akan menexecute fungsi insertLocation() -->
      </label>
  </form>

lalu kita mulai dengan meload library dari prototype di header html kita dengan code:

<script type="text/javascript" src="prototype.js"> </script>

setelah di load kita bisa langsung memproses langsung dengan code javascripts.

<script type="text/javascript" src="prototype.js"> </script>

function insertLocation(){
   new Ajax.Updater('content', 'savelocation.php', {
     method: 'post',
	 parameters: {location:$F('location'), description:$F('description') },
     insertion: Insertion.Bottom
   });

}

simple bukan?, kita cukup memanggil Ajax.Updater dengan perintah
new Ajax.Updater(container, url[, options])

dimana container adalah div id yang akan kita jadikan tempat untuk menaruh data. dan option bisa dilihat di dokumentasi prototype. disini saya memakai method, parameters dan insertion.

server side nya gimana ? ya gampang aja. tinggal buat savelocation.php dan isi dengan code untuk menyimpan data.