tuta87

Navigation

Archives

Ajax Introduction hehehe...

Bismillah.... Ku coba tulis tentang JavaScript, tentu semua dah tau kalo Ajax itu dibangun oleh beberapa pondasi seperti :

JavaScript
XML
HTML
CSS

JavaScript sendiri merupakan bagian yang vital yang membuat AJAX dapat berjalan, AJAX sangat bergantung dengan JavaScript untuk dapat berkomunikasi dengan server (behind the scenes...) dan menghandle data kiriman dari server. Jadi kesimpulan AJAX, adalah dengan menggabungkan beberapa tekhnologi di atas maka kita dapat membuat aplikasi ONLINE menjadi seperti Dekstop Aplikasi biasa...

Sekarang kita coba membuat fungsi JavaScript yang mengakses suatu file, kemudian menampilkan isinya tanpa Flicker sedikitpun... (ya iya lah, secara... AJAX gituloh.... hehehehe).

Pertama buat sebuah website baru, di sini saya menggunakan Visual Studio 2005
Karena kita ingin mencoba sesuatu yang sangat mendasar kemudian tambahkan sebuah item 'HTML File' baru pada website tadi, misal kita namakan Lesson1.htm
Isi Lesson1.htm dengan tag-tag standar yang membangun HTML standar.
```
   1:  <html>
```
```
   2:    <head>
```
```
   3:      <title>An Ajax demo</title>
```
```
   4:    </head>
```
```
   5:   
```
```
   6:    <body>
```
```
   7:      <H1>An Ajax demo</H1>
```
```
   8:      <form>
```
```
   9:        <input type = "button" value = "Fetch the message"/>      
```
```
  10:      </form>
```
```
  11:      <div id="targetDiv">
```
```
  12:        <p>Teks dari File 'data.txt' akan di tampilkan di sini....</p>
```
```
  13:      </div>
```
```
  14:    </body>
```
```
  15:  </html>
```
.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

Sekarang langkah selanjutnya adalah kita membuat fungsi yang didalamnya antara lain :
>> seleksi kondisi mengenai jenis browser yang mengkses Lesson1.htm

1:

   2:  var XMLHttpRequestObject = false;

3:

   4:        if (window.XMLHttpRequest) { // Jenis browser seperti Firefox, safari, atau Opera

   5:          XMLHttpRequestObject = new XMLHttpRequest();

   6:        } else if (window.ActiveXObject) { // Ini khusus untuk IE

   7:          XMLHttpRequestObject = new

   8:            ActiveXObject("Microsoft.XMLHTTP");

   9:        }

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

Dengan Fungsi di atas, kita mencari tau jenis browser apa yang digunakan client. Dan melalui object XMLHttpRequestObject

website ini berkomunikasi secara langsung dengan server.



>> fungsi untuk mengkses file tertentu.

   1:  function getData(dataSource, divID)

   2:        {

   3:          if(XMLHttpRequestObject) {

   4:            var obj = document.getElementById(divID);

   5:            XMLHttpRequestObject.open("GET", dataSource);

6:

   7:            XMLHttpRequestObject.onreadystatechange = function()

   8:            {

   9:              if (XMLHttpRequestObject.readyState == 4 &&

  10:                XMLHttpRequestObject.status == 200) {

  11:                  obj.innerHTML =

  12:                    XMLHttpRequestObject.responseText;

  13:              }

  14:            }

15:

  16:            XMLHttpRequestObject.send(null);

  17:          }

  18:        }

status ready state dari XMLHttpRequestObject ada 4 jenis, dan memiliki arti masing2.

0 >> The request is not initialized

1 >> The request has been set up

2 >> The request has been sent

3 >> The request is in process

4 >> The request is complete

Pada bagian ini dia juga mencari pada bagian mana teks akan ditampilan (baris ke 4 dan 11,12)

Sehingga jika kita gabungkan, kurang lebih akan terlihat seperti ini :

   1:  <html>

   2:    <head>

   3:      <title>An Ajax demo</title>

   4:      <script language = "javascript">

   5:        var XMLHttpRequestObject = false;

6:

   7:        if (window.XMLHttpRequest) {

   8:          XMLHttpRequestObject = new XMLHttpRequest();

   9:        } else if (window.ActiveXObject) {

  10:          XMLHttpRequestObject = new

  11:            ActiveXObject("Microsoft.XMLHTTP");

  12:        }

13:

  14:        function getData(dataSource, divID)

  15:        {

  16:          if(XMLHttpRequestObject) {

  17:            var obj = document.getElementById(divID);

  18:            XMLHttpRequestObject.open("GET", dataSource);

19:

  20:            XMLHttpRequestObject.onreadystatechange = function()

  21:            {

  22:              if (XMLHttpRequestObject.readyState == 4 &&

  23:                XMLHttpRequestObject.status == 200) {

  24:                  obj.innerHTML = XMLHttpRequestObject.responseText;

  25:              }

  26:            }

  27:            XMLHttpRequestObject.send(null);

  28:          }

  29:        }

  30:      </script>

  31:    </head>

  32:    <body>

  33:      <H1>An Ajax demo</H1>

  34:      <form>

  35:        <input type = "button" value = "Fetch the message"/>

  36:      </form>

  37:      <div id="targetDiv">

  38:        <p>Teks dari File 'data.txt' akan di tampilkan di sini....</p>

  39:      </div>

  40:    </body>

  41:  </html>

Terakhir adalah kita harus menambahkan properti onclik milik button yang ada
```
   1:  <input type = "button" value = "Fetch the message"
```
```
   2:          onclick = "getData('data.txt', 'targetDiv')
```
.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }
Dimana getData menerima dua parameter yaitu file yang akan diakses dan lokasi teks akan ditampilkan. Siapkan sebuah file teks yang kita beri nama 'data.txt' untuk isinya itu terserah dengan anda. Kemudian pada solution explorer kita 'add existing item'

Nah, kira-kira begitulah. Alasan mengapa saya membuat nya pada project website VS karena supaya gampang... karena kita gak bisa akses file secara remote dengan JavaScript (sumber : Bapak Reyza.. xixixixi jadi kalo salah marahin aja pak Reyza). Anda dapat juga bisa menggunakan editor biasa, kemudian simpan pada virtual directory web server yang anda miliki.

Maafkan jika ada kekurangan. Saran dan kritik dari semua sangat saya perlukan guna membangun dan memperbaiki kualitas isi tulisan saya. Thanks.

Share this post: