Tutorial HTML, CSS u. PHP - Forum

[Yamram]

Heyho
Um die Funktionalität und Dynamik der Cloud zu steigern sollte ich auf jeden Fall Ajax verwenden. Ich muss zwei Möglichkeiten eröffnen. Das eine ist so wie ich es jetzt habe. Das andere ist die Möglichkeit mit Ajax.

Forumsbeitrag: Ajax - Ich verstehe es nicht…

Hey Leute,
um die Dynamik meines Projekts zu steigern, dachte ich mir, dass Ajax perfekt geeignet ist. Aber es gibt ein Problem. Ich verstehe Ajax überhaupt nicht. Ich bin ehrlich: ich habe schon ganze 3 Tutorials durchgearbeitet und immer verstehe ich nur. Ich dachte irgendwie, es geht leichter aber jetzt habe ich sogar schon Kopfschmerzen deswegen -.-
Für mich bedeutet Ajax, PHP-Skripte im Hintergrund ausführen. Stimmt das nun oder nicht?! Ich meine, wenn man zum Beispiel den Submit-Button drückt, dann wird nicht die Seite neu geladen sondern im Hintergrund wird einfach die Auswertung des Formulars durchgeführt. Aber wie stelle ich so etwas einfaches an?

Zum Üben wollte ich eine einfache Formularaufgabe lösen. Der User gibt seinen Vornamen und Nachnamen ein und nachher sollen diese beiden Daten ausgegeben werden. Die HTML-Struktur ist außer des action-Attributes simpel:

Code: Alles auswählen

<form method="post" action="">
   <input type="text" name="vorname" value="Vorname" />
   <input type="text" name="nachname" value="Nachname" />
   <input type="submit" name="submit" value="abschicken" />
</form>


Der PHP ist mir natürlich auch ganz klar:

Code: Alles auswählen


<?php
    if(isset($_POST["submit"])) {
        echo "Sie heißen ".$_POST["vorname"]." ".$_POST["nachname"].".";
    }
?>


So und wie bringe ich da jetzt Ajax rein? Es wäre echt nett, wenn jemand sich die Mühe machen würde und versuchen würde mir das zu erklären. Tut mir echt leid, ich verstehe es einfach nicht…

Mit freundlichen Grüßen,
Philipp E.

[Basiii]

Schöner Titel, erst hier lesen, dann hier lesen.

[Yamram]

1. Danke, aber Ajax?! ist jetzt nicht sooo toll

2. Habe ich gemacht.

3. Kann ich nicht aufrufen >.<

[drPHIP132]

1. Danke, aber Ajax?! ist jetzt nicht sooo toll

Das war ironie von basiii o.O

Du hast gegen Beitragserstellungsregeln verstoßen

[Yamram]

Wieso das denn? Was habe ich gemacht?

[drPHIP132]

Das musst du basiii fragen...

[Basiii]

Wenn ein anderer Mensch ein Problem mit Ajax hat wird er nicht nach "Ajax?!? ALTAH! Diggah ich nix kapiehren!!" (Extremes Beispiel !) suchen, sondern nach "Wie funktioniert Ajax?"

So viel zu "Ich hab das gelesen, na klar hab ich "

[Yamram]

Ich hätte aber gedacht, dass mit "?!" das Ganze klar ist. Naja ich habe es geändert. So und jetzt zum Thema...

[Basiii]

Zum Thema kann man dir wenig erzählen, du musst schon irgendwie auf die Website gelangen um es dir angucken zu können, wir erklären hier für gewöhnlich keine ganzen Themen sondern unterstützen bei Problemen mit bereits bestehendem Code.

Es ist fast unmöglich dich hier mal eben zwischendurch über Ajax zu informieren, aber deine Frage kann ich beantworten:

Mit der Ajax Methode sendet JavaScript Post oder Get Variablen an den Server ohne die gesamte Seite neu laden zu müssen.

[Yamram]

Also ich habe schon Tutorials durchgearbeitet und nicht verstanden :/

Okay Danke (:

Ich hasse, es kein freies Internet zu haben >.<

[drPHIP132]

-> Neues Objekt erstellen
-> Eigenschaften setzten die benötigt werden
-> Ajax-Anfrage abschicken
-> Auf die Antwort warten (via Event-Überwachung)
-> Antwort verarbeiten

[Yamram]

Ja, das bringt mir jetzt nicht viel... Der grobe Ablauf einer Ajax basierenden Anwendung ist mir schon klar.

[drPHIP132]

dann arbeite doch nochmal ein javascript tut durch und dann schaust du dir ajax an. ^^ ?

[Yamram]

Also, eine einfach Ajaxanwendung ist so aufgebaut: (Den Code habe ich eben netterweise von Basiii geschickt bekommen)

1. Ich erstelle einen Request. Hier muss ich zwischen Chrome, Firefox... und Internet Explorer unterscheiden:

Code: Alles auswählen

var request = false;
if (window.XMLHttpRequest) {
         request = new XMLHttpRequest(); // Mozilla, Safari, Opera
      } else if (window.ActiveXObject) {
         try {
            request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
         } catch (e) {
            try {
               request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
            } catch (e) {}
         }
      }


Nun kann ich auf diesen Request mit request (Variable) zugreifen...

2. Dann kann ich überprüfen, ob der Request erzeugt wurde.

Code: Alles auswählen

if (!request) {
         alert("Kann keine XMLHTTP-Instanz erzeugen");
         return false;
      } else { ... }


Nun weiß, ich dass der Request erfolgreich erstellt wurde.

3. Dann öffne und sende ich den Request:

Code: Alles auswählen

         var url = "ajax_004.php";
         // Name auslesen
         var value = document.getElementById("...").innerHTML;
         // Request öffnen
         request.open('post', url, true);
         // Requestheader senden
         request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
         // Request senden
         request.send('name='+value);
         // Request auswerten
         request.onreadystatechange = interpretRequest;


Im Prinzip wird dann die Datei ajax_004.php mit der POST Variable name aufgerufen oder? Wenn man GET machen würde, dann wäre das ajax_004.php?name=...

Ich hoffe mal, das stimmt soweit (:

4. Dann empfange ich den Request und werte ihn aus:

Code: Alles auswählen

function interpretRequest() {
      switch (request.readyState) {
         // wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
         case 4:
            if (request.status != 200) {
               alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
            } else {
               // Antwort des Servers -> als XML-Dokument
               var xmlDoc   = request.responseXML;
               // Namen aus dem XML-Dokument herauslesen
            
            
            // AB HIER KANN MAN SELBER SCHREIBEN!!!!!
               var original   = xmlDoc.getElementsByTagName('originalname')[0].firstChild.nodeValue;
               var small   = xmlDoc.getElementsByTagName('smallname')[0].firstChild.nodeValue;
               var big      = xmlDoc.getElementsByTagName('bigname')[0].firstChild.nodeValue;
               // Namen in die Felder schreiben
               document.getElementById('...').innerHTML   = original;
               document.getElementById('small').innerHTML   = small;
               document.getElementById('big').innerHTML   = big;
            }
            break;
         default:
            break;
      }
   }


Ist das jetzt alles soweit richtig? Dann hätte ich nämlich einigermaßen verstanden ((((:

[Yamram]

Mein Beispiel mit Ajax:

Ich habe jetzt mal versucht, mein Beispiel mit Ajax umzusetzen. Doch natürlich habe ich es nicht ganz geschafft :/
So sieht die HTML-Datei aus:

Code: Alles auswählen

<!DOCTYPE html>
<html>
   <head>
      <title>Ajax II</title>
      <style type="text/css">
         input {
            display: block;
         }
      </style>
      <script type="text/javascript">
         var request = false;
         
         function setRequest() {
            if (window.XMLHttpRequest) {
               request = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) {
               try {
                  request = new ActiveXObject('Msxml2.XMLHTTP');
               }
               catch (e) {
                  try {
                     request = new ActiveXObject('Microsoft.XMLHTTP');
                  }
                  catch (e) {}
               }
            }
            if (!request) {
               alert("Kann keine XMLHTTP-Instanz erzeugen");
               return false;
            }
            else {
               var url = "ajax2.php";
               var firstname = document.getElementById("firstname").value;
               var surname = document.getElementById("surname").value;
               alert("Sie heißen " + firstname + " " + surname + ".");
               request.open("post", url, true);
               request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
               request.send("firstname=" + firstname + "surname=" + surname);
               request.onreadystatechange = interpretRequest;
            }
         }
         
         function interpretRequest() {
            switch (request.readyState) {
               case 4:
                  if (request.status != 200) {
                     alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
                  }
                  else {
                     var xmlDoc = request.responseXML;
                     
                     //WIE KANN ICH NUN DIE VON ajax2.php gesendete Variable $error ausgeben lassen?!
                     
                  }
            }
         }
      </script>
   </head>
   <body>
      <form method="post" action="javascript:setRequest();">
         <input type="text" name="vorname" id="firstname" value="Vorname" maxlength="100" />
         <input type="text" name="nachname" id="surname" value="Nachname" maxlength="100" />
         <input type="submit" name="submit" value="abschicken" />
      </form>
   </body>
</html>


Die Datei ajax2.php sieht so aus:

Code: Alles auswählen

<?php
   if(isset($_POST["firstname"]) AND isset($_POST["surname"])) {
      $result = "";
      $connection = mysql_connect("localhost", "yamram-dev", "dreamweaver")
      if(mysql_select_db($connection, "ajax")) {
         $sql = "INSERT INTO `names` (`id`, `firstname`, `surname`, `cdate`) VALUES (NULL, '".$firstname."', '".$surname."', CURRENT_TIMESTAMP);";
         if(mysql_query($sql)) {
            $result .= "Alles hat geklappt *__*";            
         }
         else {
            $result .= "Es gab ein Problem mit der Tabelle :/";
         }
      }
      else {
         $result .= "Ein Fehler ist aufgetreten. Die Verbindung zur Datenbank ist fehlgeschlagen :/");
      }
   }
   else {
      header("Location: ajax2.html");
   }
?>


Wie ihr sehen könnt, werden die Daten in ajax2.php nur in eine Tabelle geschrieben. Je nach Erfolg oder Fehler habe ich die Variable $error gefüllt. Doch wie kann ich diesen nun in ajax2.HTML ausgeben lassen?!

Wäre echt nett, wenn ihr mir das noch erklären könntet (((: