AJAX - Panduan Cepat

AJAX adalah singkatan dari Asinkronis JavaScript dan XML. AJAX adalah teknik baru untuk membuat aplikasi web yang lebih baik, lebih cepat, dan lebih interaktif dengan bantuan XML, HTML, CSS, dan Java Script.

Ajax menggunakan XHTML untuk konten, CSS untuk presentasi, bersama dengan Model Objek Dokumen dan JavaScript untuk tampilan konten dinamis.
Aplikasi web konvensional mengirimkan informasi ke dan dari server menggunakan permintaan sinkron. Ini berarti Anda mengisi formulir, tekan kirim, dan diarahkan ke halaman baru dengan informasi baru dari server.
Dengan AJAX, ketika Anda menekan submit, JavaScript akan membuat permintaan ke server, menafsirkan hasilnya, dan memperbarui layar saat ini. Dalam arti yang paling murni, pengguna tidak akan pernah tahu bahwa ada sesuatu yang dikirim ke server.
XML biasanya digunakan sebagai format untuk menerima data server, meskipun format apa pun, termasuk teks biasa, dapat digunakan.
AJAX adalah teknologi browser web yang tidak bergantung pada perangkat lunak server web.
Seorang pengguna dapat terus menggunakan aplikasi sementara program klien meminta informasi dari server di latar belakang.
Interaksi pengguna yang intuitif dan alami. Mengklik tidak diperlukan, gerakan mouse adalah pemicu peristiwa yang memadai.
Berdasarkan data, bukan berdasarkan halaman.

Teknologi Aplikasi Internet yang Kaya

AJAX adalah teknologi Rich Internet Application (RIA) yang paling layak sejauh ini. Ini mendapatkan momentum industri yang luar biasa dan beberapa tool kit dan kerangka kerja bermunculan. Tetapi pada saat yang sama, AJAX memiliki ketidakcocokan browser dan didukung oleh JavaScript, yang sulit untuk dipelihara dan di-debug.

AJAX didasarkan pada Standar Terbuka

AJAX didasarkan pada standar terbuka berikut -

Presentasi berbasis browser menggunakan HTML dan Cascading Style Sheets (CSS).
Data disimpan dalam format XML dan diambil dari server.
Data di balik layar diambil menggunakan objek XMLHttpRequest di browser.
JavaScript untuk mewujudkan semuanya.

AJAX tidak dapat bekerja secara mandiri. Ini digunakan dalam kombinasi dengan teknologi lain untuk membuat halaman web interaktif.

JavaScript

Bahasa skrip yang diketik longgar.
Fungsi JavaScript dipanggil saat suatu peristiwa terjadi di halaman.
Lem untuk seluruh operasi AJAX.

DOM

API untuk mengakses dan memanipulasi dokumen terstruktur.
Merupakan struktur dokumen XML dan HTML.

CSS

Memungkinkan pemisahan yang jelas antara gaya presentasi dari konten dan dapat diubah secara terprogram oleh JavaScript

XMLHttpRequest

Objek JavaScript yang melakukan interaksi asinkron dengan server.

Berikut adalah daftar dari beberapa aplikasi web terkenal yang menggunakan AJAX.

Google Maps

Pengguna dapat menarik seluruh peta dengan menggunakan mouse, daripada mengklik tombol.

https://maps.google.com/

Google Suggest

Saat Anda mengetik, Google menawarkan saran. Gunakan tombol panah untuk menavigasi hasil.

https://www.google.com/webhp?complete=1&hl=en

Gmail

Gmail adalah email web yang dibangun di atas gagasan bahwa email bisa lebih intuitif, efisien, dan berguna.

https://gmail.com/

Yahoo Maps (baru)

Sekarang semakin mudah dan menyenangkan untuk mencapai tujuan Anda!

https://maps.yahoo.com/

Perbedaan antara AJAX dan Program CGI Konvensional

Cobalah kedua contoh ini satu per satu dan Anda akan merasakan perbedaannya. Saat mencoba contoh AJAX, tidak ada diskontinuitas dan Anda mendapatkan respons dengan sangat cepat, tetapi saat Anda mencoba contoh GCI standar, Anda harus menunggu respons dan halaman Anda juga disegarkan.

Contoh AJAX

Contoh Standar

NOTE- Kami telah memberikan contoh yang lebih kompleks dalam AJAX Database .

Semua browser yang tersedia tidak mendukung AJAX. Berikut adalah daftar browser utama yang mendukung AJAX.

Mozilla Firefox 1.0 dan yang lebih baru.
Netscape versi 7.1 dan yang lebih baru.
Apple Safari 1.2 dan yang lebih baru.
Microsoft Internet Explorer 5 dan yang lebih baru.
Konqueror.
Opera 7.6 ke atas.

Saat Anda menulis aplikasi Anda berikutnya, pertimbangkan browser yang tidak mendukung AJAX.

NOTE - Saat kami mengatakan bahwa browser tidak mendukung AJAX, itu berarti browser tidak mendukung pembuatan objek Javascript - objek XMLHttpRequest.

Menulis Kode Khusus Browser

Cara termudah untuk membuat kode sumber Anda kompatibel dengan browser adalah dengan menggunakan blok try ... catch di JavaScript Anda.

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!

            try {
               // Opera 8.0+, Firefox, Safari 
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {

               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {

                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
         }
         //-->
      </script>
      
      <form name = 'myForm'>
         Name: <input type = 'text' name = 'username' /> <br />
         Time: <input type = 'text' name = 'time' />
      </form>
      
   </body>
</html>

Pada kode JavaScript di atas, kami mencoba tiga kali untuk membuat objek XMLHttpRequest kami. Upaya pertama kami -

ajaxRequest = XMLHttpRequest () baru;

Ini untuk browser Opera 8.0+, Firefox, dan Safari. Jika gagal, kami mencoba dua kali lagi untuk membuat objek yang benar untuk browser Internet Explorer dengan -

ajaxRequest = ActiveXObject baru ("Msxml2.XMLHTTP");
ajaxRequest = ActiveXObject baru ("Microsoft.XMLHTTP");

Jika tidak berhasil, maka kita dapat menggunakan browser yang sangat usang yang tidak mendukung XMLHttpRequest, yang juga berarti tidak mendukung AJAX.

Kemungkinan besar, variabel ajaxRequest kami sekarang akan disetel ke standar XMLHttpRequest apa pun yang digunakan browser dan kami dapat mulai mengirim data ke server. Alur kerja AJAX langkah-bijaksana dijelaskan di bab berikutnya.

Bab ini memberi Anda gambaran yang jelas tentang langkah-langkah operasi AJAX yang tepat.

Langkah-langkah Operasi AJAX

Peristiwa klien terjadi.
Objek XMLHttpRequest dibuat.
Objek XMLHttpRequest dikonfigurasi.
Objek XMLHttpRequest membuat permintaan asinkron ke Webserver.
Webserver mengembalikan hasil yang berisi dokumen XML.
Objek XMLHttpRequest memanggil fungsi callback () dan memproses hasilnya.
DOM HTML diperbarui.

Mari kita lakukan langkah-langkah ini satu per satu.

Peristiwa Klien Terjadi

Fungsi JavaScript dipanggil sebagai hasil dari suatu peristiwa.
Contoh - fungsi JavaScript validateUserId () dipetakan sebagai pengendali peristiwa ke peristiwa onkeyup di kolom formulir masukan yang idnya disetel ke "userid"
<input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId ();">.

Objek XMLHttpRequest Dibuat

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer Browsers
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}

Objek XMLHttpRequest Dikonfigurasi

Pada langkah ini, kita akan menulis sebuah fungsi yang akan dipicu oleh event klien dan fungsi callback processRequest () akan didaftarkan.

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

Membuat Permintaan Asynchronous ke Webserver

Kode sumber tersedia dalam potongan kode di atas. Kode yang ditulis dengan huruf tebal bertanggung jawab untuk melakukan request ke webserver. Ini semua dilakukan dengan menggunakan objek XMLHttpRequest ajaxRequest .

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid"); var url = "validate?id = " + escape(target.value); ajaxRequest.open("GET", url, true); ajaxRequest.send(null);
}

Asumsikan Anda memasukkan Zara di kotak userid, lalu dalam permintaan di atas, URL disetel ke "validate? Id = Zara".

Webserver Mengembalikan Hasil yang Mengandung Dokumen XML

Anda dapat menerapkan skrip sisi server Anda dalam bahasa apa pun, namun logikanya harus seperti berikut.

Dapatkan permintaan dari klien.
Parse masukan dari klien.
Lakukan pemrosesan yang diperlukan.
Kirim hasilnya ke klien.

Jika kami berasumsi bahwa Anda akan menulis servlet, maka berikut adalah potongan kodenya.

public void doGet(HttpServletRequest request,
   HttpServletResponse response) throws IOException, ServletException {
   String targetId = request.getParameter("id");
   
   if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

Fungsi Callback processRequest () Dipanggil

Objek XMLHttpRequest telah dikonfigurasi untuk memanggil fungsi processRequest () ketika ada perubahan status ke readyState dari objek XMLHttpRequest . Sekarang fungsi ini akan menerima hasil dari server dan akan melakukan pemrosesan yang diperlukan. Seperti dalam contoh berikut, ini menetapkan pesan variabel pada benar atau salah berdasarkan nilai yang dikembalikan dari Webserver.

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

DOM HTML Diperbarui

Ini adalah langkah terakhir dan pada langkah ini, halaman HTML Anda akan diperbarui. Itu terjadi dengan cara berikut -

JavaScript mendapatkan referensi ke elemen apa pun di halaman menggunakan DOM API.
Cara yang direkomendasikan untuk mendapatkan referensi ke sebuah elemen adalah dengan memanggil.

document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document

JavaScript sekarang dapat digunakan untuk mengubah atribut elemen; memodifikasi properti gaya elemen; atau menambah, menghapus, atau memodifikasi elemen anak. Ini contohnya -

<script type = "text/javascript">
   <!--
   function setMessageUsingDOM(message) {
      var userMessageElement = document.getElementById("userIdMessage");
      var messageText;
      
      if (message == "false") {
         userMessageElement.style.color = "red";
         messageText = "Invalid User Id";
      } else {
         userMessageElement.style.color = "green";
         messageText = "Valid User Id";
      }
      
      var messageBody = document.createTextNode(messageText);
      
      // if the messageBody element has been created simple 
      // replace it otherwise append the new element
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->
</script>

<body>
   <div id = "userIdMessage"><div>
</body>

Jika Anda telah memahami tujuh langkah yang disebutkan di atas, maka Anda hampir selesai dengan AJAX. Pada bab selanjutnya, kita akan melihat objek XMLHttpRequest lebih detail.

Objek XMLHttpRequest adalah kunci AJAX. Ini telah tersedia sejak Internet Explorer 5.5 dirilis pada Juli 2000, tetapi tidak sepenuhnya ditemukan sampai AJAX dan Web 2.0 pada tahun 2005 menjadi populer.

XMLHttpRequest (XHR) adalah API yang dapat digunakan oleh JavaScript, JScript, VBScript, dan bahasa skrip browser web lainnya untuk mentransfer dan memanipulasi data XML ke dan dari server web menggunakan HTTP, membuat saluran koneksi independen antara Sisi-Klien halaman web dan Sisi server.

Data yang dikembalikan dari panggilan XMLHttpRequest akan sering disediakan oleh database back-end. Selain XML, XMLHttpRequest dapat digunakan untuk mengambil data dalam format lain, misalnya JSON atau bahkan teks biasa.

Anda sudah melihat beberapa contoh tentang cara membuat objek XMLHttpRequest.

Di bawah ini adalah beberapa metode dan properti yang harus Anda pahami.

Metode XMLHttpRequest

abort()

Membatalkan permintaan saat ini.
getAllResponseHeaders()

Mengembalikan set lengkap header HTTP sebagai string.
getResponseHeader( headerName )

Mengembalikan nilai dari header HTTP yang ditentukan.
open( method, URL )
open( method, URL, async )
open( method, URL, async, userName )
open( method, URL, async, userName, password )

Menentukan metode, URL, dan atribut opsional lain dari sebuah permintaan.

Parameter metode dapat memiliki nilai "GET", "POST", atau "HEAD". Metode HTTP lain seperti "PUT" dan "DELETE" (terutama digunakan dalam aplikasi REST) dapat dilakukan.

Parameter "async" menentukan apakah permintaan harus ditangani secara asinkron atau tidak. "true" berarti pemrosesan skrip berjalan setelah metode send () tanpa menunggu respons, dan "false" berarti skrip menunggu respons sebelum melanjutkan pemrosesan skrip.
send( content )

Mengirim permintaan.
setRequestHeader( label, value )

Menambahkan pasangan label / nilai ke header HTTP yang akan dikirim.

Properti XMLHttpRequest

onreadystatechange

Pengendali peristiwa untuk peristiwa yang diaktifkan di setiap perubahan status.
readyState

Properti readyState mendefinisikan status saat ini dari objek XMLHttpRequest.

Tabel berikut menyediakan daftar nilai yang mungkin untuk properti readyState -

Negara	Deskripsi
0	Permintaan tidak diinisialisasi.
1	Permintaan telah disiapkan.
2	Permintaan telah dikirim.
3	Permintaan sedang dalam proses.
4	Permintaan selesai.

readyState = 0 Setelah Anda membuat objek XMLHttpRequest, tetapi sebelumnya Anda telah memanggil metode open ().

readyState = 1 Setelah Anda memanggil metode open (), tetapi sebelumnya Anda telah memanggil send ().

readyState = 2 Setelah Anda memanggil send ().

readyState = 3 Setelah browser menjalin komunikasi dengan server, tetapi sebelum server menyelesaikan respons.

readyState = 4 Setelah permintaan selesai, dan data tanggapan telah diterima sepenuhnya dari server.

responseText

Mengembalikan respons sebagai string.
responseXML

Mengembalikan respons sebagai XML. Properti ini mengembalikan objek dokumen XML, yang dapat diperiksa dan diurai menggunakan metode dan properti pohon simpul DOM W3C.
status

Mengembalikan status sebagai angka (mis., 404 untuk "Tidak Ditemukan" dan 200 untuk "OK").
statusText

Mengembalikan status sebagai string (misalnya, "Not Found" atau "OK").

Untuk menggambarkan dengan jelas betapa mudahnya mengakses informasi dari database menggunakan AJAX, kita akan membuat kueri MySQL dengan cepat dan menampilkan hasilnya di "ajax.html". Tetapi sebelum kita melanjutkan, mari kita lakukan pekerjaan dasar. Buat tabel menggunakan perintah berikut.

NOTE - Kami menganggap Anda memiliki hak cukup untuk melakukan operasi MySQL berikut.

CREATE TABLE 'ajax_example' (
   'name' varchar(50) NOT NULL,
   'age' int(11) NOT NULL,
   'sex' varchar(1) NOT NULL,
   'wpm' int(11) NOT NULL,
   PRIMARY KEY  ('name')
)

Sekarang buang data berikut ke dalam tabel ini menggunakan pernyataan SQL berikut -

INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);

File HTML Sisi Klien

Sekarang mari kita memiliki file HTML sisi klien kita, yaitu ajax.html, dan itu akan memiliki kode berikut -

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!
            
            try {        
               // Opera 8.0+, Firefox, Safari
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {
               
               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
            
            // Create a function that will receive data
            // sent from the server and will update
            // div section in the same page.
            ajaxRequest.onreadystatechange = function() {
            
               if(ajaxRequest.readyState == 4) {
                  var ajaxDisplay = document.getElementById('ajaxDiv');
                  ajaxDisplay.innerHTML = ajaxRequest.responseText;
               }
            }
            
            // Now get the value from user and pass it to
            // server script.
            var age = document.getElementById('age').value;
            var wpm = document.getElementById('wpm').value;
            var sex = document.getElementById('sex').value;
            var queryString = "?age = " + age ;
            
            queryString +=  "&wpm = " + wpm + "&sex = " + sex;
            ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
            ajaxRequest.send(null); 
         }
         //-->
      </script>

      <form name = 'myForm'>
         Max Age: <input type = 'text' id = 'age' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' /> <br />
         Sex: 
         
         <select id = 'sex'>
            <option value = "m">m</option>
            <option value = "f">f</option>
         </select>
         
         <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
      </form>
      
      <div id = 'ajaxDiv'>Your result will display here</div>
   </body>
</html>

NOTE - Cara melewatkan variabel dalam Query sesuai dengan standar HTTP dan memiliki formA.

URL?variable1 = value1;&variable2 = value2;

Kode di atas akan memberi Anda layar seperti yang diberikan di bawah ini -

Hasil Anda akan ditampilkan di sini di bagian ini setelah Anda membuat entri.

NOTE - Ini adalah layar tiruan.

File PHP Sisi Server

Skrip sisi klien Anda sudah siap. Sekarang, kita harus menulis skrip sisi server kita, yang akan mengambil usia, wpm, dan jenis kelamin dari database dan akan mengirimkannya kembali ke klien. Letakkan kode berikut ke dalam file "ajax-example.php".

<?php
$dbhost = "localhost"; $dbuser = "dbusername";
$dbpass = "dbpassword"; $dbname = "dbname";
	
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error());
	
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
	
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
	
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";

if(is_numeric($age)) $query .= " AND age <= $age"; if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
	
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());

//Build Result String
$display_string = "<table>"; $display_string .= "<tr>";
$display_string .= "<th>Name</th>"; $display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>"; $display_string .= "<th>WPM</th>";
$display_string .= "</tr>"; // Insert a new row in the table for each person returned while($row = mysql_fetch_array($qry_result)) { $display_string .= "<tr>";
   $display_string .= "<td>$row[name]</td>";
   $display_string .= "<td>$row[age]</td>";
   $display_string .= "<td>$row[sex]</td>";
   $display_string .= "<td>$row[wpm]</td>";
   $display_string .= "</tr>"; } echo "Query: " . $query . "<br />";
$display_string .= "</table>"; echo $display_string;
?>

Sekarang coba dengan memasukkan nilai yang valid (misalnya, 120) di Max Age atau kotak lainnya dan kemudian klik tombol Query MySQL.

Hasil Anda akan ditampilkan di sini di bagian ini setelah Anda membuat entri.

Jika Anda telah berhasil menyelesaikan pelajaran ini, maka Anda tahu cara menggunakan MySQL, PHP, HTML, dan Javascript secara bersamaan untuk menulis aplikasi AJAX.

Keamanan AJAX: Sisi Server

Aplikasi Web berbasis AJAX menggunakan skema keamanan sisi server yang sama dengan aplikasi Web biasa.
Anda menentukan persyaratan otentikasi, otorisasi, dan perlindungan data di file web.xml Anda (deklaratif) atau di program Anda (terprogram).
Aplikasi Web berbasis AJAX tunduk pada ancaman keamanan yang sama seperti aplikasi Web biasa.

Keamanan AJAX: Sisi Klien

Kode JavaScript dapat dilihat oleh pengguna / peretas. Peretas dapat menggunakan kode JavaScript untuk menyimpulkan kelemahan sisi server.
Kode JavaScript diunduh dari server dan dieksekusi ("eval") di klien dan dapat membahayakan klien dengan kode yang salah.
Kode JavaScript yang diunduh dibatasi oleh model keamanan kotak pasir dan dapat disesuaikan untuk JavaScript yang ditandatangani.

AJAX berkembang sangat cepat dan itulah alasannya mengandung banyak masalah dengannya. Kami berharap dengan berjalannya waktu akan teratasi dan AJAX akan menjadi ideal untuk aplikasi web. Kami mencantumkan beberapa masalah yang saat ini dialami AJAX.

Complexity is increased

Pengembang sisi server perlu memahami bahwa logika presentasi akan diperlukan di halaman klien HTML serta logika sisi server.
Pengembang halaman harus memiliki keterampilan teknologi JavaScript.

AJAX-based applications can be difficult to debug, test, and maintain