Rabu, 28 November 2012

AJAX

AJAX adalah singkatan dari Asynchronous JavaScript And XML. AJAX merupakan teknik baru di dunia pengembanan halaman web yang berguna untuk membuat aplikasi web, yang lebih “kaya” dibandingkan dengan aplikasi web biasa. Ciri utama AJAX adalah sebuah halaman web tidak perl di-refresh setiap kali ada data baru yang ingin ditampilkan. Dengan demikian, sebuah aplikasi web akan terasa seperti aplikasi desktop saja. kecepatan, interaktivis, fungsionalitas, dan tingkat kegunaan halaman web akan meningkat.
Ajax Merupakan Kombinasi Dari :
* XHTML (atau HTML) dan CSS untuk bahasa mark up dan tampilan.
* DOM yang diakses dengan client side scripting language, khususnya implementasi ECMAScript seperti JavaScript dan JScript, untuk menampilkan secara dinamis dan berinteraksi dengan informasi yang ditampilkan
* Objek XMLHttpRequest untuk melakukan pertukaran data asinkronus dengan web server. Pada beberapa framework dan kasus Ajax, objek IFrame lebih dipilih daripada XMLHttpRequest untuk melakukan pertukaran data dengan web server.
* XML umumnya digunakan sebagai format untuk pengiriman data, walaupun format lain juga memungkinkan, seperti HTML, plain text, JSON dan EBML.

Contoh aplikasi 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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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>Aj

Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)