Ajax Ajax XMLHttpRequest Ajax XMLHttpRequest Ajax Einfaches

Document Sample
Ajax Ajax XMLHttpRequest Ajax XMLHttpRequest Ajax Einfaches Powered By Docstoc
					Ajax                                                                                                Ajax: XMLHttpRequest
                                                                                                      Kreieren des XMLHttpRequest Objekts:
! Asynchronous JavaScript and XML
                                                                                                      var xmlHttp = null;
                                                                                                      // Mozilla, Opera, Safari sowie Internet Explorer 7
! Abgeleitet von der Microsoft-Variante von Remote Scripting,                                         if (typeof XMLHttpRequest != 'undefined') {
  welche noch auf ActiveX basierte (Ab IE5)                                                               xmlHttp = new XMLHttpRequest();
                                                                                                      }
                                                                                                      if (!xmlHttp) {
! Neues JavaScript-Objekt XMLHttpRequest
                                                                                                          // Internet Explorer 6 und älter
  (Unterstützt von allen aktuellen Browsern, mittlerweile                                                 try {
                                                                                                              xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  Working Draft des W3C, Oktober 2007)                                                                    } catch(e) {
                                                                                                              try {
! Leichte Unterschiede zwischen den Implementierungen                                                             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                                                                                                              } catch(e) {
                                                                                                                  xmlHttp = null;
                                                                                                      }}}


                                  webt • javascript • zeman, marti, burkert • 02/2008 •   1                                                                 webt • javascript • zeman, marti, burkert • 02/2008 •       2




Ajax: XMLHttpRequest                                                                                Ajax: Einfaches Beispiel
Anwenden des XMLHttpRequest Objekts:                                                                                                                          js:
...
                                                                                                                                                              onchange="callServer()
if (xmlHttp) {
    // Konfiguration des Requests (Methode, Ziel, Asynchron?)                                                                                                 callServer()
    xmlHttp.open('GET', 'beispiel.xml', true);
    // Event-Handler, der ausgeführt wird,
    // wenn die Antwort geladen wurde (readyState == 4)
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4) {                                                                                                                                        url: ajax_bsp.php?city=Zuerich
            alert(xmlHttp.responseText);
        }
    };
                                                                                                                                   js:                                                                  Server:
                                       Alternativ kann hier Inhalt eines                                                           xmlHttp.onreadystatechange                  <result>
    // abschicken es Requests                                                                                                                                                  <kanton>ZH
                                       GUI-Elementes gemäss der                                                                    = updatePage;
    xmlHttp.send(null);                                                                                                                                                        </kanton>                Ajax_bsp.php
                                       Serverantwort verändert werden
}                                                                                                                                                                              <zip>8000</zip>
                                       (Textfeld, Position, etc.)                                                                                                              </result>

                                                                                              Quelle (mit Erläuterungen): Jann Forrer, "Ajax - eine kompakte Einführung", http://www.uzh.ch/home/forrer/ajax/zinfoex/index.html

                                  webt • javascript • zeman, marti, burkert • 02/2008 •   3                                                                 webt • javascript • zeman, marti, burkert • 02/2008 •       4
 Ajax: Einfaches Beispiel                                                                                                   Ajax: Einfaches Beispiel: Client
                                                                                                                                                                                               ajax_bsp.html
                                                                                                                         <script language="javascript" type="text/javascript" src="jslib.js">>/script>
                                         <?php                                                                           …….
                                          $city = $_GET['city'];
                                                                                                                         <form name="thisform" id="thisform">
                                          $_xml = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
                                          generateXMLResponse($city);
                                                                                                                           <p>City:
                                                                                                                           <select name="city" id="city" value="---" onchange="callServer();">
                                          header("Content-Type: text/xml");
                                          echo $_xml;                                                                        <option selected VALUE="">W&auml;hlen...</OPTION>
                                          function generateXMLResponse($city) {
                                                                                                                             <option value="Chur">Chur</option>
                                            global $_xml;                                                                    <option value="Zuerich">Z&uuml;rich</option>
                                            $_xml .="<result>";
                                              if ($city == "Winterthur") add_element("ZH","8405");                           <option value="Winterthur">Winterthur</option>
                                              if ($city == "Zuerich") add_element("ZH","8000");
                                              if ($city == "Chur") add_element("GR","7000");
                                                                                                                           </select>
                                             $_xml .="</result>";                                                          </p>
Server-Seite:                             }
ajax_bsp.php                              function add_element($kanton, $zip) {                                            <p>State: <input type="text" name="kanton" id="kanton" size="25"/></p>
                                             global $_xml;                                                                 <p>Zip Code: <input type="text" name="zipCode" id="zipCode" size="5" />
                                             $_xml .= "<kanton>" . $kanton ."</kanton>";
                                             $_xml .= "<zip>" . $zip ."</zip>";                                            </p> </form>
                                          }             webt • javascript • zeman, marti, burkert • 02/2008 •     5                                                       webt • javascript • zeman, marti, burkert • 02/2008 •   6
                                         ?>




 Ajax: Einfaches Beispiel: Client                                                                                           Ajax: Einfaches Beispiel: Client
Client-Seite: jslib.js                                                                                                     Client-Seite: … jslib.js
 /* Create a new XMLHttpRequest object to                 function callServer() {
    talk to the Web server */                              // Get the city and state from the web form
                                                           var city = document.getElementById("city").value;                  // nach Empfang der Server-Daten
 var xmlHttp = false;                                      // Only go on if there are values for both fields
 try {                                                                                                                        function updatePage() {
                                                           if ((city == null) || (city == "")) return;
   xmlHttp = new XMLHttpRequest();                                                                                              alert("updatePage() called with ready state of " + xmlHttp.readyState +
 } catch (trymicrosoft) {                                   // Build the URL to connect to                                            " and a response text of ' " + xmlHttp.responseText + " '");
   try {                                                    var url = "ajax_bsp.php?city=" + escape(city);
     xmlHttp = new ActiveXObject(                         // Open a connection to the server
                     "Msxml2.XMLHTTP");                                                                                           if (xmlHttp.readyState == 4) {
                                                            xmlHttp.open("GET", url, true);
   } catch (othermicrosoft) {                                                                                                       var xmlResponse = xmlHttp.responseXML;
     try {                                                    // Setup a function for the server to run when it's done              var zip = xmlResponse.getElementsByTagName("zip")[0].firstChild.nodeValue;
       xmlHttp = new ActiveXObject(                           xmlHttp.onreadystatechange = updatePage;                              var kanton = xmlResponse.getElementsByTagName("kanton")[0].firstChild.nodeValue;
                    "Microsoft.XMLHTTP");
     } catch (failed) {                                                                                                             // in die Document-Textfelder einfügen
                                                              // Send the request
       xmlHttp = false;                                       alert("request sent : " + url);                                       document.getElementById("zipCode").value = zip;
     }                                                        xmlHttp.send(null);                                                   document.getElementById("kanton").value = kanton;
   }                                                      }                                                                       }
 }
                                                                                                                              }
 if (!xmlHttp)
   alert("Fehler beim Initialisieren"+
    " des XMLHttpRequest Objekts!");
                                                       webt • javascript • zeman, marti, burkert • 02/2008 •      7                                                       webt • javascript • zeman, marti, burkert • 02/2008 •   8