Bagaimana cara kerja AJAX?

Apa inti dari AJAX? Misalnya, saya ingin memiliki link di halaman saya sehingga ketika pengguna mengklik link ini, beberapa informasi dikirim ke server saya tanpa memuat ulang halaman saat ini. Apakah itu AJAX?

Saya bisa mendapatkan perilaku ini dengan menggunakan isoframe. Secara lebih rinci saya meletakkan tautan (katakanlah gambar kecil) dalam isoframe kecil. Ketika pengguna mengklik link ini, browser hanya memuat ulang halaman di isoframe.

Namun, menurut saya ini bukanlah cara yang elegan untuk mencapai tujuan. Saya rasa saya harus menggunakan AJAX. Bagaimana cara kerjanya? Dapatkah penggunaan XHTML memecahkan masalah yang dipertimbangkan dengan cara yang elegan? Atau apakah saya perlu menggunakan JavaScripts?

Saya tidak butuh banyak. Saya hanya ingin memiliki link kecil yang (setelah diklik) mengirimkan beberapa informasi ke server. Katakanlah saya memiliki "gambar-bintang" di dekat pesan. Jika pengguna mengklik bintang (dia menyukai pesan), bintang akan berubah warna dan database pembaruan server saya (untuk diingat bahwa pengguna menyukai pesan tersebut).

Jika Anda benar-benar baru mengenal AJAX (singkatan dari Asynchronous Javascript And XML), entri AJAX di wikipedia adalah titik awal yang baik:

Seperti DHTML dan LAMP, AJAX bukanlah teknologi itu sendiri, tetapi sekelompok teknologi. AJAX menggunakan kombinasi dari:

• HTML dan CSS untuk menandai dan menata informasi.
• DOM diakses dengan JavaScript untuk secara dinamis menampilkan dan berinteraksi dengan informasi yang disajikan.
• Sebuah metode untuk bertukar data secara asinkron antara browser dan server, sehingga menghindari pemuatan ulang halaman. Objek XMLHttpRequest (XHR) biasanya digunakan, tetapi terkadang objek IFrame atau tag yang ditambahkan secara dinamis digunakan sebagai gantinya.
• Format untuk data yang dikirim ke browser. Format umum termasuk XML, HTML yang telah diformat sebelumnya, teks biasa, dan JavaScript Object Notation (JSON). Data ini dapat dibuat secara dinamis dengan beberapa bentuk skrip sisi server.

Seperti yang Anda lihat, dari sudut pandang teknologi murni, tidak ada yang benar-benar baru di sini. Sebagian besar bagian AJAX sudah ada pada tahun 1994 (1999 untuk XMLHttpRequestobjek). Hal baru yang sebenarnya adalah menggunakan bagian-bagian ini bersama - sama seperti yang dilakukan Google dengan GMail (2004) dan Google Maps (2005). Sebenarnya, kedua situs tersebut berkontribusi besar terhadap promosi AJAX.

Sebuah gambar bernilai ribuan kata, di bawah diagram yang menggambarkan komunikasi antara klien dan server jarak jauh, serta perbedaan antara aplikasi klasik dan aplikasi bertenaga AJAX:

Untuk bagian oranye, Anda dapat melakukan semuanya dengan tangan (dengan XMLHttpRequestobjek) atau Anda dapat menggunakan pustaka JavaScript terkenal seperti jQuery , Prototype , YUI , dll untuk "AJAXify" di sisi klien aplikasi Anda. Pustaka semacam itu bertujuan untuk menyembunyikan kompleksitas pengembangan JavaScript (misalnya kompatibilitas lintas-browser), tetapi mungkin berlebihan untuk fitur sederhana.

Di sisi server, beberapa kerangka kerja juga dapat membantu (misalnya DWR atau RAJAX jika Anda menggunakan Java), tetapi yang perlu Anda lakukan pada dasarnya adalah mengekspos layanan yang hanya mengembalikan informasi yang diperlukan untuk memperbarui sebagian halaman (awalnya sebagai XML / XHTML - X di AJAX - tetapi JSON sering lebih disukai saat ini).

Inti dari AJAX adalah ini:

Halaman Anda dapat menjelajahi web dan memperbarui kontennya sendiri saat pengguna melakukan hal lain .

Artinya, javascript Anda dapat mengirim permintaan GET dan POST asynchronous (biasanya melalui sebuah XMLHttpRequestobjek) kemudian menggunakan hasil dari permintaan tersebut untuk memodifikasi halamannya (melalui manipulasi Model Objek Dokumen ).

AJAX biasanya melibatkan pengiriman permintaan HTTP dari klien ke server dan memproses respons server, tanpa memuat ulang seluruh halaman. (Asynchronous).

Javascript umumnya melakukan pengiriman dan menerima respons data dari server (biasanya XML, seringkali format lain yang kurang bertele-tele seperti JSON)

Javascript kemudian dapat memperbarui DOM laman secara dinamis untuk memperbarui tampilan pengguna.

Jadi 'Asychronous Javascript And XML'.

Ada opsi lain untuk memperbarui tampilan pengguna tanpa memuat ulang halaman, hal-hal seperti Flash dan Applet, tetapi ini sepertinya bukan solusi yang baik untuk kasus Anda. Sepertinya Javascript adalah cara yang tepat. Ada banyak dukungan pustaka yang bagus, seperti jQuery seperti yang digunakan di situs ini, jadi Anda tidak perlu benar-benar menulis banyak Javascript sendiri.

Ajax lebih dari sekadar memuat ulang hanya sebagian dari halaman. Ajax adalah singkatan dari Asynchronous Javascript And Xml.

Satu-satunya bagian dari Ajax yang Anda butuhkan adalah objek XMLHttpRequest dari javascript. Anda harus menggunakannya untuk memuat dan memuat ulang sebagian kecil dari html Anda sebagai div atau tag lainnya.

Bacalah contoh itu dan Anda akan menjadi profesional secepat yang Anda pikirkan!

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

AJAX adalah singkatan dari Asynchronous Javascript dan XML. AJAX mendukung pembaruan parsial ke halaman tanpa harus mengirim seluruh halaman kembali ke server.

Ada banyak opsi untuk AJAX. Dua yang paling menonjol (bisa dibilang) adalah Microsoft ASP.NET AJAX (sebelumnya Atlas) dan jQuery.

ASP.NET AJAX relatif mudah disiapkan jika Anda sudah terbiasa dengan ASP.NET. jQuery bagus jika Anda sudah mengetahui javascript, dan memungkinkan kontrol yang sangat terperinci atas kueri dan pembaruan halaman Anda.

HTH

Jika Anda tertarik, IBM memiliki 10 (mungkin lebih) seri bagian di Ajax: Menguasai Ajax bagian 1

Meskipun beberapa tahun sekarang ini adalah pengantar yang bagus, (bahkan jika Anda baru saja membaca bagian pertama!)

Saya pikir keseluruhan seri harus terdaftar di sini , meskipun situs tersebut agak lambat bagi saya saat ini ...

Ringkasan:

Ajax, yang terdiri dari HTML, teknologi JavaScript ™, DHTML, dan DOM, adalah pendekatan luar biasa yang membantu Anda mengubah antarmuka Web yang kaku menjadi aplikasi Ajax interaktif. Penulis, seorang ahli Ajax, mendemonstrasikan bagaimana teknologi ini bekerja sama - dari gambaran umum hingga tampilan rinci - untuk membuat pengembangan Web yang sangat efisien menjadi kenyataan yang mudah. Dia juga memperkenalkan konsep sentral Ajax, termasuk objek XMLHttpRequest.

itu ajax. Anda tidak dapat menggunakan ajax tanpa javascript. Anda harus melihat contoh jquery dan prototipe untuk mendapatkan gambaran tentang penggunaannya.

Apa yang Anda coba lakukan secara teknis ajax. Ajax membuat transaksi fragmen xhtml untuk memperbarui bagian halaman. Javascript membuat permintaan get ini bagus dan rapi.