AJAX und PHP

Ador

Ador

Erfahrenes Mitglied
Hallo,

ich arbeite mich gerade etwas in AJAX ein.
Ich habe noch Probleme mit dem Verständnis, wie AJAX und PHP zusammenarbeiten.

Zum verstehen möchte ich gern, dass per AJAX ein PHP Script aufgerufen und ausgeführt wird und entsprechend reagiert.
Das einmalige aufrufen/ausführen ist auch kein Problem, aber mir ist nicht ganz klar, in welcher Reihenfolge das geschieht, bzw. was nach dem PHP aufruf geschieht, also wo es weiter geht.

Dazu poste ich einfach mal ein sehr sehr simples Beispiel, mit dem ich gerade übe.

Mein Ziel ist es gerade, dass ich mit dem selben Button im Wechsel die beiden echos in der PHP-Datei ausgebe.
Vom prinzip her dachte ich, dass ich per AJAX immer wieder das PHP-Script aufrufen kann, aber es wird ja anscheinend nur 1x aufgerufen.

PS: Ich verstehe auch nicht, warum "myAjax" immer verschwindet, habe es beim debuggen bemerkt. Dadurch kann ich ja nicht mal etwas abfragen wie z.B: if(text == 'a')..... weil es unmöglich ist, auf die variable "text" zuzugreifen.

html-Datei:
Code: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>

<script type="text/javascript">

  function changeStatus(text){
   if (window.XMLHttpRequest){
    myAjax = new XMLHttpRequest();
   }else{
    myAjax = new ActiveXObject("Microsoft.XMLHTTP");
   }
 
   myAjax.onreadystatechange=function(){
    if (myAjax.readyState==4 && myAjax.status==200){
     document.getElementById("output").innerHTML=myAjax.responseText;
    }
   };
 
   myAjax.open("GET","function.php?text=" + text,true);
   myAjax.send();
  }
 
</script>

</head>
<body>

<h1>Test</h1>

<button type="button" onClick="changeStatus('a')">Click Me!</button> 
 <div style="width:400px; border: 1px black solid; padding:10px;" id="output">...</div>


</body>
</html>

php Funktion:
PHP: 
<?php

if($_GET["text"] == 'a')
{
echo 'ausgabe AAAAAAAAA';
$_GET["text"] = 'b';
}else 
{
echo 'ausgabe BBBBBBBBBB';
$_GET["text"] = 'a';
}

?>
 
Zuletzt bearbeitet:
Du musst es Dir so vorstellen, dass in der Anfrage (dem Request) die angegebene Seite so aufgerufen wird, wie wenn Du sie im Browser aufrufen würdest. Dabei wird aber all das, was von der Seite ausgegeben wird in der Variablen responseText gespeichert, so dass Du es dann mit JavaScript weiterverarbeiten kannst.

Nachtrag: Wenn man so will, könnte das Ganze am Ende so aussehen:
Javascript: 
(function() {
  var state = 1;
  
  var toggle_state = function() {
    var xhr;
    
    state = ( state + 1 ) % 2:
  
    if ( window.XMLHttpRequest ) {
      xhr = new XMLHttpRequest();
    } else {
      xhr= new ActiveXObject( "Microsoft.XMLHTTP" );
    }
    
    xhr.onreadystatechange = function() {
      if ( xhr.readyState == xhr.DONE && xhr.status == 200 ) {
        document.getElementById( "output" ).innerHTML = xhr.responseText;
      }
    };

    xhr.open( "GET", "function.php?text=" + state, true );
    xhr.send();
  }
  
  window.toggle_state = toggle_state;
})();
PHP: 
<?php
  if ( $_GET[ "text" ] == 1 ) {
    echo "status one";
  } elseif ( $_GET[ "text" ] == 0 ) [
    echo "status two";
  }
 
Zuletzt bearbeitet:
Hey, danke für die Erklärung, dass hilft schon mal.
Würde dein Code gerne mal testen, bekomme es so aber nicht zum laufen.
Kannst du den inhalt (javascript und html) nochmal komplett posten?

Hintergrund:
Eigentlich möchte ich ohne refresh der Webseite, per Button das aktivieren und deaktivieren, verschiedener Beiträge (Datenbank) ermöglichen.
Es gibt eine Liste vieler Beiträge und jeder hat einen Button, der entweder "aktivieren" oder eben "deaktivieren" heißt. beim klick soll dann das PHP-Script aufgerufen werden, welches dann in die DB schreibt.

Leider habe ich es nur ohne AJAX hinbekommen, sodass nach klick auf den Button, die Seite erst neu geladen werden muss, damit die Anzeige aktualisiert ist. Mit AJAX habe ich es nur geschafft, dass der Button 1x funktioniert und die DB updatet und eine Nachricht "Status geändert" ausgegeben wird. Danach macht der Button leider nichts mehr, bis man die Seite neu läd.
 
Zuletzt bearbeitet:
Du bekommst jetzt von mir die Quelltexte, so wie ich sie verwendet habe – das heißt auch mit den Debugging-Anweisungen. Vielleicht helfen sie Dir ja.
HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>AJAX-Spielerei</title>
  <meta charset="utf-8" />
  <script type="application/javascript" src="application.js"></script>
</head>
<body>
  <button type="button">Absenden</button>
  <output></output>
</body>
</html>
PHP: 
<?php
  # data.php
  if ( $_GET[ "state" ] == 1 ) {
    echo "option one";
  } else {
    echo "option two";
  }
Javascript: 
// application.js
(function() {
  var state = 1;
  
  var toggle_state = function( output ) {
    var xhr;
  
    console.log( "state: " + state );
    state = ( state + 1 ) % 2;
    console.log( "state: " + state );

    if ( window.XMLHttpRequest ) {
      console.log( "xml-http-request" );
      xhr = new XMLHttpRequest();
    } else {
      console.log( "active-x-object" );
      xhr = new ActiveXObject( "Microsoft.XMLHTTP" );
    }

    console.log( xhr );
    
    xhr.onreadystatechange = function() {
      console.log( "ready state: " + xhr.readyState );
      if ( xhr.readyState == xhr.DONE && xhr.status == 200 ) {
        console.log( xhr.responseText );
        output.innerHTML = xhr.responseText;
      }
    };
  
    xhr.open( "GET", "data.php?state=" + state, true );
    xhr.send();
  };

  window.toggle_state = toggle_state;
})();

document.addEventListener( "DOMContentLoaded", function() {
  var button = document.getElementsByTagName( "button" )[ 0 ];
  var output = document.getElementsByTagName( "output" )[ 0 ];

  button.addEventListener( "click", function() {
    window.toggle_state( output );
  });
});
 
Super Sache, damit kann ich nun mal weiter probieren.
Ich melde mich, wenn noch Fragen auftauchen :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück