AJAX bukan bahasa pemrograman yang baru, melainkan sebuah teknik untuk membuat aplikasi berbasis web yang lebih baik, lebih cepat, dan interaktif.

Dengan AJAX, JavaScript dapat berkomunikasi secara langsung dengan menggunakan objek JavaScript XMLHttpRequest. Dengan objek ini, JavaScript yang dibuat, dapat bertukar data dengan sebuah web server, tanpa me-reload halaman web.

AJAX menggunakan asynchronous data transfer (HTTP requests) antara browser dengan web server, sehingga halaman web dapat meminta informasi yang jauh lebih kecil (dapat berupa bit data) dari web server dibandingkan dengan meload sebuah halaman secara keseluruhan.

AJAX adalah sebuah teknologi browser yang berdiri sendiri.

AJAX berbasis standar web:

• JavaScript
• XML
• HTML
• CSS

standar yang digunakan pada AJAX telah didukung oleh banyak browser. Aplikasi AJAX bersifat independen terhadap browser dan platform.

AJAX menggunakan Request HTTP

Pada coding JavaScript tradisional, untuk mendapatkan data dari sebuah database/file di server, atau mengirimkan informasi kepada sebuah server, harus menggunakan form HTML kemudian mengirimkannya kepada server dengan method GET/POST. User harus mengeklik tombol ‘Submit’ untuk mengirim/mendapatkan datanya, menunggu respon dari server, kemudian sebuah halaman baru menampilkan hasilnya.

Karena server mengirimkan halaman baru setiap kalo user mengirimkan input, hal itu dapat membuat aplikasi berjalan lambat dan kurang user-friendly.

Dengan AJAX, JavaScript dapat berkomunikasi secara langsung dengan server, melalui objek XMLHttpRequest. Dengan objek tersebut, sebuah halaman web dapat mengirimkan sebuah request, dan mendapatkan responnya dari server tanpa me-reload ulang halamannya. User akan tetap pada halaman itu, sementara JavaScript akan melakukan send/request data di background.

Contoh:

var xmlHttp; // variabel untuk objekXMLHttpRequest
try {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
} catch (e) {
  // Internet Explorer
  try {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {
      alert("Your browser does not support AJAX!");
      return false;
    }
  }
}

Kalau browsernya men-support AJAX, variabel xmlHttp akan menjadi sebuah objek XMLHttpRequest yang nantinya dipakai untuk send/receive data dari server.

Setelah itu yang dibutuhkan adalah membuat sebuah fungsi yang digunakan untuk menangani  respon yang diberikan oleh server dengan status readyState.

Status readyState:

• 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

Fungsinya seperti berikut:

xmlHttp.onreadystatechange = function() {
  // kalau statusnya OK ( = 4 )
  if( xmlHttp.readyState == 4 ) {
    // tampilkan respon dari server
    alert(xmlHttp.responseText);
  }
}

Halaman yang di-load di background dipanggil dengan menggunakan:

xmlHttp.open("GET","http://webserver.com/program.php",true);
xmlHttp.send(null);

Jika request HTTP oleh objek XMLHttpRequest berhasil di jalankan, output dari halaman http://webserver.com/program.php akan ditampilkan (di-alert) pada browser.

Dari contoh ini, output dari program.php dapat diperoleh tanpa mengetikkan alamat program.php pada address bar browser atau dari link yang di klik oleh user dari halaman lainnya. user tetap berada pada halaman dimana terdapat objek XMLHttpRequest tersebut.