Tutorial AJAX, teknik membuat aplikasi web lebih interactive


Sudah lumayan lama saya menggunakan aplikasi web yang menggunakan AJAX, tetapi baru sekarang saya peduli dan ingin tahu lebih dalam tentang AJAX. Jadi saya coba coba browsing sana sini untuk mendapat informasi lebih lanjut mengenai AJAX. Ini adalah rangkuman yang saya dapat dari perjalanan saya untuk mengerti AJAX, saya tulis dalam bahasa Indonesia saja yah. Apa sih AJAX itu ?

AJAX adalah suatu teknik untuk membuat aplikasi web kita menjadi interactive dan attractive, jadi AJAX bukanlah suatu bahasa pemrograman. Btw AJAX itu kependekan dari Asynchrounous JavaScript and XML.

Lalu bagai mana bisa lebih interactive dan attractive ?

Dengan AJAX, aplikasi web kita bisa langsung berkomunikasi dengan server untuk meminta sebuah data atau informasi tanpa aksi dari user. Jadi tanpa reload halaman atau klik tombol submit atau apapun, user dari aplikasi web bisa kita beri beragam informasi atau hal hal lain untuk memperindah aplikasi web kita.

Perlu di ingat bahwa ajax hidup berdasarkan web standard yang sudah ada seperti HTML, JavaScript dan web standard lainnya yang saya gak tau. Jadi ajax ini kemungkinan sudah didukung oleh banyak browser ternama di dunia internet, tapi masih ada kemungkinan ajax tidak jalan dibeberapa browser lawas atau yang bandel tidak mengikuti standard.

Btw detail spec saya:
1. Browser Firefox 2.0
2. Os Windows Vista

Rencananya kita akan membuat aplikasi kalkulator kuadrat, sesaat user memasukan sebuah angka maka sesaat itu juga aplikasi langsung mengembalikan nilai kuadratnya.

Pertama yang kita harus lakukan adalah membuat user interface aplikasi kita dulu. Rencananya di aplikasi kita ini akan ada sebuah inputan untuk meminta data dari user, yang nantinya langsung memberikan hasil secara tiba tiba.



Penjelasan :
<input type="text" name="angka"> adalah kode untuk membuat inputan
<span id="texthasil"></span> adalah tempat untuk mencetak hasil balasan dari server

Kedua kita akan buat file php yang akan mengembalikan nilai kuadrat dari inputan user, kebetulan di computer saya hanya ada server php jadi saya menggunakan yang seadanya di computer saya. Untuk anda yang terbiasa atau mempunyai banyak pemrograman web lain selain php dipersilahkan mencoba sendiri.



Catatan : nama file php diatas saya namakan serv.php

Ketiga kita akan membuat fungsi javascript yang menggunakan object HttpRequest disitulah ajax bermain. Versi lengkapnya



(klik untuk melihat lebih lengkap)

Penjelasan :

Var xmlHttp=new XMLHttpRequest();

membuat object HttpRequest yang akan dugunakan untuk mengirim data ke server, untuk membuat object tersebut bisa brbeda beda tergantung dari browsernya. Ada bagusnya kalian menlakukan check dan ricek dahulu browser apa yang di gunakan, atau gunakan script dibawah untuk menemukan objectr yang tepat untuk browser pengguna.



Catatan : saya mengkopi script diatas dari aplikasi saya yang sudah berjalan, seinget saya script itu juga saya copy dari suatu tempat, tapi sayangnya saya lupa. X)

var url="serv.php?angka="+angka;

Aplikasi php saya yang meminta inputan sau parameter, yaitu angka. Nantinya akan menggembalikan nilai kuadrat dari parameter yang dimasukan.

xmlHttp.onreadystatechange=function()

Disini akan menjalankan kode inline fungsi di bawahnya, yang akan merekam kondisi apa saja yang terjadi di saat aplikasi dijalankan, contoh aplikasi hanya merekam kondisi status readyState sama dengan 4.

xmlHttp.readyState==4

ini menyatakan aplikasi sukses mengembalikan nilai, dibawah adalah beberapa kondisi yang sering saya gunakan untuk aplikasi saya.

Status Keterangan
2 Request sudah dikirim
3 Request dalam proses
4 Request komplit

document.getElementById("texthasil").innerHTML=xmlHttp.responseText;

Kode ini menampilkan response dari server kedalam <span id="texthasil"></span>

Ha ha ha ha selesai juga baca tutorial saya yang membosankan :p , terimakasih sudah membaca dan jangan tulis komentar kalau ada saran kritik cercaan dan makian.

Share this:

CONVERSATION

26 comments:

  1. mana mana bagi filenya... saya ra mudeng ajax, belajar dulu ah sama puput...

    BalasHapus
  2. Makasih sharenya mas, bagus artikelnya. Tapi gimana kalau browsernya ga support ajax mas?misal IE dibawah 6. Berarti aplikasi yg kita bangun harus ada dua versi ya, yg support ajax dan tidak.Mungkin seperti gmail atau yahoomail yg versi baru. Saya juga coba modify Sajax menjadi jqSajax, jadi kita bisa memanggil fungsi/method di PHP lewat javascript dg style jQuery. Gimana mnrt anda?

    BalasHapus
  3. waduh pusing nie bacanya... :D

    BalasHapus
  4. saya taunya AJAX itu klub sepak bola dr belanda.. kodenya banyak amat put.. bingung hehee..

    BalasHapus
  5. wew.. rumit yah. masih newbie nih mohon bimbingan :)

    BalasHapus
  6. @nur
    mbak nur bisa aja nie, mau file apa mbak, mp3 atau avi :p

    @winoto
    untuk browser yang lawas biasanya cuma saya kasih pesan aja sie,
    saya blom nyentuh jquery tapi saya liah di web anda, bagus ya kalo bisa begitu, kita bisa langsung call method di php nya,

    @zee
    jangan pusing kak, ini gak pake hipnotis kok

    @dee
    saya juga taunya duu gitu de, cuma ajax si klub

    @panda
    silahkan, dengan senang hati :)

    BalasHapus
  7. waduh, saya kurang mudeng AJAX, oke deh, makasih untuk pelajaran hari ini. Saya mau menelaahnya dulu.. makasih mas atas tipsnya..

    BalasHapus
  8. adoooooh gw blogging biar lepas dari koding project skripsi gw yg gag kelar2 eh kesini nemu HTML lageeee...ya olooooh...
    mata gw bedarah..hehehehehe
    eh eh put ada post baruuu hehehe...
    eh eh put gw link blog lo yaaaa....
    link balik

    BalasHapus
  9. @gempur
    sama2 mas gempur

    @diana
    wekekekk nemu HTML lagi...
    gak kan pergi dikejar HTML (judul film)

    okay tnks ya
    udah di link balik juga nie

    BalasHapus
  10. ga pakai firefox 3.0.1 ^^ lebih ringan dan bagus lho~

    BalasHapus
  11. oke bakalan saya coba dulu, hehe...
    semoga saja saya bisa, thanks

    salam kenal, cisthouse™

    BalasHapus
  12. @phitsu
    blom coba, nanti kalo udah bosen ama yg 2, lagi pula males downloadnya :)

    @cisthouse
    ok makasih,
    salam kenal

    BalasHapus
  13. mbak puput, punya ref validasi form pake ajax ngak? or bikin webmail pake ajax

    BalasHapus
  14. @captainnaruto
    validasi lebih bagus pakai javascript biasa aja, gak perlu koneksi ke server, tapi kalau mau pakai cara yg di atas juga bisa, setelah server dapet datanya, kembaliannya bisa berupa notifikasinya
    hmmm bikin webmail, blom pernah tuh, sory gk bisa kasi ref

    BalasHapus
  15. he he masih di IT nih
    gue sih pake Jquery

    JQUERY -> WRITELESS DO MORE

    BalasHapus
  16. maak,... ora ngerti...

    BalasHapus
  17. cc putri ato kk putri siapa aja deh mo nanya itu jlninnya begimana jadinya misal udah punya coding seperti di atas? yg php kan d save.php d htdocs kan, nah yg .htm tuh dikemanain terus kok ada 2 ya,2 2 nya minta inputan kan? maklum masih newbie lagi mo belajar bny nih cc >.< jd nanya2nya bny ya heheh

    BalasHapus
  18. @anonim
    boleh aja di gabung, file HTML ada di sebelah file PHP nya, harus di server yang bisa php

    nah inputannya(TextBox) ada di file HTML, nanti dari situ akan manggil file PHP dan mengembalikan nilai ke file HTML. berdasarkan aksi tertentu

    BalasHapus
  19. aq br belajar nih mas puput, makasih tutorialnya, kalo ada yg lain posting ya, :)

    BalasHapus
  20. ah gak asik .. file buat download nya dong .. yg lengkapan lagi .. hhe piss ^_^

    BalasHapus
  21. @diane,
    makasih juga udah baca..

    @frame hilang
    hehehe bisa download file gambarnya kok :)

    @fuad
    thanks

    BalasHapus
  22. wow,membantu bgt nih postingannya,tengkyu.
    tp kebetulan sy dpt trouble nih mas,
    sy kebingungan menggunakan ajax untuk ngumpetin form, contohnya form education di fesbuk,kan bs add education (begitu di klik add education,br deh formnya muncul). itu gmn ya , sy ngulik dari fesbuk tp ya ga mudeng jg nih, tlg share dong contoh skripnya... :(
    makasih bgt lho mas put

    BalasHapus