Ajax is an awesome technology that is driving a new generation of web apps, from maps.google.com to colr.org to backpackit.com. But Ajax is also a dangerous technology for web developers, its power introduces a huge amount of UI problems as well as server side state problems and server load problems.

Will you continue using Ajax? If you ask me, *I will * Some of the points that Alex mention are probably correct, but some are not. For example:

1. Not giving immediate visual cues for clicking widgets.

and

4. Blinking and changing parts of the page unexpectedly

This can be easily done using CSS. Simply prepare a message box using DIV attribute and hide it (display:none). Whenever Ajax is in progress, make it visible (display:block). This way, visitor know if there’s a progress going on, not unexpectedly anymore. My Ajax Tutorial also cover this technique.

For me, Ajax is wonderful. It’s not 100% secure right now, but again, it’s a wonderful programming technique. I’ll stick and continue using Ajax for now )

The Easy Ajax Implementation

For our study case, we’re going to make a simple voting/rating booth application. We’re going to make 2 files, one for the front-end (vote.php, handle the user interface) and one for the back-end (sendVote.php, handle the data saving and retrieval).

First, here’s the code for vote.php (we’ll explain this later)

[php]< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[/php]

And the second file, sendVote.php

[php]< ?php
echo $_GET['value'];
?>[/php]

Before we continue, let’s try it first by calling vote.php from your web browser. Notice that after you select the rating and hit Vote button, the rating you choose will be displayed on the texbox below.

Live Demo: http://www.funponsel.com/dev/ajax_vote/vote.php

In this first sample, the process is really simple. We haven’t process the rating value yet (no database involved), instead, we just send it back as an output for the back-end process. When you hit the Vote button, the JavaScript function, updateVote() will be called. In this stage, voteId and voteValue (rating value) are taken from the form and sent to sendVote.php as a parameter through XMLHttpRequest object.

The purpose of handleHttpResponse() function is to handle any change on the request status. When the status equal to 4 (readyState == 4), then the request process is over. Or it means that the back-end process already return output. After that, return output is taken from ResponseText attribute and then displayed on the textbox.

As already mention, there is no interaction with the database yet. Hey, we haven’t even create the database ) sendVote.php will simply take the parameter and return the value right away (echo $_GET['value'];.

What about getHTTPObject() function? Don’t bother with it The point is almost the same as what we’ve learned before on the first part, but with a little bit more twist ) So let’s just focus on the XMLHttpRequest process

Notice that in this first example we only use XHTML, a simple DOM, and XMLHttpRequest. Just like what I already said before on the first part. No need to worry about learning Ajax on the hard way (with all the complexity of XMLDOM and CSS), as the easy way already exists )

On the next page, we will modify our code above and start communication with the database.

Introduction

Ajax is the current rising star in the web development field. Several popular company already started using Ajax, including: Google (Gmail, GMaps, GSuggest, GGroups), Amazon (A9.com), Flickr, and Orkut.

Ajax is not a new technology. It’s a new developing approach, based on the following existing technologies:

• XHTML and CSS for standard presentation,
• DOM (Document Object Model) for dynamic and interactive presentation,
• XML and XSLT for data exchange and manipulation, and
• XMLHttpRequest for asynchronius data retrieval

The foundation of Ajax is XMLHttpRequest object. It was first implemented by Microsoft on Internet Explorer 5 as an ActiveX object. Later, Mozilla engineers developed a compatible native version for Mozilla 1.0 (and Netscape 7), followed by Apple on their Safari 1.2 browser.

In short, the purpose of this XMLHttpRequest object is to handle data request asynchronously in the background for any web application who need to exchange and manipulate data on-the-fly without reloading the page. In traditional data processing, user submits the data through form, browser sends the data to the server, then server return the output through a new page, so browser need to load that new page in order to display the result to user.

To see what Ajax looks like, just login to your GMail account (if you don’t have one, get it free here ), and check your inbox. You’ll see a “Loading” message on the top right of the screen. Then the message disappear, and a list of your inbox message is displayed. All of them happen without reloading the page. Compare the process with Yahoo! Mail or HotMail. Google’s GMail used Ajax, and that’s what you get with Ajax implementation. Cool, huh? )

On the next page, we will discuss more about XMLHttpRequest object.

Implementasi

Untuk percobaan, kita akan membuat sebuah aplikasi voting/rating booth sederhana. Secara umum, kita akan menyiapkan 2 buah file, yaitu sebuah file HTML (atau PHP) untuk presentasi ke layar dan sebuah file script PHP untuk melakukan proses backend (retrieve & save data).

File pertama, vote.htm

[html]< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[/html]

File kedua, sendVote.php

[php]< ?php

echo $_GET['value'];

?>[/php]

Sebelum dibahas, coba jalankan dulu dng cara memanggil file vote.htm. Perhatkan, pada saat Anda memilih nilai rating dan menekan tombol Vote, beberapa saat kemudian nilai tersebut akan muncul pada textbox di bawahnya.

Live Demo: http://www.funponsel.com/dev/ajax_vote/vote.php

Pada contoh pertama ini, proses berlangsung sangat sederhana. Pada saat tombol Vote ditekan, maka akan dilakukan pemanggilan function JS updateVote(). Dalam fungsi ini dilakukan pemanggilan thd file sendVote.php dng parameter id dan value yg diambil dari form. Proses pemanggilan dilakukan melalui obyek XMLHttpRequest.

Function handleHttpResponse bertujuan untuk menangani perubahan status request. Apabila status adalah 4, berarti proses telah selesai. Selanjutnya data akan diambil dari atribut ResponseText dan ditampilkan dlm textbox.

Script sendVote.php saat ini masih belum melakukan interaksi dng database. Prosesnya hanyalah menerima parameter value dan mengembalikannya sbg output. Itu sebabnya yg muncul pada textbox adalah nilai yg kita pilih.

Bagaimana dng function getHTTPObject()? Tidak perlu dipikir Intinya hampir sama dng fungsi yg ada pada bagian sebelumnya, hanya sedikit lebih detil (mbulet )

Perhatikan bahwa dlm contoh ini kita hanya menggunakan XHTML, DOM, dan XMLHttpRequest. Sesuai dng yg saya sebutkan sebelumnya DOM yg digunakan pun sangat sederhana, sekedar method getElementById saja.

Pada halaman selanjutnya, kita akan melakukan sedikit modifikasi untuk berkoneksi dng database.

Pendahuluan

Ajax adalah sebuah development approach yg saat ini sedang naik daun. Beberapa perusahaan yg sudah menggunakan Ajax, al: Google (GMail, GMaps, GSuggest, GGroups), Amazon (A9), Flickr, dan Orkut.

Ajax bukan sebuah teknologi baru, melainkan sebuah tehnik pengembangan aplikasi web dengan menggabungkan dan memanfaatkan beberapa teknologi yg sudah ada, yaitu:
- standard presentasi menggunakan XHTML dan CSS
- tampilan dinamis dan interaktif dengan menggunakan DOM (Document Object Model)
- pertukaran dan manipulasi data dengan menggunakan XML dan XSLT
- pengambilan data asinkron dengan menggunakan XMLHttpRequest

Pada prakteknya nanti, tidak semua teknologi di atas harus digunakan scr bersamaan. Yg wajib dipakai adalah XHTML, DOM, dan XMLHttpRequest. CSS adalah tambahan untuk lebih mempercantik tampilan dan interaksi dng user, sedangkan XML adalah untuk memformat data saja.

Dasar dari Ajax sendiri adalah obyek ActiveX XMLHttpRequest yg diimplementasikan oleh Microsoft pada IE5. Mozilla sendiri kemudian menyusul pada Mozilla 1.0 (Netscape 7) dan selanjutnya Apple pada Safari 1.2. Secara singkat, tujuan dari obyek ini adalah menangani pembuatan aplikasi yg dapat melakukan proses2 pertukaran dan manipulasi data XML scr on-the-fly tanpa perlu adanya proses reload halaman. Proses2 manipulasi data tradisional yg ada selama ini menggunakan konsep form, dmn apabila form di-submit, data dikirimkan, dan user akan dibawa ke halaman baru untuk melihat hasilnya. Dng memanfaatkan Ajax, khususnya XMLHttpRequest ini, user tidak akan dibawa ke halaman baru krn hasil dari proses submit akan langsung muncul di halaman yg sama.

Kalo bingung ngebayangin, coba login ke GMail (kalo belum punya GMail, klik link yg ada di signature-ku). Perhatikan baik2. Proses cek inbox, baca email, dsb, semuanya berlangsung tanpa ada proses loading halaman. Bahkan saat proses, akan muncul tulisan “Loading” di pojok kanan atas. Keren kan? Ya itulah salah satu contoh nyata pemanfaatan Ajax.

Bagian berikut akan membahas mengenai obyek XMLHttpRequest dan method2nya.