AJAX-Prinzip mit PHP

[Nils_13]

Hi,

wie kann ich das AJAX-Prinzip mit PHP programmieren ? Ich möchte nämlich nicht ständig die Seite neuladen, sondern nur die Texte und evtl. auch Bilder. Ich könnte ja auch AJAX benutzen, aber ich habe mich mit PHP und HTML angefreundet und habe auf XML einfach keine Lust.

Damit ihr euch genauer vorstellen könnt, was ich programmieren möchte:
http://www.bilder-hochladen.net/files/u02-c.png

[mkinzler]

Es ibt verschiedene PHP-Klassen, die die Datenübertragung per XML/JSON kapseln. z.B. PEAR HTML-AJAX, PRAJAX, SAJAX, ...

[Nils_13]

Hat jemand ein Beispiel zu den eben genannten Klassen, welches einen Text ausgibt ? Aus dem SAJAX Beispielen werde ich nicht schlau.

[mkinzler]

Die Ausgabe muß dann in JS erefolgen. man gibt eine callback-Routine an, welche dann aufgerufen wird.

[omata]

Hallo,

ich möchte einfach nur mal ein paar Gedanken zu dem Thema los werden...

Was ich an diesem AJAX einfach nicht so dolle finde ist, dass es ohne Javascript nicht funktioniert. Ok ich sehe ja ein das der Komfort nur mit möglich ist. Aber das die Seiten ohne Javascript völlig unbrauchbar werden finde ich einfach nur schlecht. Oder gibt es da einen Ansatz? Ich lade zur Zeit auch immer die Seiten nach. Das hat den Vorteil, dass wenn kein Javascript aktiviert ist eben NOSCRIPT-Tag-Inhalte für die weitere Funktion garantieren, die man mit Javascript gar nicht zu Gesicht bekommt.
Deshalb setze ich solche AJAX-Geschichten zur Zeit nicht ein, weil meine Lösung einfach flexibler auf den Besucher der Seite eingeht.

Wie gesagt, es müsste eine flexible Lösung geben, die einem bei solchen Bestrebungen unterstützt. Trotzdem sollten die Seiten auch ohne Javascript voll funktionsfähig bleiben.

Gruss
Thorsten

[faux]

Also kann sein, dass ich mich da jetzt völlig irre, aber ich glaube mal gelesen zu haben, dass das auch per CSS möglich sein soll. Kann auch völliger schwachsinn sein (passt net ganz zu CSS), aber ich glaube dass ich das mal wo gelesen hab.

Grüße
Faux

[Meflin]

Also für das obige Beispiel brauchst du kein AJAX - da reichen 2 stinknormale CSS-Klassen, eine für Text=unsichtbar, eine für Text=Sichtbar. Dann Schreibst du deinen ganzen Text in einem Dokument, hast aber eben nur einen Abschnitt auf den die CSS-Klasse "sichtbar" angewandt wird. Beim Klick auf die Tabs kannst du dann per JavaScript (Das braucht man dann doch) die CSS-Klasse verändern. Und falls das nicht gehen sollte, kannst du ja auch per Klick nur den anzuzeigenden Text verändern.

[alcaeus]

Zitat:

Zitat von omata

Was ich an diesem AJAX einfach nicht so dolle finde ist, dass es ohne Javascript nicht funktioniert. Ok ich sehe ja ein das der Komfort nur mit möglich ist. Aber das die Seiten ohne Javascript völlig unbrauchbar werden finde ich einfach nur schlecht. Oder gibt es da einen Ansatz? Ich lade zur Zeit auch immer die Seiten nach. Das hat den Vorteil, dass wenn kein Javascript aktiviert ist eben NOSCRIPT-Tag-Inhalte für die weitere Funktion garantieren, die man mit Javascript gar nicht zu Gesicht bekommt.
Deshalb setzt ich solche AJAX-Geschichten zur Zeit nicht ein, weil meine Lösung einfach flexibler auf den Besucher der Seite eingeht.
Wie gesagt, es müsste eine flexible Lösung geben, die einem bei solchen Bestrebungen unterstützt. Trotzdem sollten die Seiten auch ohne Javascript voll funktionsfähig bleiben.

Da kannst du dir eine Eigenschaft von Browsern zugute kommen lassen. Nehmen wir an, dass du folgenden Link hast:

Code:

[url="somepage.php"]Foobar[/url]

Nun willst du eine AJAX-Funktion einbauen:

Code:

[url="javascript:doAJAXRequest()"]Foobar[/url]

Oopsie, jetzt gibts ein Problem. Wenn JS deaktiviert ist, krachts natuerlich. Was machen?

doAJAXRequest() muss einen Rueckgabe wert haben; true wenn der Request gesendet werden konnte, false wenn nicht. Das kommt dann so ins onclick rein:

Code:

[url="somepage.php"]Foobar[/url]

Was ist die Eigenschaft der Browser? Wenn im onclick false zurueckgegeben wird, folgt der Browser dem Link nicht, das macht er nur wenn true (oder eben nichts) zurueckgegeben wird. Im Erfolgsfall gibt doAJAXRequest() also true zurueck, wir negieren dies und geben es zurueck. Ergebnis: der Browser folgt dem Link nicht.

Getestet in allen moeglichen IE-, Fx-, Opera-, Safari-, Konqueror-Versionen dieser Welt.

Greetz
alcaeus

[omata]

Das hört sich interresant an.

Aber wie würde das bei Auswahlboxen aussehen?

Wenn ich in einer Auswahlbox etwas auswähle sollen Inhalte der zweiten Auswahlbox nachgeladen werden.

Gruss
Thorsten

[mkinzler]

Du würdest im onChange der ersten Combobox eine Methode der Ajax-Klasse aufrufen, welche du neben dem Schlüssel die Callback-Funktion mitgibst. Diese callbackfunktion wird dann mit dem Ergebnis aufgerufen.

[omata]

Ja, das ist klar. Aber was passiert wenn JS deaktiviert ist?

[alcaeus]

@mkinzler: es geht darum, das Ganze auch ohne AJAX laufen zu lassen ;)

Im onchange der Auswahlbox wird der Inhalt der zweiten Box nachgeladen. Zusaetzlich zeigst du einen Button an, mit dem dies manuell geschehen kann. Diesen Button blendest du nach dem Page-Load und nach einem AJAX-Compatibility-Test per Javascript aus. Die Folge: kann der Browser AJAX, verschwindet der Button, kann er es nicht, bleibt er. Wichtig ist, dass der Button nur in dem einen Fall ausgeblendet wird, sonst muss er da sein ;)
Der Button schickt dann das ganze Formular an den Server.

Greetz
alcaeus

[Nils_13]

Brauch ich für AJAX noch irgendwelche Zusatzdateien ?

Wenn ich es richtig verstanden habe, ist es dann auch möglich, wenn false zurückgeliefert wurde, die Seite zu verlinken.

[mkinzler]

Zitat:

Brauch ich für AJAX noch irgendwelche Zusatzdateien ?

Auf dem Client? Nein.

[alcaeus]

Zitat:

Zitat von Nils_13

Brauch ich für AJAX noch irgendwelche Zusatzdateien ?

Kommt drauf an wie du deine Seite aufbaust. Wichtig ist nur, dass du anhand eines Requests die Daten bekommst, die ausgetauscht werden sollen.

Greetz
alcaeus

[omata]

@alcaeus: Ja, das ist im Prinzip ja das was ich jetzt auch schon mache (NOSCRIPT-Tags).

Aber, ich muss zugeben ich habe mich noch nicht so genau mit AJAX beschäftigt, ist es möglich diese beiden Wege (JS->AJAX, kein JS->normales sumit) intern auf der Seite zusammenzuführen? Mir wäre es nämlich wichtig, das ich inhaltliche Teile nur einmal coden muss.

Das würde bedeuten, das schon ausgewählte Inhalte und dieser neue Inhalt ja bei deaktiviertem JS als komplette Seite neu geladen werden. Soweit klar und das mache ich zur Zeit alles selber.
Meine eigentlich Frage ziehlt mehr auf die Einfachheit ab. Unterstützt mich AJAX da und ist der Code noch leserlich? (Ich meine damit die Serverseite).

Edit: Habe noch diese Link gefunden.

Gruss
Thorsten

[Nils_13]

Auf der "alten" Seite, die ich eigentlich bald online stellen wollte (mir ist diese Feinheit gestern eingefallen, deshalb dauert das noch seine Zeit), habe ich viele PHP/HTML-Dateien, die so aufgebaut sind:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<headerzeugs>

CSS-Abschnitt1:
Hier kommt dann auch schon nach dem Logo das Menü. Es soll, abgesehen von den Farben, so wie oben aussehen (=Tabsheets). Hier werden bei einem Klick die Texte, die Links und die Bilder verändert.

CSS-Abschnitt2:
Hier kommt der zu verändernde Text hin
</alleswiederschließen>

Wäre es nicht auch eine Möglichkeit, es so zu lösen, wie hier?

[generic]

hier hat mit ajax nichts zu tun.
das ist nur ein js welches das design umschaltet.
der inhalt ist bereits geladen.

ajax läd context sensitiv daten nach.

[Nils_13]

Ok, ich habe diesen Code:

Code:

<script type="text/javascript">
function show () {
  if (document.getElementById)
    document.getElementById("test").style.visibility = "visible";
}

function hide () {
  if (document.getElementById)
    document.getElementById("test").style.visibility = "hidden";
}
</script>

Weiß jemand, wie ich show und hide um einen Parameter erweitern kann, damit ich auch alles nicht nur auf "test" zugreifen kann ? (In JS kenn ich mich leider nicht so gut aus)

[mkinzler]

Was meinst du mit "alles"?

[omata]

Versuch es doch mal so...

Code:

<script type="text/javascript">
function show (elem) {
  if (document.getElementById)
    document.getElementById(elem).style.visibility = "visible";
}

function hide (elem) {
  if (document.getElementById)
    document.getElementById(elem).style.visibility = "hidden";
}
</script>

Gruss
Thorsten

[Nils_13]

Und warum wird dann nichts angezeigt ?

Code:

[url="javascript:show(test)"]test[/url]

[mkinzler]

Versuchs mal mit

Code:

[url="javascript:show("]test[/url]

[Nils_13]

Das habe ich schon probiert. Wenn ich dann auf den Link klicke passiert weiterhin nichts. Hier mal die gesamte, kleine Testdatei:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title></title>
<meta name="author" content="NILS1">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<script type="text/javascript">
function show (elem) {
  if (document.getElementById)
    document.getElementById(elem).style.visibility = "visible";
}

function hide (elem) {
  if (document.getElementById)
    document.getElementById(elem).style.visibility = "hidden";
}
</script>

  <h1 id="test" style="visibility:hidden">Text</h1>
  

[url="javascript:show("]Anzeigen![/url]</p>
  

[url="javascript:hide("]Verstecken![/url]</p>

</body>
</html>

[mkinzler]

Sorry, doppelte Hochkommata sind innerhalb derselben natürlich schlecht besser so:

Code:

[url="javascript:show('test');"]test[/url]

[Nils_13]

Danke, das läuft soweit.

Hat jemand eine Idee, wie ich das besser strukturieren könnte ? Es gibt sagen wir mal 10 Links. Wenn ich Link 2 anklicke, wird alles andere ausgeblendet, aber selbst das macht Probleme, denn es steht dann alles untereinander, aber der Text soll ja gewechselt werden. Es steht am Ende alles in dem Shema da:

Zitat:

A B C D
Text zu A
Text zu C

Aber Text zu C soll auch in der Zeile und an der selben Position, wie Test zu A stehen.

[mkinzler]

Dann kannst du entweder mit einem Element arbeiten, dessen Text du zur Laufzeit veränderst oder mit gestapelten DIVs, welche du beim Klicken rotierst (z-Index)

[freak4fun]

Ich hab mal den Code von oben 1zu1 übernommen und es geht bei mir mit opera nicht. :( Hast du das mit Opera getestet?

//Edit: Ich sollte erst alles lesen. :pale:

MfG
freak

[mkinzler]

Hast du das Semikolon am Ende der Anweisung ergänzt?

[freak4fun]

Zitat:

Zitat von mkinzler

Hast du das Semikolon am Ende der Anweisung ergänzt?

Ja, aber wie gesagt nur copy & paste. Hatte die ' nicht geändert. ;)

MfG
freak

[Nils_13]

@mkinzler: Meinst du so etwas ?

Code:

<div id="">

Wie rotiert man denn divs?

[freak4fun]

Wenn man das über das "Hide" und "Show" macht werden ja alle Daten geladen. Auch die, die der Besucher gar nicht möchte. Es ist vielleicht nicht viel, aber ich wollte es mal zu bedenken geben. MAn muss ja auch noch an die Modem/isdn-Nutzer denken. ;)

Wenn du mehrere div-Elemente hast die untereinander liegen. Also nur das oberste zu sehen ist, kannst du über den z-index festlegen, welches Element oben liegt. :)

MfG
freak

[Nils_13]

Code:

<style type="text/css">
<!--
 .examplediv
 {
  background-color:#efefef;
  border-style:solid #000000 1px;
 }
#divid1
{
 position:absolute;visibility:hidden;
 left:450px; top:350px; width:300px; height:150px;
 z-index:1;
}
#divid2
{
 position:absolute;visibility:hidden;
 left:450px; top:350px; width:300px; height:150px;
 z-index:2;
}
// -->
</style>


<div id="divid1" class="examplediv">

</div>

<div id="divid2" class="examplediv">

</div>

So etwas ?

[mkinzler]

XML-Code:

<html>
<head>
  <script>
     function show( elem) {
     if (document.getElementById)
          document.getElementById(elem).style.zIndex= 6;
     }
  </script>
</head>
<body>
<div id="cont" style="position:absolute; top:0px; left:0px; width:100px; height: 20px; z-index:5 ;background:#fff;">

  <div id="empty" style="position:absolute; top:0px; left:0px; z-index:5; background:#fff;">
   
  </div>
  <div id="A" style="position:absolute; top:0px; left:0px; z-index:4; background:#fff;">
   Text A
  </div>

  <div id="B" style="position:absolute; top:-0px; left:0px; z-index:3; background:#fff;">
    Text B
  </div>

  <div id="C" style="position:absolute; top:0px; left:0px; z-index:2; background:#fff;">
    Text C
  </div>

  <div id="D" style="position:absolute; top:0px; left:0px; z-index:1; background:#fff;">
    Text D
  </div>
</div>


[url="javascript:show('A');"]A Anzeigen![/url]</p> 


[url="javascript:show('B');"]B Anzeigen![/url]</p> 


[url="javascript:show('C');"]C Anzeigen![/url]</p> 


[url="javascript:show('D');"]D Anzeigen![/url]</p> 
</body>
</html>

[Nils_13]

Der Code läuft soweit, aber wenn man D angezeigt hat und dann auf einen anderen Link klickt, wird der angeklickte Link nicht mehr ausgeführt bzw. angezeigt.

[mkinzler]

Das war auch nicht als Musterlösung, sondern als Beispiel gedacht. Du mußt nach dem du den DIV in den Vordergrund geschoben hast, den vorherigen nach hinten schieben (z-Index < )

[Nils_13]

Und wie macht man das wieder ?

[mkinzler]

Genauso wie du den einen DIV nach vorne geschoben hast:

Code:

document.getElementById(<elemname>).style.zIndex= 0;

[Nils_13]

Dann bin ich aber wieder beim Alten. Dann muss ich ja alle anderen Texte wieder auf 0 setzen.

[mkinzler]

Du kannst dir DIVs anfänglich alle auf 0 setzen und dann beim Aktivieren die Position immer um 1 erhöhen. dann funktioniert es ein Weilchen.
[Edit: Blöde Idee]