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.

2 thoughts on “Ajax dengan Prototype

  1. Mohon penjelasan nya mengenai apa itu Ajax.PeriodicalUpdater ,
    Ajax.Request, Ajax.Updater dan bagaimana cara kerja masing-masing objek agar pembaca bisa lebih paham. Terima kasih

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s