AJAX from Scratch Was ist das?

Typische AJAX-Anwendungen ( 2014 ) sind Virtuelle Landkarten, interaktive Straßenkarten, Globen, interaktive Weltkarten, Soziale Software, soziale Netzwerke, Web-basierter Instant Messenger, Webchatsysteme, Webbasierte Büroanwendungen, E-Mail-Programm für Webbrowser, Web-Desktop, Textverarbeitung, Tabellenkalkulation, Bildbearbeitungswerkzeuge, Verwaltung von Fotos, Internetradio, usw.

AJAX (Einführendes) Form- und AJAX - Beispiele

AJAX (Asynchronous JavaScript and XML) verwendet ECMAScript und W3C XMLHttpRequest (Level 2) - Zugriffe auf Server-XML-Objekte. Progress Events ((Editor's Draft 4 May 2012). Mozilla Monitoring Progress (Beispiele).
Nachfolgende wird ein clientseitiges "submit" von Formulardaten mit einem AJAX-XMLHttpRequest verglichen (siehe z.B. w3schools AJAX-Intro ).

Der ECMAScript-Code der XMLHttpRequest-Anfrage und die XMLHttpRequest-Anfrageziel-URL müssen aus derselben Quelle (Origin) stammen. SOP ( Same-Origin-Policy ) ist ein Sicherheitskonzept (siehe en.wikipedia Same-Origin-Policy ). Browser möchten SOP garantieren und können das AJAX-"Cross-Site Request Forgery" verhindern. Bei Same-Origin-Policy sind Zugriffe nur erlaubt wenn gilt: document.domain === anderes_window.document.domain. (siehe W3C CORS - Cross-Origin Resource Sharing, Mozilla HTTP access control ).

Die mit AJAX-erbetenen Server-Daten werden asynchron (mit Hilfe einer Callback-Funktion) zum Browser zurück gegeben. Infolge der XMLHttpRequest-Anfrage wird nicht gewartet bis eine Server-Antwort kommt, sondern ECMAScript-Code weiter ausgeführt. Wenn die Server-Antwort vorliegt, wird die Callback-Funktion (siehe de.wikipedia Rückruffunktion ) aufgerufen.

Die clientseitig erhaltenen Server-Daten können dann "augenfreundlich" z.B. in den DOM-Baum (XML, XHTML, HTML5) oder/und in ein Webformular eingefügt werden.

Ein serverseitig veranlaßtes AJAX, ohne daß der Client ein gewünschtes Request geschickt hat, kann zum "Pushen" von (umfangreichen) Server-Daten im Browser verwendet werden und wird Comet genannt.



Formular und AJAX Was wird hier behandelt?

Was wird nachfolgend behandelt? Vorrangig ist das Lernen. An Hand von kleinen Beispielen sollen Einsichten in die AJAX-Programmierung vermittelt werden.

Als Einstiegsbeispiel wird zunächst ohne Ajax ein einfaches Formular und die Wirkung von Echo-Response (PHP) betrachtet. In einem weiteren Beispiel wird Ajax verwendet und die String-Antwort (PHP) des Servers in das Dokument eingefügt. Die serverseitige Verarbeitung mit PHP ist denkbar einfach. Serverseitig wird PHP verwendet:

Das PHP-Script nimmt gesendete Daten in $_POST['URL_HTM_SEITE'] und $_POST['NACHNAME'] entgegen, verarbeitet diese, und sendet nach der PHP-Verarbeitung den String $response; mit Hilfe von echo $response; zurück. Hier ist der aktuelle PHP - Quelltext und hier die PHP-Seite als Pseudo-Code:

<?php
ini_set('display_errors',0); error_reporting(0); 
//ini_set('display_errors',1); error_reporting(E_ALL | E_STRICT); 
/*
   DEMO
   1. Teste: Kommen $url_php_seite und $url_htm_seite 
      aus dem gleichen Serververzeichnis?
*/
$url_htm_seite =  htmlentities(rawurldecode($_POST["URL_HTM_SEITE"]),ENT_COMPAT,'UTF-8');
$http  = (isset($_SERVER['HTTPS']) && ($_SERVER['HTTPS'] == 'on')) ? 'https://' : 'http://';
$url_php_seite = $http.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];  
if(substr($url_htm_seite,0,-4) != substr($url_php_seite,0,-13)) { echo ''; exit; 
  // debug: exit('$url_php_seite='.$url_php_seite.'<br/>$url_htm_seite='.$url_htm_seite);
}
/*
   2. Ermittle $response = $arr[$key]
*/
$arr = array(
  'maier' =>  'Hans Meier | Griesweg 4  | 4711 Hintertupfingen',
  'weber' =>  'Klaus Weber| Narzisse 1  | 12345 Schupfingen',
  'kraus' =>  'Karl Kraus | Tulpenweg 9 | 98765 Wohnland'
);
/*
   3. Prüfe $key von Formular name='NACHNAME'
*/
$key = trim($_POST['NACHNAME']); 
$key = htmlentities(rawurldecode($key),ENT_COMPAT,'UTF-8');
$key = strtolower($key); 
if( isset($key) && isset($arr[$key])) {
  $response = $arr[$key];
} else { 
  $response = 'Nachname unbekannt';
}
/*
   4. Antwort zurück schicken
*/
echo $response;
?>


Beispiel: Formular ohne AJAX Echo-Response

Nachfolgende wird ein HTML-Formular und ein clientseitiges "submit" von Formulardaten betrachte. Im nächsten Beispiel soll dann das entsprechende Vorgehen mit einem AJAX-XMLHttpRequest betrachtet werden.

Das Lehr-Beispiel besteht aus einem HTML-Formular, verwendet kein AJAX. Es soll lediglich die Wirkung des serverseitigen Echo-Response (PHP) verdeutlichen werden. Die Formulardaten werden mit "submit" zum PHP-Script geschickt, und die serverseitigen Antwort (PHP-Echo-Response) wird in einem neuen Browser ausgegeben.

Code Snippet: Adressen-Auskunft ohne AJAX
  1. <form action="ajax-response.php" method="post" target="_blank">
  2. <pre<>
  3.   Test-Beispiele für Nachnamen sind maier/weber/kraus/mueller
  4.   Nachname: <input type="text" name="NACHNAME" value=" Kraus" />
  5.   Adresse   <input type="submit" value="abfragen"
  6.   onclick="this.form.URL_HTM_SEITE.value=window.location.toString();"/>
  7.  
  8.   Nachfolgend lediglich ein Anzeige-Test nach "abfragen"
  9.   für die Client-URL, später type="hidden" verwenden
  10.   <input type="text" name="URL_HTM_SEITE" value="Hierhin kommt Client-URL" />
  11. </pre></form>

Teste Adressen-Auskunft ohne AJAX

  Test-Beispiele für Nachnamen sind maier/weber/kraus/mueller 
  Nachname: 
  Adresse   

  Nachfolgend lediglich ein Anzeige-Test nach "abfragen"
  für die Client-URL, später type="hidden" verwenden
  


Beispiel: Formular mit AJAX Echo-Response

Als Formular werde ohne submit-Button verwendet:

<form action="ajax-response.php"
      method="post"
      target="_blank">
  Test-Beispiele für Nachnamen sind maier/weber/kraus/mueller 
  Nachname: <input type="text" id="NACHNAME"
                   name="NACHNAME" value=" Kraus" />
</form>

Wegen id="NACHNAME" kann der eingegebene Nachnamen-String erhalten werden durch
var nachname = document.getElementById("NACHNAME").value; Hier ist ein Schnelleinstieg zu clientseitigen Formularzugriffen .

Als Test wird nachfolgend das AJAX-XMLHttpRequest() mit einem a-Tag-Klick ausgelöst. Mit Hilfe von id="NACHNAME" wird der Nachnamen geholt und als name-value-Paar bei AJAX eingetragen und mit der "action-Zieladresse" von XMLHttpRequest() zum Server gesendet.

  Test-Beispiel:

  Mögliche Nachnamen sind maier/weber/kraus/mueller
  Nachname: 

Teste Adressen-Auskunft mit AJAX

 



Beispiel: AJAX-Wrapper-Funktion ... bequem ...

Die folgende Funktion ajax_request(obj) versucht, AJAX (post) "from Scratch" zu erklären und darüber hinaus auch nützlich zu sein. Das Parameter-Objekt obj braucht Attribute. Mindestens erforderlich sind action:'ajax-response.php' und die ausprogrammierte Callback-Funktion.

Eine einfache debug-Callback-Funktion ist callback: function (responseText) { alert(responseText); }.

Eine anderes Beipiel für die Callback-Funktion ist callback: function (r) { document.getElementById('ANTWORT').innerHTML = r; },
Mit Hilfe von .innerHTML = r wird der response-String in das Tag mit id='ANTWORT' geschrieben.

Das ECMAScript-Objekt obj für den Funktionsaufruf ajax_request(obj) kann etwa wie folgt ausschauen:

var obj = { 
    action  : 'ajax-response.php',
    callback: function (r) { 
              var arr = r.split(/\s*\|\s*/);
              document.getElementById('ANTWORT').innerHTML = 
                             "Name   : " + arr[0] +
                       "<br />Strasse: " + arr[1] +
                       "<br />Wohnort: " + arr[2]; 
    },
    URL_HTM_SEITE: window.location.toString(),
    NACHNAME:      document.getElementById('NACHNAME').value
};

Ein direkter Aufruf ajax_request(obj); führt dann das gewünschte XMLHttpRequest() aus.
Auch ein a-Tag kann das gewünschte XMLHttpRequest() ausführen, wie z.B.

 <a href="javascript:obj.NACHNAME=document.getElementById('NACHNAME').value;ajax_request(obj);"> 
    Teste 
 </a>

Hier kommt der Quelltext der Funktion ajax_request(o), der ein Objekt o (angelegt mit var o = {}; ) übergeben wird. Mindestens notwendig sind o.action='my.php'; und o.callback=function (response) { ... }; und falls benötigt name-value-Paare, wie z.B. o.URL_HTM_SEITE='url'; o.NACHNAME='Mueller';, usw.

Code Snippet: Funktion ajax_request(o)
  1. function ajax_request(o) {'use strict';
  2.   var xhr, key, action, s ='', n = 0;
  3.   if (/file\:/.test(window.location.protocol)) {
  4.     window.alert('AJAX-Request nur online möglich');return;
  5.   }
  6.   for (key in o) {
  7.    if (o.hasOwnProperty(key) && (key !== 'callback')) {
  8.     if( key === 'action') { action = o[key];} else {  n += 1;
  9.      if(n !== 0){ s += '&';}
  10.        s += key + '=' + escape(o[key]);
  11.     }
  12.    }
  13.   }
  14.   xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") :
  15.                                 new XMLHttpRequest();
  16.   xhr.open("POST", action, true); // action-Request
  17.   xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  18.   xhr.send( s );
  19.   xhr.onreadystatechange = function () {
  20.     if (xhr.readyState === 4 && xhr.status === 200) {
  21.       o.callback(xhr.responseText); // debug: window.alert(xhr.responseText);
  22.     }
  23.   };
  24. }