AJAX - Szybki przewodnik

AJAX oznacza Asynchroniczny JavaScript i XML. AJAX to nowa technika tworzenia lepszych, szybszych i bardziej interaktywnych aplikacji internetowych za pomocą XML, HTML, CSS i Java Script.

Ajax używa XHTML do treści, CSS do prezentacji, a także Document Object Model i JavaScript do dynamicznego wyświetlania treści.
Konwencjonalne aplikacje internetowe przesyłają informacje do iz serwera przy użyciu synchronicznych żądań. Oznacza to, że wypełniasz formularz, klikasz przycisk Prześlij i zostajesz przekierowany na nową stronę z nowymi informacjami z serwera.
W przypadku AJAX, kiedy klikniesz Prześlij, JavaScript wyśle żądanie do serwera, zinterpretuje wyniki i zaktualizuje bieżący ekran. Mówiąc najprościej, użytkownik nigdy nie wiedziałby, że cokolwiek zostało nawet przesłane na serwer.
XML jest powszechnie używany jako format do odbierania danych z serwera, chociaż można użyć dowolnego formatu, w tym zwykłego tekstu.
AJAX to technologia przeglądarki internetowej niezależna od oprogramowania serwera WWW.
Użytkownik może nadal korzystać z aplikacji, podczas gdy program kliencki żąda informacji z serwera w tle.
Intuicyjna i naturalna interakcja z użytkownikiem. Klikanie nie jest wymagane, ruch myszy jest wystarczającym wyzwalaczem zdarzenia.
Oparty na danych, a nie na stronach.

Bogata technologia aplikacji internetowych

AJAX to jak dotąd najbardziej opłacalna technologia Rich Internet Application (RIA). Nabiera ogromnego tempa w branży i pojawia się kilka zestawów narzędzi i ram. Ale jednocześnie AJAX jest niekompatybilny z przeglądarkami i jest obsługiwany przez JavaScript, który jest trudny do utrzymania i debugowania.

AJAX jest oparty na otwartych standardach

AJAX jest oparty na następujących otwartych standardach -

Prezentacja oparta na przeglądarce wykorzystująca HTML i kaskadowe arkusze stylów (CSS).
Dane są przechowywane w formacie XML i pobierane z serwera.
Dane zza kulis są pobierane za pomocą obiektów XMLHttpRequest w przeglądarce.
JavaScript, aby wszystko się stało.

AJAX nie może działać niezależnie. Jest używany w połączeniu z innymi technologiami do tworzenia interaktywnych stron internetowych.

JavaScript

Luźny język skryptowy.
Funkcja JavaScript jest wywoływana, gdy na stronie wystąpi zdarzenie.
Klej do całej operacji AJAX.

DOM

API do uzyskiwania dostępu do ustrukturyzowanych dokumentów i manipulowania nimi.
Reprezentuje strukturę dokumentów XML i HTML.

CSS

Pozwala na wyraźne oddzielenie stylu prezentacji od treści i może być zmieniany programowo przez JavaScript

XMLHttpRequest

Obiekt JavaScript, który wykonuje asynchroniczną interakcję z serwerem.

Oto lista znanych aplikacji internetowych, które korzystają z technologii AJAX.

mapy Google

Użytkownik może przeciągnąć całą mapę za pomocą myszy zamiast klikania przycisku.

https://maps.google.com/

Google Suggest

Podczas pisania Google wyświetla sugestie. Użyj klawiszy strzałek, aby poruszać się po wynikach.

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

Gmail

Gmail to poczta internetowa oparta na założeniu, że e-maile mogą być bardziej intuicyjne, wydajne i przydatne.

https://gmail.com/

Mapy Yahoo (nowe)

Teraz jest jeszcze łatwiej i przyjemniej dostać się tam, dokąd się wybierasz!

https://maps.yahoo.com/

Różnica między AJAX a konwencjonalnym programem CGI

Wypróbuj te dwa przykłady jeden po drugim, a poczujesz różnicę. Podczas wypróbowywania przykładu AJAX nie ma nieciągłości i otrzymujesz odpowiedź bardzo szybko, ale gdy wypróbujesz standardowy przykład GCI, musisz poczekać na odpowiedź, a Twoja strona również zostanie odświeżona.

Przykład AJAX

Standardowy przykład

NOTE- Podaliśmy bardziej złożony przykład w bazie danych AJAX .

Żadna z dostępnych przeglądarek nie obsługuje technologii AJAX. Oto lista głównych przeglądarek obsługujących AJAX.

Mozilla Firefox 1.0 i nowsze.
Netscape w wersji 7.1 i nowszych.
Apple Safari 1.2 i nowsze.
Microsoft Internet Explorer 5 i nowszy.
Konqueror.
Opera 7.6 i nowsze.

Pisząc kolejną aplikację, weź pod uwagę przeglądarki, które nie obsługują technologii AJAX.

NOTE - Kiedy mówimy, że przeglądarka nie obsługuje AJAX, oznacza to po prostu, że przeglądarka nie obsługuje tworzenia obiektu Javascript - obiektu XMLHttpRequest.

Pisanie kodu specyficznego dla przeglądarki

Najprostszym sposobem na dostosowanie kodu źródłowego do przeglądarki jest użycie bloków try ... catch w JavaScript.

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

W powyższym kodzie JavaScript próbujemy trzy razy utworzyć nasz obiekt XMLHttpRequest. Nasza pierwsza próba -

ajaxRequest = new XMLHttpRequest ();

Jest przeznaczony dla przeglądarek Opera 8.0+, Firefox i Safari. Jeśli to się nie powiedzie, próbujemy jeszcze dwa razy utworzyć poprawny obiekt dla przeglądarki Internet Explorer z -

ajaxRequest = nowy obiekt ActiveXObject ("Msxml2.XMLHTTP");
ajaxRequest = nowy obiekt ActiveXObject ("Microsoft.XMLHTTP");

Jeśli to nie zadziała, możemy użyć bardzo przestarzałej przeglądarki, która nie obsługuje XMLHttpRequest, co oznacza również, że nie obsługuje AJAX.

Najprawdopodobniej jednak nasza zmienna ajaxRequest będzie teraz ustawiona na dowolny standard XMLHttpRequest używany przez przeglądarkę i możemy rozpocząć wysyłanie danych na serwer. Krokowy przepływ pracy AJAX został wyjaśniony w następnym rozdziale.

Ten rozdział daje jasny obraz dokładnych kroków operacji AJAX.

Kroki operacji AJAX

Występuje zdarzenie klienta.
Tworzony jest obiekt XMLHttpRequest.
Obiekt XMLHttpRequest jest skonfigurowany.
Obiekt XMLHttpRequest wysyła asynchroniczne żądanie do serwera WWW.
Serwer WWW zwraca wynik zawierający dokument XML.
Obiekt XMLHttpRequest wywołuje funkcję callback () i przetwarza wynik.
Zaktualizowany HTML DOM.

Wykonajmy te kroki jeden po drugim.

Występuje zdarzenie klienta

W wyniku zdarzenia wywoływana jest funkcja JavaScript.
Przykład - funkcja validateUserId () w języku JavaScript jest mapowana jako moduł obsługi zdarzenia na zdarzenie onkeyup w polu formularza wejściowego, którego identyfikator jest ustawiony na „identyfikator użytkownika”
<input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId ();">.

Utworzono obiekt XMLHttpRequest

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;
         }
      }
   }
}

Skonfigurowano obiekt XMLHttpRequest

W tym kroku napiszemy funkcję, która zostanie wyzwolona przez zdarzenie klienta i zostanie zarejestrowana funkcja zwrotna processRequest ().

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);
}

Wysyłanie asynchronicznego żądania do serwera WWW

Kod źródłowy jest dostępny w powyższym fragmencie kodu. Kod napisany pogrubioną czcionką odpowiada za przesłanie żądania do serwera WWW. Wszystko to odbywa się za pomocą obiektu ajaxRequest XMLHttpRequest .

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);
}

Załóżmy, że wpisujesz Zara w polu identyfikatora użytkownika, a następnie w powyższym żądaniu adres URL jest ustawiony na „validate? Id = Zara”.

Serwer WWW zwraca wynik zawierający dokument XML

Możesz zaimplementować skrypt po stronie serwera w dowolnym języku, jednak jego logika powinna wyglądać następująco.

Uzyskaj prośbę od klienta.
Przeanalizuj dane wejściowe od klienta.
Wykonaj wymagane przetwarzanie.
Wyślij dane wyjściowe do klienta.

Jeśli założymy, że masz zamiar napisać serwlet, oto fragment kodu.

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>");
   }
}

Wywoływana jest funkcja wywołania zwrotnego processRequest ()

XMLHttpRequest obiekt został skonfigurowany tak, aby wywołać funkcję processRequest (), gdy nastąpiła zmiana stanu do readyState z XMLHttpRequest obiektu. Teraz ta funkcja otrzyma wynik z serwera i wykona wymagane przetwarzanie. Jak w poniższym przykładzie, ustawia komunikat zmiennej na wartość true lub false na podstawie wartości zwróconej z serwera WWW.

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

Zaktualizowany HTML DOM

To jest ostatni krok. W tym kroku Twoja strona HTML zostanie zaktualizowana. Dzieje się to w następujący sposób -

JavaScript pobiera odniesienie do dowolnego elementu na stronie za pomocą DOM API.
Zalecanym sposobem uzyskania odniesienia do elementu jest wywołanie.

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

JavaScript może być teraz używany do modyfikowania atrybutów elementu; zmodyfikować właściwości stylu elementu; lub dodaj, usuń lub zmodyfikuj elementy podrzędne. Oto przykład -

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

Jeśli zrozumiałeś wyżej wymienione siedem kroków, to prawie skończyłeś z AJAX. W następnym rozdziale zobaczymy bardziej szczegółowo obiekt XMLHttpRequest .

Obiekt XMLHttpRequest jest kluczem do AJAX. Jest dostępny od czasu wydania przeglądarki Internet Explorer 5.5 w lipcu 2000 r., Ale nie został w pełni odkryty, dopóki AJAX i Web 2.0 w 2005 r. Nie stały się popularne.

XMLHttpRequest (XHR) to interfejs API, który może być używany przez JavaScript, JScript, VBScript i inne języki skryptowe przeglądarek internetowych do przesyłania i manipulowania danymi XML do iz serwera internetowego przy użyciu protokołu HTTP, ustanawiając niezależny kanał połączenia między stroną klienta a stroną internetową Po stronie serwera.

Dane zwrócone z wywołań XMLHttpRequest będą często dostarczane przez wewnętrzne bazy danych. Oprócz XML, XMLHttpRequest może służyć do pobierania danych w innych formatach, np. JSON lub nawet zwykły tekst.

Widzieliście już kilka przykładów tworzenia obiektu XMLHttpRequest.

Poniżej wymienione są niektóre metody i właściwości, z którymi należy się zapoznać.

Metody XMLHttpRequest

abort()

Anuluje bieżące żądanie.
getAllResponseHeaders()

Zwraca pełny zestaw nagłówków HTTP jako ciąg.
getResponseHeader( headerName )

Zwraca wartość określonego nagłówka HTTP.
open( method, URL )
open( method, URL, async )
open( method, URL, async, userName )
open( method, URL, async, userName, password )

Określa metodę, adres URL i inne opcjonalne atrybuty żądania.

Parametr metody może mieć wartość „GET”, „POST” lub „HEAD”. Możliwe są inne metody HTTP, takie jak „PUT” i „DELETE” (używane głównie w aplikacjach REST).

Parametr „async” określa, czy żądanie powinno być obsługiwane asynchronicznie, czy nie. „prawda” oznacza, że przetwarzanie skryptu jest kontynuowane po wykonaniu metody send () bez oczekiwania na odpowiedź, a „fałsz” oznacza, że skrypt czeka na odpowiedź przed kontynuowaniem przetwarzania skryptu.
send( content )

Wysyła żądanie.
setRequestHeader( label, value )

Dodaje parę etykieta / wartość do wysyłanego nagłówka HTTP.

Właściwości XMLHttpRequest

onreadystatechange

Program obsługi zdarzeń dla zdarzenia uruchamianego przy każdej zmianie stanu.
readyState

Właściwość readyState definiuje aktualny stan obiektu XMLHttpRequest.

Poniższa tabela zawiera listę możliwych wartości właściwości readyState -

Stan	Opis
0	Żądanie nie zostało zainicjowane.
1	Żądanie zostało utworzone.
2	Żądanie zostało wysłane.
3	Żądanie jest przetwarzane.
4	Żądanie zostało zakończone.

readyState = 0 Po utworzeniu obiektu XMLHttpRequest, ale przed wywołaniem metody open ().

readyState = 1 Po wywołaniu metody open (), ale przed wywołaniem metody send ().

readyState = 2 Po wywołaniu funkcji send ().

readyState = 3 Po nawiązaniu przez przeglądarkę komunikacji z serwerem, ale zanim serwer zakończy odpowiedź.

readyState = 4 Po zakończeniu żądania i całkowitym odebraniu danych odpowiedzi z serwera.

responseText

Zwraca odpowiedź jako ciąg.
responseXML

Zwraca odpowiedź jako XML. Ta właściwość zwraca obiekt dokumentu XML, który można zbadać i przeanalizować przy użyciu metod i właściwości drzewa węzłów W3C DOM.
status

Zwraca stan jako liczbę (np. 404 dla „Nie znaleziono” i 200 dla „OK”).
statusText

Zwraca status jako ciąg znaków (np. „Nie znaleziono” lub „OK”).

Aby jasno zilustrować, jak łatwo jest uzyskać dostęp do informacji z bazy danych za pomocą AJAX, zamierzamy tworzyć zapytania MySQL w locie i wyświetlać wyniki w „ajax.html”. Ale zanim przejdziemy dalej, zróbmy podstawowe prace. Utwórz tabelę za pomocą następującego polecenia.

NOTE - Zakładamy, że masz wystarczające uprawnienia do wykonywania następujących operacji MySQL.

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

Teraz zrzuć następujące dane do tej tabeli, używając następujących instrukcji SQL -

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

Plik HTML po stronie klienta

Teraz mamy nasz plik HTML po stronie klienta, którym jest ajax.html, i będzie on miał następujący kod -

<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 - Sposób przekazywania zmiennych w Zapytaniu jest zgodny ze standardem HTTP i ma formA.

URL?variable1 = value1;&variable2 = value2;

Powyższy kod da ci ekran jak podany poniżej -

Twój wynik zostanie wyświetlony w tej sekcji po dokonaniu wpisu.

NOTE - To jest fałszywy ekran.

Plik PHP po stronie serwera

Twój skrypt po stronie klienta jest gotowy. Teraz musimy napisać nasz skrypt po stronie serwera, który pobierze z bazy danych wiek, wpm i płeć i odeśle je z powrotem do klienta. Umieść następujący kod w pliku „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;
?>

Teraz spróbuj wprowadzić poprawną wartość (np. 120) w Max Age lub inne pole, a następnie kliknij przycisk Zapytaj MySQL.

Twój wynik zostanie wyświetlony w tej sekcji po dokonaniu wpisu.

Jeśli pomyślnie ukończyłeś tę lekcję, wiesz, jak używać MySQL, PHP, HTML i Javascript w tandemie do pisania aplikacji AJAX.

Zabezpieczenia AJAX: po stronie serwera

Aplikacje internetowe oparte na technologii AJAX używają tych samych schematów zabezpieczeń po stronie serwera, co zwykłe aplikacje internetowe.
Określasz wymagania dotyczące uwierzytelniania, autoryzacji i ochrony danych w swoim pliku web.xml (deklaratywne) lub w swoim programie (programmatic).
Aplikacje internetowe oparte na technologii AJAX podlegają tym samym zagrożeniom bezpieczeństwa, co zwykłe aplikacje internetowe.

Bezpieczeństwo AJAX: po stronie klienta

Kod JavaScript jest widoczny dla użytkownika / hakera. Haker może wykorzystać kod JavaScript do wnioskowania o słabościach po stronie serwera.
Kod JavaScript jest pobierany z serwera i wykonywany („eval”) na kliencie i może zagrozić klientowi poprzez niewłaściwy kod.
Pobrany kod JavaScript jest ograniczony przez model zabezpieczeń typu sand-box i można go złagodzić w przypadku podpisanego kodu JavaScript.

AJAX rozwija się bardzo szybko i dlatego zawiera wiele problemów. Mamy nadzieję, że z biegiem czasu zostaną rozwiązane i AJAX stanie się idealnym rozwiązaniem dla aplikacji internetowych. Wymieniamy kilka problemów, na które obecnie cierpi AJAX.

Complexity is increased

Programiści działający po stronie serwera będą musieli zrozumieć, że logika prezentacji będzie wymagana na stronach klienta HTML, a także w logice po stronie serwera.
Twórcy stron muszą mieć umiejętności obsługi JavaScript.

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