Transcript PHP - AJAX - Febby Dian Anggraini

PHP - AJAX
Apakah Ajax ?



Singkatan dari Asynchronous JavaScript and XML
AJAX, terdiri dari HTML, Javascript, DHTML dan DOM yang
kemudian digabungkan dengan bahasa pemograman web
di sisi server seperti PHP dan ASP, sehingga membentuk
suatu aplikasi berbasis web yang interaktif.
Dengan AJAX, Javascript dapat langsung berkomunikasi
dengan server dengan menggunakan objek
XMLHttpRequest. Dengan objek ini, javascript dapat
melakukan transaksi data denga server web, tanpa harus
me-reloading halaman web tersebut secara keseluruhan.
Berikut adalah teknologi yang termasuk dalam aplikasi
AJAX :
HTML yang digunakan untuk membuat Web forms dan
mengindentifikasikan filed-field yang akan digunakan
dalam aplikasi.
• JavaScript adalah kode inti untuk menjalankan aplikasi
Ajax dan untuk membantu memfasilitasi komunikasi
dengan aplikasi .
• DHTML, atau Dynamic HTML, membantu untuk membuat
form atau web dinamis. Dengan menggunakan <div>,
<span> dan elemen HTML dinamis lainya.
• DOM, Document Object Model, akan digunakan (melalui
kode JavaScript) untuk bekerja dengan kedua struktur
dari HTML dan XML anda yang dalam beberapa kasus
berasal dari server.
•
Perbandingan web aplikasi
tradisional dengan AJAX
XMLHttpRequest Object
Membuat objek XMLHttpRequest.
Dengan objek XMLHttpRequest, suatu halaman web dapat
membuat request ke, dan mendapatkan respon dari server
web tanpa me-reload halaman secara keseluruhan. User akan
selalu tetap dengan halaman yang sama. Bahkan user tidak
akan tahu kalau ada data yang dikirim dan diterima dari
server, karena javascript melakukan transaksi data di balik
layar.
Membuat objek XMLHttpRequest untuk beberapa browser.
XMLHttpRequest Methods
1. abort() : menghentikan request yang sedang
berjalan.
2. getAllResponseHeader(): untuk memperoleh semua
informasi dari semua header HTTP yang sedang
diberikan oleh server.
3. getResponseHeader("headername") :
memperoleh isi dari bagian sebuah header;
contoh : untuk memperoleh ukuran ari dokume yag
sedang direquest, gunakan
getResponseHeader(“Content-Length”)
4. open ("method","URL","async","username","pswd") :
untuk membuka koneksi dengan dokumen yang ada di
server. Method yang bisa digunakan : GET atau POST.
5. setRequestHeader("label","value") : untuk menentukan
header pada saat melakukan request. Hanya dapat
dipanggil setelah method open digunakan dan sebelum
method send dipanggil.
6. send("content") : untuk mengirim request ke server. Jika
request dikirim secara asynchronous, maka response akan
datang secepatnya. jika tidak maka respon akan datang
setelah response diterima oleh web browser.
XMLHttpRequest Properties
1. Onreadystatechange : Properti ini adalah sebuah
event handler untuk men-trigger sebuah blok kode
atau function, ketika state (sampai dimana proses request
berlangsung pada waktu tertentu) berubah. Contoh, untuk
menampilkan pesan (alert) pada saat state telah berubah
menjadi complete state.
2. readyState : berisi informasi state dari object
XMLHttpRequest pada saat properti ini digunakan (0:
uninitialized, 1: loading,
2: loaded, 3: interactive, 4: complete).
Properti ini bisa digunakan untuk menangani kesalahan,
memanggil blok kode atau function untuk
setiapreadyState. Misalnya, untuk menampilkan text
"loading" pada saat readyState sama dengan 1 (fase
loading) dan memanggil sebuah function pada saat
readyState=4 (complete).
3. responseText : Properti ini akan dihasilkan pada saat request
telah berhasil/complete. Misalnya : melakukan request terhadap
sebuah document di server, respon dari server akan disimpan pada
properti ini. Biasanya properti ini digunakan untuk mengganti
properti innerHTML dari sebuah element HTML.
4. responseXML : Properti ini sama dengan responseText, tetapi
respon yang dihasilkan dalam format XML.
5. Status : Properti ini memberitahukan response code yang
dihasilkan dari direquest yang dilakukan. Misalkan, jika file yang
direquest ke server tidak ditemukan maka status akan berisi 404.
6. statusText : Properti ini merupakan textual dari properti
status, misal status sama dengan 404 maka statusText akan sama
dengan Not Found.
Mengirim request ke server
Pada elemen <select> terdapat kode
onchange=ambildata(this.value), yang artinya apabila ada event
perubahan terhadap combo box, dengan cara memilih salah satu
option, maka segera eksekusi fungsi ambildata(nip) yang
terdapat di javascript, dan kode this.value berfungsi untuk
mengambil nilai dari option yang dipilih.
Fungsi ambildata(nip) akan dieksekusi setiap user memilih
nama karyawan pada combox.
•
•
•
•
•
•
•
ajaxku = buatajax(), kita membuat objek
XMLHttpRequest dengan cara menjalankan fungsi
buatajax(), di mana pada fungsi tersebut terdapat kode
untuk membuat objek XMLHttpRequest.
var url="ambildata.php", Kita meng-set file PHP yang
akan bekerja di sisi server.
url=url+"?q="+nip, kita memasukkan nilai nip, yang
diambil dari drop-down box ke dalam variabel q
url=url+"&sid="+Math.random(), kita memasukan
angka random ke dalam variabel sid, hal ini berguna untuk
mencegah server menggunakan chached file atau
mencegah data yang diberikan adalah data yang lama.
ajaxku.onreadystatechange=stateChanged, setiap
terjadi perubahan terhadap properti readyState, akan
segera menjalankan fungsi stateChanged().
ajaxku.open("GET",url,true), membuka objek
XMLHttpRequest dengan metode GET dan URL yang akan
melakukan action di sisi server.
ajaxku.send(null), mengirim HTTP request ke server.
• Fungsi stateChanged() berguna untuk menangani jika
terjadi perubahan properti readyState, coba lihat kode
ajaxku.onreadystatechange=stateChanged.
• ajaxku.readyState==4, Jika nilai properti readyState
adalah sama dengan 4 (4 artinya adalah respon dari server
sudah komplet), maka kita mengambil teks/output yang
dihasilkan oleh program PHP (ambildata.php). jika kita lihat
output yang dihasilkan program PHP ambildata.php adalah
pada baris kode echo $d['alamat'];
• document.getElementById("alamat").value = data,
Lalu nilai atau output yang dihasilkan dari ambildata.php
tersebut, kita masukkan ke dalam elemen textarea yang
mempunyai id “alamat”.
• Melakukan koneksi ke database MySQL
• Mengambil nilai variabel q dengan metode GET, karena ajax
mengirim variabel q dengan metode GET, lalu memasukkannya ke
dalam variabel $nip.
• Melakukan query untuk mengambil alamat yang sesuai nip.
• Lalu memberikan output alamat yang didapat dengan
menggunakan echo.
Daftar referensi
Panduan Lengkap PHP-AJAX-jQuery
Tutorial Indonesia.pdf
 www.w3function.com
 http://www.w3schools.com/php/php_ajax
_php.asp
 http://www.satriamultimedia.com/artikel_
teknologi_ajax.html
