tuta87

See also: Other Geeks@INDC

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).

  1. Pertama buat sebuah website baru, di sini saya menggunakan Visual Studio 2005
  2. Karena kita ingin mencoba sesuatu yang sangat mendasar kemudian tambahkan sebuah item 'HTML File' baru pada website tadi, misal kita namakan Lesson1.htm
  3. 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; }
  4. 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)

    .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; }
  5. 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>
    .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; }
  6. 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; }
  7. 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: | | | |

Comments

reyza said:

Wah, kok nama gw dibawa2.

salah nangkap lagi maksud yang dimaksud 'akses file secara remote' :)

# February 6, 2008 12:47 PM

ronald said:

keren tutorialnya..

btw kalo bisa kodenya di format donk bos..

kan ada tuh di windows live writer bagian untuk ngatur format kode..

pake css gitu lah..

jadi enak dipandang mata..

he3x..

sekali lagi gua bilang tutorial lo keren...

# February 6, 2008 1:29 PM

tuta87 said:

hehehehe terima kasih bapak Ronald.STBS

ku paste syntaxnya ke plugin yg ku download untuk WLW, dan tampilan di WLW baik2 aja. Pas ku publish, alhasil malah seperti di atas nald.

# February 6, 2008 4:11 PM

yulian said:

saya juga ngalamin hal yang sama tuh, copy paste from wlw pake add on nya, pas di preview ok2 aja tuh tampilannya, tp pas di publish kyk di atas itu, pdhl sebelumnya ga papa...anyone knows how to solve this problem?

# February 6, 2008 5:56 PM

andriyadi said:

Good posting...Sedikit koreksi.

Saya ingin menanggapi kalimat ini:

"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"

JavaScript, khususnya XMLHttpRequest (krn sdg bahas itu), bisa akses file/resource di server secara remote selama masih dalam satu domain & virtual directory/application. Kalau udah di luar domain baru gak bisa, kecuali pakai library lain seperti JSON Parser (banyak contohnya di internet).

# February 8, 2008 9:27 AM

ronald said:

@ om rully

kalo pake WLW pas insert code jangan lupa opsi embed style-nya dipilih...

# February 8, 2008 11:06 AM

yulian said:

Yup...saya udah lakukan itu. Masalahnya sebelumnya ga apa2 :( ...atau klo pake vs 2008 apakah ada add on baru lagi?

# February 8, 2008 5:25 PM