AJAX - Kurzanleitung

AJAX steht für Asynchron JavaScript und XML. AJAX ist eine neue Technik zum Erstellen besserer, schnellerer und interaktiverer Webanwendungen mithilfe von XML, HTML, CSS und Java Script.

Ajax verwendet XHTML für Inhalte, CSS für Präsentationen sowie Document Object Model und JavaScript für die dynamische Anzeige von Inhalten.
Herkömmliche Webanwendungen übertragen Informationen mithilfe synchroner Anforderungen zum und vom Server. Dies bedeutet, dass Sie ein Formular ausfüllen, auf Senden klicken und zu einer neuen Seite mit neuen Informationen vom Server weitergeleitet werden.
Wenn Sie mit AJAX auf Senden klicken, sendet JavaScript eine Anfrage an den Server, interpretiert die Ergebnisse und aktualisiert den aktuellen Bildschirm. Im reinsten Sinne würde der Benutzer niemals wissen, dass überhaupt etwas an den Server übertragen wurde.
XML wird üblicherweise als Format für den Empfang von Serverdaten verwendet, obwohl jedes Format, einschließlich Klartext, verwendet werden kann.
AJAX ist eine Webbrowsertechnologie, die von der Webserver-Software unabhängig ist.
Ein Benutzer kann die Anwendung weiterhin verwenden, während das Client-Programm im Hintergrund Informationen vom Server anfordert.
Intuitive und natürliche Benutzerinteraktion. Ein Klicken ist nicht erforderlich, eine Mausbewegung ist ein ausreichender Ereignisauslöser.
Datengesteuert im Gegensatz zu seitengesteuert.

Rich Internet Application Technology

AJAX ist die bislang am besten geeignete RIA-Technologie (Rich Internet Application). Es gewinnt eine enorme Dynamik in der Branche und es entstehen verschiedene Toolkits und Frameworks. Gleichzeitig weist AJAX eine Browser-Inkompatibilität auf und wird von JavaScript unterstützt, das schwer zu warten und zu debuggen ist.

AJAX basiert auf offenen Standards

AJAX basiert auf den folgenden offenen Standards:

Browserbasierte Präsentation mit HTML und Cascading Style Sheets (CSS).
Die Daten werden im XML-Format gespeichert und vom Server abgerufen.
Daten werden hinter den Kulissen mithilfe von XMLHttpRequest-Objekten im Browser abgerufen.
JavaScript, um alles möglich zu machen.

AJAX kann nicht unabhängig arbeiten. Es wird in Kombination mit anderen Technologien verwendet, um interaktive Webseiten zu erstellen.

JavaScript

Locker getippte Skriptsprache.
Die JavaScript-Funktion wird aufgerufen, wenn ein Ereignis auf einer Seite auftritt.
Kleber für den gesamten AJAX-Betrieb.

DOM

API für den Zugriff auf und die Bearbeitung von strukturierten Dokumenten.
Repräsentiert die Struktur von XML- und HTML-Dokumenten.

CSS

Ermöglicht eine klare Trennung des Präsentationsstils vom Inhalt und kann programmgesteuert durch JavaScript geändert werden

XMLHttpRequest

JavaScript-Objekt, das eine asynchrone Interaktion mit dem Server ausführt.

Hier ist eine Liste einiger bekannter Webanwendungen, die AJAX verwenden.

Google Maps

Ein Benutzer kann eine gesamte Karte mit der Maus ziehen, anstatt auf eine Schaltfläche zu klicken.

https://maps.google.com/

Google Suggest

Während der Eingabe bietet Google Vorschläge an. Verwenden Sie die Pfeiltasten, um durch die Ergebnisse zu navigieren.

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

Google Mail

Google Mail ist ein Webmail, das auf der Idee basiert, dass E-Mails intuitiver, effizienter und nützlicher sein können.

https://gmail.com/

Yahoo Maps (neu)

Jetzt ist es noch einfacher und macht mehr Spaß, dorthin zu gelangen, wo Sie hin wollen!

https://maps.yahoo.com/

Unterschied zwischen AJAX und konventionellem CGI-Programm

Probieren Sie diese beiden Beispiele nacheinander aus und Sie werden den Unterschied spüren. Beim Ausprobieren des AJAX-Beispiels gibt es keine Diskontinuität und Sie erhalten die Antwort sehr schnell. Wenn Sie jedoch das Standard-GCI-Beispiel ausprobieren, müssen Sie auf die Antwort warten, und Ihre Seite wird ebenfalls aktualisiert.

AJAX-Beispiel

Standardbeispiel

NOTE- Wir haben ein komplexeres Beispiel in der AJAX-Datenbank angegeben .

Alle verfügbaren Browser können AJAX nicht unterstützen. Hier ist eine Liste der wichtigsten Browser, die AJAX unterstützen.

Mozilla Firefox 1.0 und höher.
Netscape Version 7.1 und höher.
Apple Safari 1.2 und höher.
Microsoft Internet Explorer 5 und höher.
Konqueror.
Opera 7.6 und höher.

Berücksichtigen Sie beim Schreiben Ihrer nächsten Anwendung die Browser, die AJAX nicht unterstützen.

NOTE - Wenn wir sagen, dass ein Browser AJAX nicht unterstützt, bedeutet dies einfach, dass der Browser die Erstellung eines Javascript-Objekts - XMLHttpRequest-Objekts - nicht unterstützt.

Browserspezifischen Code schreiben

Der einfachste Weg, Ihren Quellcode mit einem Browser kompatibel zu machen, ist die Verwendung von try ... catch- Blöcken in Ihrem 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>

Im obigen JavaScript-Code versuchen wir dreimal, unser XMLHttpRequest-Objekt zu erstellen. Unser erster Versuch -

ajaxRequest = new XMLHttpRequest ();

Es ist für Opera 8.0+, Firefox und Safari Browser. Wenn dies fehlschlägt, versuchen wir noch zweimal, das richtige Objekt für einen Internet Explorer-Browser mit - zu erstellen.

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

Wenn es nicht funktioniert, können wir einen sehr veralteten Browser verwenden, der XMLHttpRequest nicht unterstützt, was auch bedeutet, dass AJAX nicht unterstützt wird.

Höchstwahrscheinlich wird unsere Variable ajaxRequest jetzt auf den vom Browser verwendeten XMLHttpRequest- Standard gesetzt, und wir können Daten an den Server senden. Der schrittweise AJAX-Workflow wird im nächsten Kapitel erläutert.

Dieses Kapitel gibt Ihnen ein klares Bild der genauen Schritte des AJAX-Betriebs.

Schritte des AJAX-Betriebs

Ein Client-Ereignis tritt auf.
Ein XMLHttpRequest-Objekt wird erstellt.
Das XMLHttpRequest-Objekt ist konfiguriert.
Das XMLHttpRequest-Objekt sendet eine asynchrone Anforderung an den Webserver.
Der Webserver gibt das Ergebnis mit dem XML-Dokument zurück.
Das XMLHttpRequest-Objekt ruft die Funktion callback () auf und verarbeitet das Ergebnis.
Das HTML-DOM wird aktualisiert.

Lassen Sie uns diese Schritte einzeln ausführen.

Ein Client-Ereignis tritt auf

Eine JavaScript-Funktion wird als Ergebnis eines Ereignisses aufgerufen.
Beispiel - Die JavaScript-Funktion validateUserId () wird als Ereignishandler einem Onkeyup- Ereignis im Eingabeformularfeld zugeordnet, dessen ID auf "Benutzer-ID" festgelegt ist.
<input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId ();">.

Das XMLHttpRequest-Objekt wird erstellt

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

Das XMLHttpRequest-Objekt ist konfiguriert

In diesem Schritt schreiben wir eine Funktion, die vom Client-Ereignis ausgelöst wird, und eine Rückruffunktion processRequest () wird registriert.

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

Asynchrone Anforderung an den Webserver

Der Quellcode ist im obigen Code verfügbar. Fett gedruckter Code ist dafür verantwortlich, eine Anfrage an den Webserver zu richten. Dies geschieht alles mit dem XMLHttpRequest-Objekt 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);
}

Angenommen, Sie geben Zara in das Feld Benutzer-ID ein, und in der obigen Anforderung wird die URL auf "validieren? Id = Zara" gesetzt.

Webserver Gibt das Ergebnis zurück, das das XML-Dokument enthält

Sie können Ihr serverseitiges Skript in einer beliebigen Sprache implementieren. Die Logik sollte jedoch wie folgt lauten.

Erhalten Sie eine Anfrage vom Kunden.
Analysieren Sie die Eingabe vom Client.
Führen Sie die erforderliche Verarbeitung durch.
Senden Sie die Ausgabe an den Client.

Wenn wir davon ausgehen, dass Sie ein Servlet schreiben, finden Sie hier den Code.

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

Rückruffunktion processRequest () wird aufgerufen

Das XMLHttpRequest-Objekt wurde so konfiguriert, dass es die processRequest () -Funktion aufruft, wenn sich der Status des XMLHttpRequest- Objekts im Status "readyState" ändert . Diese Funktion empfängt nun das Ergebnis vom Server und führt die erforderliche Verarbeitung durch. Wie im folgenden Beispiel wird eine variable Nachricht basierend auf dem vom Webserver zurückgegebenen Wert auf true oder false gesetzt.

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

Das HTML-DOM wird aktualisiert

Dies ist der letzte Schritt und in diesem Schritt wird Ihre HTML-Seite aktualisiert. Es passiert folgendermaßen:

JavaScript erhält mithilfe der DOM-API einen Verweis auf ein Element auf einer Seite.
Der empfohlene Weg, um einen Verweis auf ein Element zu erhalten, ist der Aufruf.

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

JavaScript kann jetzt verwendet werden, um die Attribute des Elements zu ändern. Ändern Sie die Stileigenschaften des Elements. oder fügen Sie die untergeordneten Elemente hinzu, entfernen Sie sie oder ändern Sie sie. Hier ist ein Beispiel -

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

Wenn Sie die oben genannten sieben Schritte verstanden haben, sind Sie mit AJAX fast fertig. Im nächsten Kapitel werden wir das XMLHttpRequest- Objekt genauer sehen.

Das XMLHttpRequest-Objekt ist der Schlüssel zu AJAX. Es ist seit der Veröffentlichung von Internet Explorer 5.5 im Juli 2000 verfügbar, wurde jedoch erst vollständig entdeckt, als AJAX und Web 2.0 im Jahr 2005 populär wurden.

XMLHttpRequest (XHR) ist eine API, die von JavaScript, JScript, VBScript und anderen Webbrowserskriptsprachen verwendet werden kann, um XML-Daten mithilfe von HTTP zu und von einem Webserver zu übertragen und zu bearbeiten und einen unabhängigen Verbindungskanal zwischen der Client-Seite und einer Webseite herzustellen Serverseitig.

Die von XMLHttpRequest-Aufrufen zurückgegebenen Daten werden häufig von Back-End-Datenbanken bereitgestellt. Neben XML kann XMLHttpRequest zum Abrufen von Daten in anderen Formaten verwendet werden, z. B. JSON oder sogar Klartext.

Sie haben bereits einige Beispiele zum Erstellen eines XMLHttpRequest-Objekts gesehen.

Nachfolgend sind einige der Methoden und Eigenschaften aufgeführt, mit denen Sie sich vertraut machen müssen.

XMLHttpRequest-Methoden

abort()

Bricht die aktuelle Anforderung ab.
getAllResponseHeaders()

Gibt den vollständigen Satz von HTTP-Headern als Zeichenfolge zurück.
getResponseHeader( headerName )

Gibt den Wert des angegebenen HTTP-Headers zurück.
open( method, URL )
open( method, URL, async )
open( method, URL, async, userName )
open( method, URL, async, userName, password )

Gibt die Methode, die URL und andere optionale Attribute einer Anforderung an.

Der Methodenparameter kann den Wert "GET", "POST" oder "HEAD" haben. Andere HTTP-Methoden wie "PUT" und "DELETE" (hauptsächlich in REST-Anwendungen verwendet) sind möglicherweise möglich.

Der Parameter "async" gibt an, ob die Anforderung asynchron behandelt werden soll oder nicht. "true" bedeutet, dass die Skriptverarbeitung nach der send () -Methode fortgesetzt wird, ohne auf eine Antwort zu warten, und "false" bedeutet, dass das Skript auf eine Antwort wartet, bevor die Skriptverarbeitung fortgesetzt wird.
send( content )

Sendet die Anfrage.
setRequestHeader( label, value )

Fügt dem zu sendenden HTTP-Header ein Label / Wert-Paar hinzu.

XMLHttpRequest-Eigenschaften

onreadystatechange

Ein Ereignishandler für ein Ereignis, das bei jeder Statusänderung ausgelöst wird.
readyState

Die Eigenschaft readyState definiert den aktuellen Status des XMLHttpRequest-Objekts.

Die folgende Tabelle enthält eine Liste der möglichen Werte für die Eigenschaft readyState.

Zustand	Beschreibung
0	Die Anforderung wird nicht initialisiert.
1	Die Anfrage wurde eingerichtet.
2	Die Anfrage wurde gesendet.
3	Die Anfrage ist in Bearbeitung.
4	Die Anfrage ist abgeschlossen.

readyState = 0 Nachdem Sie das XMLHttpRequest-Objekt erstellt haben, aber zuvor die open () -Methode aufgerufen haben.

readyState = 1 Nachdem Sie die open () -Methode aufgerufen haben, aber bevor Sie send () aufgerufen haben.

readyState = 2 Nachdem Sie send () aufgerufen haben.

readyState = 3 Nachdem der Browser eine Kommunikation mit dem Server hergestellt hat, aber bevor der Server die Antwort abgeschlossen hat.

readyState = 4 Nachdem die Anforderung abgeschlossen wurde und die Antwortdaten vollständig vom Server empfangen wurden.

responseText

Gibt die Antwort als Zeichenfolge zurück.
responseXML

Gibt die Antwort als XML zurück. Diese Eigenschaft gibt ein XML-Dokumentobjekt zurück, das mithilfe der W3C-DOM-Knotenbaummethoden und -eigenschaften untersucht und analysiert werden kann.
status

Gibt den Status als Nummer zurück (z. B. 404 für "Nicht gefunden" und 200 für "OK").
statusText

Gibt den Status als Zeichenfolge zurück (z. B. "Nicht gefunden" oder "OK").

Um klar zu veranschaulichen, wie einfach es ist, mit AJAX auf Informationen aus einer Datenbank zuzugreifen, werden wir MySQL-Abfragen im laufenden Betrieb erstellen und die Ergebnisse auf "ajax.html" anzeigen. Aber bevor wir fortfahren, lassen Sie uns die Grundlagenarbeit leisten. Erstellen Sie eine Tabelle mit dem folgenden Befehl.

NOTE - Wir gehen davon aus, dass Sie über ausreichende Berechtigungen verfügen, um die folgenden MySQL-Vorgänge auszuführen.

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

Speichern Sie nun die folgenden Daten mit den folgenden SQL-Anweisungen in dieser Tabelle:

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

Clientseitige HTML-Datei

Lassen Sie uns nun unsere clientseitige HTML-Datei ajax.html haben, die den folgenden Code enthält:

<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 - Die Art der Übergabe von Variablen in der Abfrage entspricht dem HTTP-Standard und hat formA.

URL?variable1 = value1;&variable2 = value2;

Der obige Code gibt Ihnen einen Bildschirm wie unten angegeben -

Ihr Ergebnis wird hier in diesem Abschnitt angezeigt, nachdem Sie Ihre Eingabe vorgenommen haben.

NOTE - Dies ist ein Dummy-Bildschirm.

Serverseitige PHP-Datei

Ihr clientseitiges Skript ist fertig. Jetzt müssen wir unser serverseitiges Skript schreiben, das Alter, wpm und Geschlecht aus der Datenbank abruft und an den Client zurücksendet. Fügen Sie den folgenden Code in die Datei "ajax-example.php" ein.

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

Versuchen Sie nun, einen gültigen Wert (z. B. 120) in Max Age oder ein anderes Feld einzugeben, und klicken Sie dann auf die Schaltfläche MySQL abfragen.

Ihr Ergebnis wird hier in diesem Abschnitt angezeigt, nachdem Sie Ihre Eingabe vorgenommen haben.

Wenn Sie diese Lektion erfolgreich abgeschlossen haben, wissen Sie, wie Sie MySQL, PHP, HTML und Javascript zusammen verwenden, um AJAX-Anwendungen zu schreiben.

AJAX-Sicherheit: Serverseite

AJAX-basierte Webanwendungen verwenden dieselben serverseitigen Sicherheitsschemata wie normale Webanwendungen.
Sie legen die Anforderungen an Authentifizierung, Autorisierung und Datenschutz in Ihrer Datei web.xml (deklarativ) oder in Ihrem Programm (programmatisch) fest.
AJAX-basierte Webanwendungen sind denselben Sicherheitsbedrohungen ausgesetzt wie normale Webanwendungen.

AJAX-Sicherheit: Client-Seite

JavaScript-Code ist für einen Benutzer / Hacker sichtbar. Hacker können JavaScript-Code verwenden, um auf serverseitige Schwachstellen zu schließen.
JavaScript-Code wird vom Server heruntergeladen und auf dem Client ausgeführt ("eval") und kann den Client durch falsch beabsichtigten Code gefährden.
Heruntergeladener JavaScript-Code wird durch das Sandbox-Sicherheitsmodell eingeschränkt und kann für signiertes JavaScript gelockert werden.

AJAX wächst sehr schnell und das ist der Grund, warum es viele Probleme damit enthält. Wir hoffen, dass sie im Laufe der Zeit behoben werden und AJAX ideal für Webanwendungen wird. Wir listen einige Probleme auf, unter denen AJAX derzeit leidet.

Complexity is increased

Serverseitige Entwickler müssen verstehen, dass Präsentationslogik sowohl auf den HTML-Clientseiten als auch in der serverseitigen Logik erforderlich ist.
Seitenentwickler müssen über JavaScript-Kenntnisse verfügen.

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