Lalu bagaimana bias lebih interactive dan attractive ?
Dengan AJAX, aplikasi web kita bias 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 bias 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 Http Request disitulah ajax bermain. Versi lengkapnya
Penjelasan :
Var xml Http=new XML Http Request();
membuat object Http Request yang akan digunakan untuk mengirim data ke server, untuk membuat object tersebut bias berbeda beda tergantung dari browsernya. Ada bagusnya kalian melakukan check dan ricek dahulu browser apa yang di gunakan, atau gunakan script dibawah untuk menemukan object yang tepat untuk browser pengguna.
Catatan :saya mengkopi script diatas dari aplikasi saya yang sudah berjalan, seingat 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 parameter, yaitu angka. Nantinya akan menggembalikan nilai kuadrat dari parameter yang dimasukan.
xml Http.on ready state change=function()
Disini akan menjalankan kode online fungsi di bawahnya, yang akan merekam kondisi apa saja yang terjadi disaat aplikasi dijalankan, contoh aplikasi hanya merekam kondisi status ready State sama dengan 4.
xml Http.ready State==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.get ElementById("texthasil").inner HTML=xml Http.response Text;
Kode ini menampilkan response dari server kedalam <span id="texthasil"></span>
No comments:
Post a Comment