Lade HTML-Fragment mit AJAX Wie geht das ?

Die Sicherheit in internationalen Netzen fordern eine hohe Sicherheit bei Browsern.

Mit AJAX ( Asynchronous JavaScript and XML ) kann ECMAScript auf Objekte einer anderen Webseite zuzugreifen, wenn sie aus derselben Quelle (Origin) stammen. SOP ( Same-Origin-Policy ) ist ein Sicherheitskonzept (siehe en.wikipedia Same-Origin-Policy ). "Cross-Site Request Forgery" möchte SOP umgehen. Für AJAX gilt SOP Bei Same-Origin-Policy sind Zugriffe nur erlaubt wenn gilt: document.domain === anderes_window.document.domain

Im folgenden Beispiel soll mit XMLHttpRequest vom Server der Text-Content einer XHTML-Seite mit asynchroner POST-Kommunikation geholt und nachfolgend im Browser verarbeitet werden (meta-Tags extrahieren).

Bei einem asynchronen Aufruf wird nicht gewartet, sondern beim Eintreffen der Daten wird eine Callback-Funktion aufgerufen. Das zeitliche Intervall zwischen einer HTTP-Anfrage des Browsers und der zugehörigen Server-Antwort, wird Latenzzeit genannt (siehe de.wikipedia Ajax Programmierung ).

Die folgende Funktion load_xml_page() befindet sich in der top-Seite, die auch die Daten mit fsb.set_data(key, daten) und fsb.get_data(key) verwaltet.

Code Snippet: load_xml_page
Argument o = {win:window, url:'myZielURL', data_key:'myKey', load_once:true}
  1. function load_xml_page (o) {
  2.   var s, win = o.win, xhr = null,
  3.   load_once = o.load_once || true;
  4.   if (load_once){ s = fsb.get_data('load_xml_page');
  5.   if(typeof s ==='string' && s.length > 0 ){ return true; } }
  6.   try {
  7.     xhr = win.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
  8.     xhr.open("POST", o.url, true);
  9.     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  10.     xhr.send();
  11.     xhr.onreadystatechange = function () {
  12.       if (xhr.readyState === 4 && xhr.status === 200) {
  13.         fsb.set_data(o.data_key,xhr.responseText);
  14.       }
  15.     }
  16.   } catch (e) {alert(e);return false;} return true;
  17. }

Im folgenden Beispiel wird die Funktion load_xml_page()
verwendet, um den url-Seiten-Content zu holen und daraus die meta-Tags zu extrahieren.

Code Snippet: Beispiel, um die meta-Tags zu extrahieren
  1. function get_meta_tags() {
  2.   var s, r, obj = {
  3.     url: location.href,      // url der Homepage-Seite
  4.     win:window,              // top braucht dieses window-Objekt
  5.     data_key:'load_xml_page' // für top.fsb.get_data(data_key)
  6.   };
  7.   ok = top.fsb.load_xml_page(obj); if(!ok) { return ''; }
  8.   s = top.fsb.get_data(obj.data_key);
  9.   if(typeof s !== 'string' || s.length < 1) { return ''; }
  10.   r = s.replace(/^([\s\S]+\u003Cmeta\s*?[\s\S]*?>)[\s\S]*?$/g,'\n$1')
  11.        .replace(/[\s\S]*?(\u003Cmeta\s*?[\s\S]*?>)/g,'\n$1');
  12.   return r;
  13. }
  14. // Aufruf
  15. get_meta_tags();

Teste: get_meta_tags();