ajax

3
AJAX pengertian mudahnya menggabungkan antara javascript dan xml untuk mengakses sumber data di server. Jadi server tidak diakses secara langsung, biarkan mesin ajax yang mengaksesnya. Javascript sebagai pemrograman di sisi client (artinya program yang dibuat dengan javascript, bisa dijalankan tanpa menggunakan server) sekarang ini bisa digunakan untuk mengakses server secara asinkron (di belakang layar, artinya proses akses tidak terlihat oleh user). Dan XML digunakan untuk format data hasil kembalian dari server. Javascript bisa mengakses server dengan menggunakan suatu object yang disebut dengan XMLHttpRequest(). Ini object loh, sudah built-in dalam mesin javascript, sehingga anda tidak perlu membuatnya. Object inilah yang akan menjadi inti mesin dari AJAX, dari mengkases data sampai dengan menerima respon dari server, semuanya dikendalikan oleh object ini. Karena mesin javascript ada di dalam browser, maka aplikasi web berbasis ajax akan terpengaruh penggunaan browser, jangan khawatir hampir semua browser terbaru (mozilla 1.x sampai 2.x atau yang terbaru, IE 5+ sampai yang terbaru, Opera, Netscape) sudah mendukung object ini. Dari sini sudah bisa diambil kesimpulan, yaitu 1. Ajax ditulis dengan javascript, memanfaatkan object javascript yang sudah ada yaitu XMLHttpRequest. 2. Ajax tergantung dengan browser, jika browser mendukung javascript, maka bisa dipastikan mendukung ajax. 3. Berdasarkan pernyataan point no 2 diatas, ajax merupakan teknologi browser. Benar, hanya memanfaatkan teknologi browser. 4. Ajax digunakan untuk mengakses server, dan user menerima kembalian dari server tidak secara langsung, tetapi masuk ke dalam mesin ajax terlebih dahulu, baru ditampilkan. Dan proses ini tidak merefresh halaman. Hanya bagian tertentu dari halaman web saja yang diganti, sesuai dengan request tadi. Penggunaan object javascript (XMLHttpRequest) untuk merequest ke server, dalam beberapa browser tidak sama. Untuk browser keluaran microsoft menggunakan komponen ActiveX, namanya Microsoft.XMLHTTP, terdapat banyak versi dari komponen ini, tergantung dari versi browser internet Explorer (IE). Sedangkan browser keluarga mozilla, seperti firefox, opera menggunakan XMLHttpRequest. Namanya berbeda tetapi memiliki fungsi yang sama yaitu melakukan request ke server secara asinkron. Perbedaan ini tidak menjadi masalah, nantinya aplikasi yang dibuat sama kok. Dimana peran XML ? XML hanyalah sebuah format data, XML digunakan untuk menampung data ketika dikirimkan dari server ke komputer client (web browser). Dokumen xml dibuat sesederhana mungkin, agar bisa diparser dengan mudah dan cepat. Yang perlu diingat, dengan menggunakan ajax, server bukanlah mengirimkan halaman, tetapi data. Ada perbedaan yang tipis antara data dan halaman jika kita berbicara soal web. Data dalam web adalah inti dari informasi itu sendiri, tidak peduli bagaimana data tersebut ditampilkan, bahkan data tidak memiliki tampilan. Tampilan akan dibuat secara on the fly di komputer client. Sedangkan halaman sudah memiliki tampilan, sudah termasuk didalamnya data, sehingga jumlah bit yang dikirim oleh server menjadi lebih banyak. Ajax menggunakan XML sebagai alat angkut datanya karena ke- fleksi-belan format XML. Dokumen xml akan diparser oleh XML parser,

Upload: ucu-suryadi

Post on 20-Nov-2015

10 views

Category:

Documents


7 download

DESCRIPTION

Pengenalan Ajax

TRANSCRIPT

AJAX pengertian mudahnya menggabungkan antara javascript dan xml untuk mengakses sumber data di server. Jadi server tidak diakses secara langsung, biarkan mesin ajax yang mengaksesnya. Javascript sebagai pemrograman di sisi client (artinya program yang dibuat dengan javascript, bisa dijalankan tanpa menggunakan server) sekarang ini bisa digunakan untuk mengakses server secara asinkron (di belakang layar, artinya proses akses tidak terlihat oleh user). Dan XML digunakan untuk format data hasil kembalian dari server. Javascript bisa mengakses server dengan menggunakan suatu object yang disebut dengan XMLHttpRequest(). Ini object loh, sudah built-in dalam mesin javascript, sehingga anda tidak perlu membuatnya. Object inilah yang akan menjadi inti mesin dari AJAX, dari mengkases data sampai dengan menerima respon dari server, semuanya dikendalikan oleh object ini. Karena mesin javascript ada di dalam browser, maka aplikasi web berbasis ajax akan terpengaruh penggunaan browser, jangan khawatir hampir semua browser terbaru (mozilla 1.x sampai 2.x atau yang terbaru, IE 5+ sampai yang terbaru, Opera, Netscape) sudah mendukung object ini.

Dari sini sudah bisa diambil kesimpulan, yaitu1. Ajax ditulis dengan javascript, memanfaatkan object javascript yang sudah ada yaitu XMLHttpRequest.2. Ajax tergantung dengan browser, jika browser mendukung javascript, maka bisa dipastikan mendukung ajax.3. Berdasarkan pernyataan point no 2 diatas, ajax merupakan teknologi browser. Benar, hanya memanfaatkan teknologi browser.4. Ajax digunakan untuk mengakses server, dan user menerima kembalian dari server tidak secara langsung, tetapi masuk ke dalam mesin ajax terlebih dahulu, baru ditampilkan. Dan proses ini tidak merefresh halaman. Hanya bagian tertentu dari halaman web saja yang diganti, sesuai dengan request tadi.

Penggunaan object javascript (XMLHttpRequest) untuk merequest ke server, dalam beberapa browser tidak sama. Untuk browser keluaran microsoft menggunakan komponen ActiveX, namanya Microsoft.XMLHTTP, terdapat banyak versi dari komponen ini, tergantung dari versi browser internet Explorer (IE). Sedangkan browser keluarga mozilla, seperti firefox, opera menggunakan XMLHttpRequest. Namanya berbeda tetapi memiliki fungsi yang sama yaitu melakukan request ke server secara asinkron. Perbedaan ini tidak menjadi masalah, nantinya aplikasi yang dibuat sama kok.

Dimana peran XML ? XML hanyalah sebuah format data, XML digunakan untuk menampung data ketika dikirimkan dari server ke komputer client (web browser). Dokumen xml dibuat sesederhana mungkin, agar bisa diparser dengan mudah dan cepat. Yang perlu diingat, dengan menggunakan ajax, server bukanlah mengirimkan halaman, tetapi data. Ada perbedaan yang tipis antara data dan halaman jika kita berbicara soal web. Data dalam web adalah inti dari informasi itu sendiri, tidak peduli bagaimana data tersebut ditampilkan, bahkan data tidak memiliki tampilan. Tampilan akan dibuat secara on the fly di komputer client. Sedangkan halaman sudah memiliki tampilan, sudah termasuk didalamnya data, sehingga jumlah bit yang dikirim oleh server menjadi lebih banyak. Ajax menggunakan XML sebagai alat angkut datanya karena ke-fleksi-belan format XML. Dokumen xml akan diparser oleh XML parser, sehingga bisa ditampilkan sesuai dengan keinginan.

Untuk pertama kalinya tahun 2005 Jesse James Garret dari Adaptive Path mempublikasikan sebuah artikel tentang bagaimana mengembangkan web yang berbeda dari web tradisional, ia menyebutnya dengan AJAX. Kemudian AJAX mulai populer setelah Google memakainya secara luas.

Ajax memiliki kekurangan, yaitu tidak bisa di crawler secara baik oleh search engine, karena search engine bekerja dengan menelusuri url, sedang web berbasis ajax urlnya selalu sama, meskipun user meminta data.

Ajax berbasis pada 4 web standar, yaitu :JavaScriptXMLHTML CSSAjax mengguanakan JavaScriptXMLHttpRequestobject untuk melakukan request ke server. function getXmlHttpRequestObject() {if (window.XMLHttpRequest) {return new XMLHttpRequest();} else if(window.ActiveXObject) {return new ActiveXObject("Microsoft.XMLHTTP");} else {alert('Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.');}}

Source code diatas akan membuat object xmlHttpRequest. Selanjutnya yang harus dilakukan adalah menyimpan objek XMLHttpRequest ke dalam suatu variabel supaya lebih mudah diakses, seperti pada contoh di bawah ini : var request = getXmlHttpRequestObject(); //XmlHttpRequest Object

XMLHttpRequest Properti :1. onreadystateMenampung status data yang dikirimkan ke server.2. onreadystatechangeMenampung perubahan nilai pada onreadystate3. response XMLMembaca struktur dari dokumen XML agar dapat dibaca isinya.4. response TextMembaca nilai dari file textBerikut ini satus onreadystate dikembalikan oleh server :0 The request is not initialized1 The request has been set up2 The request has been sent3 The request is in process4 The request is complete

Contoh penggunaan onreadystatechange :function getNama() {var phone = document.getElementById("box").value;var url = "data.php" ;request.open("GET", url, true);request.onreadystatechange = updatePage; //Callbackrequest.send(null);}

function updatePage() {if (request.readyState == 4)alert("Proses Selesai!");}

Pada contoh diatas akan muncul pesanProses Selesaisetiap kondisireadyStateberubah. Pada fungsiupdatePagedi tambahkanrequest.readyState == 4supaya pesan hanya akan muncul jika status request sama dengan 4 atau sudah selesai di proses

Keterangan per baris :request.open("GET", url, true);

GET : Berarti hanya akan melakukan request atau tidak ada data yang dikirimkan. URL : lokasi file yang direquest. true : Berarti request dilakukan secara asynchronous, yang artinya user tidak harus menuggu suatu request untuk melakukan request lainnya.

request.send(null);Artinya tidak ada parameter yang dikirimkan.