Pada aplikasi Javascript konvensional jika kita menginginkan data dari server kita menggunakan Form dan memanggilnya dengan method GET atau POST. Sehingga pengunjung perlu mengklik tombol dan kemudian halaman akan kerefresh untuk menampilkan hasil dari request tersebut. Nah, kalau dengan Ajax, Javascript berkomunikasi langsung keserver dengan sebuah fungsi yang disebut XMLHttpRequest.
Dengan XMLHttpRequest suatu halaman web dapat direquest dari server dan diterima hasilnya tanpa perlu terjadi refresh pada halaman web tersebut. XMLHttpRequest telah disupport oleh IE 5 keatas, Safari 1.2 keatas, Mozilla Firefox keatas dan Opera 8 keatas. Ajax merupakan penggabungan teknologi-teknologi Javascript, HTML/XHTML, XML, CSS dan Server Side Client. Jadi jika anda belum menguasai salah satu dari teknologi tersebut disarankan untuk anda mempelajari dahulu sebelum melanjutkan pemahaman tentang AJAX.
Pada artikel ini saya akan coba memberikan contoh ajax yang paling sederhana karena aplikasi-aplikasi website yang besar dimulai dari sesuatau yang sederhana. Untuk memulainnya silahkan anda buat sebuah File HTML dan tuliskan kode dibawah ini lalu simpan dengan nama index.html
<html>
<head>
<title>Contoh AJAX title>
<script language="javascript">
function GetXmlHttpObject(){
var xmlHttp=null;
try {
//Untuk Browser Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
//Untuk Browser Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function getpages(url,centercol) {
xmlHttp=GetXmlHttpObject();
if (xmlHttp) {
var obj = document.getElementById(centercol);
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 1) {
obj.innerHTML = '<img alt=\"Halaman Sedang Dimuat \" src=\"images/wait.gif\" alt=\"loading\" / >';
}
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
obj.innerHTML = xmlHttp.responseText;
}
}
xmlHttp.send(null);
}
}
</script>
</head>
<body>
<h1>Request File Dari HTML </h1>
<form>
<input value="Request File " onclick="getpages('request.html','centercol')" type="button">
</form>
<div id="centercol">
File request.html akan ditampilkan disini
</div>
</body>
</html>
Sekarang buat file HTML dengan nama request.html yang disimpan dengan folder yang sama dengan File diatas kemudian isilah dengan text berikut ini:
?
1
Text ini ditampilkan dengan metode proses request <strong>Ajax</strong>
<html>
<head>
<title>Contoh AJAX title>
<script language="javascript">
function GetXmlHttpObject(){
var xmlHttp=null;
try {
//Untuk Browser Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
//Untuk Browser Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function getpages(url,centercol) {
xmlHttp=GetXmlHttpObject();
if (xmlHttp) {
var obj = document.getElementById(centercol);
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 1) {
obj.innerHTML = '<img alt=\"Halaman Sedang Dimuat \" src=\"images/wait.gif\" alt=\"loading\" / >';
}
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
obj.innerHTML = xmlHttp.responseText;
}
}
xmlHttp.send(null);
}
}
</script>
</head>
<body>
<h1>Request File Dari HTML </h1>
<form>
<input value="Request File " onclick="getpages('request.html','centercol')" type="button">
</form>
<div id="centercol">
File request.html akan ditampilkan disini
</div>
</body>
</html>
Sekarang buat file HTML dengan nama request.html yang disimpan dengan folder yang sama dengan File diatas kemudian isilah dengan text berikut ini:
?
1
Text ini ditampilkan dengan metode proses request <strong>Ajax</strong>
Keterangan :
Awalnya kita perlu membuat object XMLHttpRequest, objek ini wajib ada dalam website yang menggunakan Ajax. Untuk memanggilnya kita perlu menggunakan fungsi berikut ini:
function GetXmlHttpObject(){
var xmlHttp=null;
try {
//Untuk Browser Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
//Untuk Browser Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
Pertama kita set xmlHttp=null tidak aktif, kemudian baru kita aktifkan lagi dengan membuat objek yang baru xmlHttp = new XMLHttpRequest(); Khusus untuk Internet Explorer, karena menggunakan ActiveX untuk membuat XMLHttpRequest kita harus membuat kode xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
Setelah kita membuat objek XMLHttpRequest sekarang kita membuat fungsi untuk mengambil file dan menampilkannya. Disini kita membuat fungsi function getpages(url,centercol), yang didalamnya terdapat xmlHttp.open ("GET", url); yang berarti kita mengambil url dengan method get. dengan menggunakan method get maka kita harus mengirimkan sesuatu keserver, tapi karena kita tidak mengirim apa-apa maka kita kirimkan saja nilai kosong dengan kode: xmlHttp.send(null);
xmlHttp.status merupakan status http. Jika statusnya 200 berarti file html nya ada dan siap ditampilkan. Sehingga kita perlu mengecek kedua status tersebut dengan kode if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
Jika kedua statusnya oke, maka kita perlu menampilkannya dengan perintah obj.innerHTML = xmlHttp.responseText Dimana ini berarti kita menampilkannya di obj, sementara variabel obj telah kita isi dengan centercol, ini kode ketika kita mengisi obj dengan centercol, var obj = document.getElementById(centercol).
Terakhir Kita memanggil fungsi getpages pada tombol serta mengirim url yang akan ditampilkan. Inilah kode yang digunakan untuk memanggil fungsi getpages: <input type="button" value="Tampilkan Request" onclick="getpages('request.html' ,'centercol')">.
Awalnya kita perlu membuat object XMLHttpRequest, objek ini wajib ada dalam website yang menggunakan Ajax. Untuk memanggilnya kita perlu menggunakan fungsi berikut ini:
function GetXmlHttpObject(){
var xmlHttp=null;
try {
//Untuk Browser Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
//Untuk Browser Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
Pertama kita set xmlHttp=null tidak aktif, kemudian baru kita aktifkan lagi dengan membuat objek yang baru xmlHttp = new XMLHttpRequest(); Khusus untuk Internet Explorer, karena menggunakan ActiveX untuk membuat XMLHttpRequest kita harus membuat kode xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
Setelah kita membuat objek XMLHttpRequest sekarang kita membuat fungsi untuk mengambil file dan menampilkannya. Disini kita membuat fungsi function getpages(url,centercol), yang didalamnya terdapat xmlHttp.open ("GET", url); yang berarti kita mengambil url dengan method get. dengan menggunakan method get maka kita harus mengirimkan sesuatu keserver, tapi karena kita tidak mengirim apa-apa maka kita kirimkan saja nilai kosong dengan kode: xmlHttp.send(null);
xmlHttp.status merupakan status http. Jika statusnya 200 berarti file html nya ada dan siap ditampilkan. Sehingga kita perlu mengecek kedua status tersebut dengan kode if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
Jika kedua statusnya oke, maka kita perlu menampilkannya dengan perintah obj.innerHTML = xmlHttp.responseText Dimana ini berarti kita menampilkannya di obj, sementara variabel obj telah kita isi dengan centercol, ini kode ketika kita mengisi obj dengan centercol, var obj = document.getElementById(centercol).
Terakhir Kita memanggil fungsi getpages pada tombol serta mengirim url yang akan ditampilkan. Inilah kode yang digunakan untuk memanggil fungsi getpages: <input type="button" value="Tampilkan Request" onclick="getpages('request.html' ,'centercol')">.
Sumber :
Tidak ada komentar:
Posting Komentar