XML

Objek XMLHttpRequest AJAX: Penjelasan dan Contohnya

Operasi AJAX

Langkah-langkah Operasi AJAX dapat kita buat dengan tahapan berikut ini

  1. Suatu klien membuat sebuah event atau kegiatan dan event tersebut dijalankan oleh client
  2. Setelah event terjadi, maka ajax akan membuat suatu Objek XMLHttpRequest.
  3. Pada tahap ini Objek XMLHttpRequest telah dibuat dan saatnya objek XMLHttpRequest ini dikonfigurasi pengaturannya.
  4. Objek XMLHttpRequest disini akan membuat permintaan pengaturan set asynchrounous ke Webserver.
  5. Webserver telah menerima permintaan dari objek XMLHttpRequest, maka saatnya Webserver mengembalikan kembali hasil permintaan sebelumnya dengan berisi dokumen XML.
  6. Objek XMLHttpRequest selanjutnya memanggil fungsi callback () dan memproses hasilnya.
  7. Setelah semua prosesnya sudah selesai maka DOM HTML akan diperbarui.

Terjadinya Event

Event yang dibuat oleh client akan terjadi jika memenuhi kegiatan dibawah ini

  1. Fungsi JavaScript dipanggil sebagai hasil dari suatu peristiwa atau event.
  2. Contohnya adalah fungsi JavaScript validateUserId () dipetakan sebagai event handler ke event dengan nama onkeyup di kolom form dan masukan dengan idnya yang diset menjadi “userid”

contoh input atau masukan diatas adalah seperti ini

<input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId();">.

Setelah itu langkah yang dapat dilakukan yaitu, kita akan menulis sebuah fungsi yang akan dilakukan oleh client atau event ini akan dipanggil oleh client kemudian membuat fungsi callback untuk memproses request yang dikirimkan. Setelah selesai maka kita dapat membuat request secara asynchronous kedalam webserver. Webserver akan mengembalikan hasil dari request yang dikirimkan dengan kandungan format Dokumen XML. Kitadapat menerapkan skrip ini pada sisi server Anda dalam bahasa apa pun, dengan tambahan logika seperti berikut ini

  • Dapatkan permintaan dari klien.
  • Parse masukan dari klien.
  • Lakukan pemrosesan yang diperlukan.
  • Kirim hasilnya ke klien.

Objek XMLHttpRequest sekarang telah dikonfigurasi dengan tujuan untuk memanggil fungsi processRequest () ketika ada perubahan status ke readyState dari objek XMLHttpRequest. Sekarang fungsi ini akan menerima hasil dari server dan akan melakukan pemrosesan yang diperlukan. Seperti pada contoh berikut, fungsi dibawah ini akan menetapkan pesan variabel dengan kondisi true atau false berdasarkan nilai yang dikembalikan dari Webserver. Untuk fungsinya sendiri dapat kita buat dengan kode berikut ini

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

Sekarang adalah langkah terakhir dan pada langkah ini, halaman HTML Anda akan diperbarui atau diupdate ketika semua proses telah diselesaikan. Ini akan terjadi dengan cara berikut ini

  • JavaScript mendapatkan referensi ke elemen apa pun yang ada di halaman kita menggunakan DOM API.
  • Cara yang direkomendasikan untuk mendapatkan referensi ke sebuah elemen adalah dengan memanggil fungsi dengan kode secara umumnya adalah document.getElementById(“isidataIDnya”).
  • JavaScript sekarang dapat digunakan untuk mengubah atribut elemen seperti memodifikasi properti style elemen atau menambah, menghapus, atau memodifikasi elemen childnya.
Jika Anda telah memahami tujuh langkah yang disebutkan di atas, maka Anda hampir selesai dengan AJAX. Sekarang kita akan bahas lebih lengkap mengenai Objek XMLHttpRequest.

Objek XMLHttpRequest

Objek XMLHttpRequest digunakan untuk membuat komunikasi secara asynchronous antara klien dan server. Ini akan terjadi dengan melakukan operasi berikut:

  • Mengirim data dari klien di latar belakangnya atau data dikirimkan di backgroudnya, Objek XMLHttpRequest dapat digunakan untuk bertukar data dengan server di belakang layar. Artinya, dimungkinkan untuk memperbarui bagian-bagian dari halaman web, tanpa memuat ulang seluruh halaman.
  • Menerima data dari server
  • Memperbarui halaman web tanpa memuatnya atau merefresh kembali.

Objek XMLHttpRequest adalah kunci AJAX. Ini telah tersedia sejak Internet Explorer 5.5 dirilis pada Juli 2000, tetapi tidak sepenuhnya ditemukan sampai AJAX dan Web 2.0 pada tahun 2005 menjadi populer. XMLHttpRequest (XHR) adalah API yang dapat digunakan oleh JavaScript, JScript, VBScript, dan bahasa skrip browser web lainnya untuk mentransfer dan memanipulasi data XML ke dan dari server web menggunakan HTTP, membuat saluran koneksi independen antara Sisi-Klien halaman web dan Sisi server.

Data yang dikembalikan dari panggilan XMLHttpRequest akan sering disediakan oleh database back-end. Selain XML, XMLHttpRequest dapat digunakan untuk mengambil data dalam format lain, misalkan JSON atau bahkan teks biasa.

Properti Objek XMLHttpRequest

Properti umum yang ada dalam objek XMLHttpRequest adalah sebagai berikut

PropertyDeskripsi
onReadyStateChangeonReadyStateChange Ini dipanggil setiap kali atribut readystate berubah. Ini tidak boleh digunakan dengan permintaan synchronous.
readyStatereadyState mewakili status dari suatu permintaan dari client, status ini berkisar dari 0 hingga 4. Status ini dapat kita lihat dengan kode dibawah ini:
0 UNOPENED open () yaitu tidak dipanggil.
1 OPENED yaitu open dipanggil tetapi send () tidak dipanggil.
2 HEADERS_RECEIVED send () yaitu dipanggil, dan header serta status tersedia.
3 LOADING yaitu Mendownload data; responseText menyimpan data.
4 DONE yaitu Operasi selesai sepenuhnya.
reponseTextreponseText akan mengembalikan respons sebagai teks.
responseXMLreponseXML akan mengembalikan respons sebagai XML. propertinya mengembalikan objek dokumen XML, yang dapat diperiksa dan diurai menggunakan metode dan properti node tree dari DOM W3C.
statusMengembalikan status sebagai angka (misalkan, 404 untuk “Tidak Ditemukan” dan 200 untuk “Oke”).
statusTextMengembalikan status sebagai string (misalkan, “Tidak Ditemukan” atau “Oke”).
  • readyState = 0 Setelah Anda membuat objek XMLHttpRequest, tetapi sebelumnya Anda memanggil metode open ().
  • readyState = 1 Setelah Anda memanggil metode open (), tetapi sebelumnya Anda memanggil send ().
  • readyState = 2 Setelah Anda memanggil send ().
  • readyState = 3 Setelah browser menjalin komunikasi dengan server, tetapi sebelum server menyelesaikan respons.
  • readyState = 4 Setelah permintaan selesai, dan data respons telah sepenuhnya diterima dari server.

Metode Objek XMLHttpRequest

MethodDeskripsi
void open(method, URL)void open (metode, URL) yaitu metode yang membuka permintaan dan menentukan metode get atau post dan url.
void open(method, URL, async)void open (metode, URL, async) yaitu sama seperti metode di atas tetapi menentukan asynchronous atau tidak.
void open(method, URL, async, username, password)void open (metode, URL, async, username, password) yaitu sama seperti di atas tetapi menentukan nama pengguna dan kata sandi
void send()void send () yaitu fungsi akan mengirimkan get request.
void send(string)void send (string) yaitu fungsi akan mengirimkan post request.
setRequestHeader(header,value)setRequestHeader (header, value) yaitu menambahkan header request.
abort()Membatalkan permintaan saat ini.
getAllResponseHeaders ()getAllResponseHeaders () yaitu fungsi yang mengembalikan set lengkap header HTTP sebagai string
getResponseHeader (headerName)getResponseHeader (headerName) yaitu fungsi yang mengembalikan nilai dari header HTTP yang ditentukan.

Menentukan metode, URL, dan atribut opsional lain dari sebuah permintaan atau request. Parameter suatu metode dapat memiliki nilai “GET”, “POST”, atau “HEAD”. Metode HTTP lain seperti “PUT” dan “DELETE” (terutama digunakan dalam aplikasi REST) dapat dilakukan. Parameter “async” menentukan apakah permintaan harus ditangani secara asinkron atau tidak. “true” berarti pemrosesan skrip berjalan setelah metode send () tanpa menunggu respons, dan “false” berarti skrip menunggu respons sebelum melanjutkan proses skrip.


Bagus Dharma Iswara

Share
Tags: AJAXpemrograman