-->

Tutorial dan Implementasi ajax

10:34 PM
AJAX = Asynchronous JavaScript and XML.
Dari singkatan juga sudah jalas yaitu menggabungkan antara javascript dengan XML. Teknologi ini banyak sekali digunakan oleh web-web besar seperti facebook, twitter, yahoo, google, dll. Jika anda lihat pada website yang menggunakan Ajax, proses request ke server dilakukan oleh Javascript. Sehingga tampilan pada browser client tidak mengalami perubahan (refresh). Kemudian hasilnya akan dikirim oleh server dalam bentuk Text/XML dan ditampilkan dibrowser client.

Berikut penerapannya aplikasi ajax dan silahkan brader coba aja dirumah:

Step 1 : Membuat struktur folder kerja
1. Siapkan folder dengan nama simpleajax pada folder document root anda.
2. Cari gambar ajax pada web berikut: http://www.loadinfo.net/ atau web lainnya. Simpan gambar yang anda sukai pada web tersebut pada folder simpleajax.

Step 2 : Membuat file Index
1. Ketikkan script berikut,
<html>
      <head>
      <title></title>
      <script type="text/javascript" src="ajax.js"></script>
      </head>
      <body>
      <center>
      <h3> Simple AJAX Tabs</h3>
      <div id="tabs">
      <a href="fallback1.php" id="tab1" class="tab" onclick="return handleOnClick(1);"> News 1</a>
      <a href="fallback2.php" id="tab2" class="tab" onclick="return handleOnClick(2);">News 2</a>
      </div>
      <br>
      <div id="content">Klik pada tab untuk mengaktifkannya.</div>
      </center>
      </body>
</html>
2. Simpan dengan nama index.php
3. Penjelasan : Index.php adalah file utama dalam aplikasi ini. Bagian yang paling penting untuk implementasi Ajax adalah pada baris 9 – 14. Setiap link pada tab memiliki masing – masing sebuah atribut value href dan onclick event handler, seperti pada script dibawah ini:
<a href="fallback1.php" id="tab1" class="tab" onclick="return handleOnClick(1);"> News 1</a>
Pada kasus ini, AJAX diinisialisasi ketika user mengaktifkan tab dengan meng-kliknya.

Ketika transaksi AJAX berhasil dieksekusi = fungsi handleOnClick() mengembalikan nilai false sehingga akan membatalkan event klik. AJAX kemudian mengontrol proses update pada dokumen dan href tidak diikuti.
Ketika transaksi AJAX gagal (XMLHttpRequest objek tidak dapat diinstansiasi, dengan kata lain browser tidak support AJAX) = Fungsi handleOnClick mengembalikan nilai true dan href diikuti, menavigasi dokumen pada halaman dokumen baru (yaitu halaman fallback).
Kenapa aplikasi menyediakan masing-masing event handler onClick dan sebuah href URL untuk setiap tab?
Hal ini untuk mengatasi apabila browser dari device yang digunakan tidak mensupport AJAX. Jadi apabila device mensupport AJAX, transaksi AJAX untuk menampilkan berita akan dilakukan. Namun apabila tidak support, berita tetap ditampilkan tetapi dengan mengarahkannya pada halaman web baru (halaman fallback) berisi berita yang sama dari halaman yang dihasilkan oleh transaksi AJAX.

Step 3 : Membuat file ajax.js
1. Ketikkan script berikut,
var req = null;
      // Function to obtain an instance of XMLHttpRequest used in an AJAX request
      function getXHR() {
      if (window.XMLHttpRequest) {
      return new XMLHttpRequest();
      }
      else try {
      return new ActiveXObject('Msxml2.XMLHTTP');
      } catch(e) {
      try {
      return new ActiveXObject("Microsoft.XMLHTTP");
      } catch(e) {
      return null;
      }
      }
      }
      // Use AJAX to update the page content.
      // Returns true if the AJAX request succeeded, or false otherwise.
      function updateContent(url, id) {
      req = getXHR();
      if (req != null) {
      // Create a HTTP get request
      req.open('GET', url);
      // Anonymous callback function to handle state changes for the web request
      req.onreadystatechange = function() {
      // State "4" is response received.
      if (req.readyState == 4) {
      // Check for HTTP 200 - successful response from web server
      if (req.status == 200) {
      document.getElementById(id).innerHTML = req.responseText;
      } else {
      document.getElementById(id).innerHTML = 'Could not retrieve data.';
      }
      }
      // For all other states, show an animated gif indicating that content is loading
      else {
      document.getElementById(id).innerHTML = '<img id="loading" src="flickr-loader.gif"/>'; //result of download step 1
      }
      return false;
      }
      // Start the AJAX transaction
      req.send('');
      } else {
      return false;
      }
      return true;
      }
      // This is the onClick event handler for the tab links
      // index - the zero-based index of the tab that was clicked
      function handleOnClick(index) {
      // Construct the ID of the clicked tab
      var tabId = "tab" + index;
      // Update the style of the active tab.
      document.getElementById(tabId).setAttribute('class', 'activeTab');
      // Update the styles of the inactive tabs. This could also be achieved in a for loop.
      if (index != 1) {
      document.getElementById("tab" + 1).setAttribute('class', 'tab');
      }
      if (index != 2) {
      document.getElementById("tab" + 2).setAttribute('class', 'tab');
      }
      // Use AJAX to update the "content" div.
      // Construct the URL to use to retrieve the updated content
      var url = "http://localhost/helloMobile/getNews"+index+".php";
      // If the AJAX request succeeded, do not follow the original link
      if (updateContent(url, "content")) {
      return false;
      }
      // If we are here, then the AJAX transaction failed.
      // Follow the link and load the static page.
      return true;
      }
2. Simpan dengan nama ajax.js
3. Penjelasan : Kunci utama dari AJAX adalah objek XMLHttpRequest. Objek tersebut terletak pada browser sehingga masing – masing browser memiliki cara tersendiri untuk membuat objek tersebut. Function getXHR() pada script ajax2.js diatas adalah fungsi untuk menciptakan instance dari XMLHttpRequest (XHR) yang akan digunakan pada AJAX (Catatan : untuk IE, mensupport ajax via ActiveX objects, bukan XHR).Function updateContent() merupakan fungsi yang akan mengupdate content dari tab via AJAX, fungsi ini akan mengembalikan nilai true apabila transaksi AJAX berhasil, dan false jika gagal.
Setelah itu fungsi akan menciptakan Http get request dan mengecek progress dari update dengan onreadystatechange event.
onreadystatechange event menjalankan 3 hal,
a. Jika asynchronous web request sedang dalam progress, maka animasi loading akan ditampilkan.
b. Jika AJAX request completed, maka body dari web response akan digunakan sebagai content dari elemen.
c. Jika AJAX request terminate dengan sebuah eror, maka eror akan ditampilkan pada user, yaitu “Could not retrieve data”Transaksi AJAX menggunakan document.getElementById dan element.innerHTML untuk mengupdate bagian dinamis dari dokumen (dalam kasus ini adalah berita sebagai bagian dinamis dari mobile web).
Function handleOnClick() merupakan fungsi event handler ketika tab di klik. Fungsi ini menggunakan parameter index, sesuai dengan index dari tab yang diklik oleh user. Fungsi ini akan mengupdate style dari tab (untuk membedakan tab yang aktif dan yang tidak aktif) dan mengupdate isi dari div content. Isi dari div content merupakan file berita sesuai dengan tab yang diklik user. Content ini didapat dari URL var url = “http://localhost/simpleajax/getNews”+index+”.php”;
Jadi script tersebut akan me-retrieve halaman dari getNews(index) dengan menggunakan AJAX, sesuai dengan index dari tab yang diklik oleh user.

Step 4 : Membuat file get News
1. Ketikkan script berikut:
<?php
      sleep(2);
      echo "News 1";
      echo "Ini adalah isi berita 1";
      ?>
2. Simpan dengan nama getNews1.php
3. Kemudian ketiikan script berikut:
<?php
      sleep(2);
      echo "News 2";
      echo "Ini adalah isi berita 2";
      ?>
4. Simpan dengan nama getNews2.php
5. Penjelasan : Dua file ini merupakan original link (yang dijalankan via AJAX) dari tab pertama dan kedua (tab berindex 1 dan 2). Jadi getNews1.php dan getNews2.php akan dijalankan apabila user meng-klik tab index 1 dan 2, serta browser yang digunakan mensupport AJAX.

Step 5 : Membuat file fallback
1. Ketikkan script berikut:
<html>
      <head>
      <title></title>
      <script type="text/javascript" src="ajax.js"></script>
      </head>
      <body>
      <center>
      <h3> Simple AJAX Tabs</h3>
      <div id="tabs">
      <a href="fallback1.php" id="tab1" class="tab" onclick="return handleOnClick(1);"> News 1</a>
      <a href="fallback2.php" id="tab2" class="tab" onclick="return handleOnClick(2);">News 2</a>
      </div>
      <div id="content">
      <?php echo "News 1";
      echo "Ini adalah isi berita 1";
      ?>
      </div>
      </center>
      </body>
      </html>
2. Simpan dengan nama fallback1.php
3. Kemudian ketiikan script berikut:
<html>
      <head>
      <title></title>
      <script type="text/javascript" src="ajax2.js"></script>
      </head>
      <body>
      <center>
      <h3> Simple AJAX Tabs</h3>
      <div id="tabs">
      <a href="fallback1.php" id="tab1" class="tab" onclick="return handleOnClick(1);"> News 1</a>
      <a href="fallback2.php" id="tab2" class="tab" onclick="return handleOnClick(2);">News 2</a>
      </div>
      <div id="content">
      <?php echo "News 2";
      echo "Ini adalah isi berita 2";
      ?>
      </div>
      </center>
      </body>
      </html>
4. Simpan dengan nama fallback2.php
5. Penjelasan : File fallback1.php dan fallback2.php merupakan file webpage statis yang akan dijalankan apabila user meng-klik tab index 1 dan 2, serta browser yang digunakan TIDAK mensupport AJAX. Jadi berita tetap ditampilkan namun dengan cara yang berbeda (tidak menggunakan AJAX).

Step 6 : Testing Code
1. Pergi ke http://localhost/simpleajax/
2. Maka file index.php akan ditampilkan, seperti gambar dibawah ini:

3. Klik pada salah satu tab, maka jika browser anda support ajax, animasi loading akan ditampilkan. Lihat gambar dibawah:

4. Setelah loading selesai, maka isi dari tab tersebut akan ditampilkan (dari getNews.php)





Semoga bermanfaat