grundsätzlich javascript mit json bei dynamischen inhalten?

[jobo]

Hallo,

wenn gefilterte (Listen von) Datensätze, zB. Personendaten oder Produktdaten, abgefragt werden, kann man

a) mit Javascript und JSON die Datenstätze als Objekte übertragen oder
b) bereits mit PHP den Quelltext dynamisch generieren (statt ein json-Objekt)

Nachteil bei Variante a), dass einE HTML/CSS-ProgrammierIn kein direkt verwendbares Template herstellen könnte. Bei b) kann man ja schnell lernen, wie die Templates funktionieren:

  
<ul>Personen:</ul>  
<?php foreach ($personen as $person):?>  
<li>Name: <?=$person["name"]?> etc. pp. </li>  
<?php endforeach?>  

Gibt es sowas wie "state of the art" diesbezüglich?

Gruß

jobo

[bleicher]

Grüße,
JSON würde nur mit JS funzen - was machst du wenn JS aus ist? Fallback wäre nötig - also wäre 2e Möglichkeit Pflicht, Zusatz über JSON möglich falls du dich nach Hämorrhoiden sehnst.
MFG
bleicher

[jobo]

Hallo,

JSON würde nur mit JS funzen - was machst du wenn JS aus ist? Fallback wäre nötig - also wäre 2e Möglichkeit Pflicht, Zusatz über JSON möglich falls

du dich nach Hämorrhoiden sehnst.

http://json-template.googlecode.com/svn/trunk/doc/Introducing-JSON-Template.html beschreibt so in etwa, was ich auch dachte. da ist auch die html-variante beschrieben. die template für php und js decken sich ja fast. macht man einfach aus <?=$arist["name"]?> {arist.name} im template.

die variante "js-aus" ist ja von fall zu fall zu entscheiden und kann auch mit "ist mir egal" beantwortet werden. interessant aber auch mal wieder: wieviel javascript versteht google schon.

Gruß

jobo

[Beat]

interessant aber auch mal wieder: wieviel javascript versteht google schon.

Ja der grosse Google-Gott unterrichtet seine Engel-Bötter jeden Morgen in Javascript.

mfg Beat

[hotti]

interessant aber auch mal wieder: wieviel javascript versteht google schon.

Ja der grosse Google-Gott unterrichtet seine Engel-Bötter jeden Morgen in Javascript.

Als Rache könnten wir ja mal ein ajaxbasiertes Forum anbieten...

Hotti

[Joachim]

Hi,

JSON würde nur mit JS funzen - was machst du wenn JS aus ist? Fallback wäre nötig

Das Herumreiten darauf, das möglicherweise JS aus ist, ist langsam ermüdend.
Wer bestimmte Funktionalitäten erwartet, wird kaum sein Javascript ausschalten - oder besuchst Du vielleicht Googlemaps ohne? Wenn doch hast Du mein echtes Beileid, denn das ist zwar möglich, aber extrem freudlos.

Im Zweifel kann jeder Javascript einschalten, sofern er eine bestimmte Webapplikation nutzen möchte. Wenn er dem Betreiber der betreffenden Seite so wenig traut, dass er das nicht möchte, sollte er lieber gleich die Finger von dessen Angebot lassen.

Gruesse, Joachim

[Struppi]

Im Zweifel kann jeder Javascript einschalten, sofern er eine bestimmte Webapplikation nutzen möchte. Wenn er dem Betreiber der betreffenden Seite so wenig traut, dass er das nicht möchte, sollte er lieber gleich die Finger von dessen Angebot lassen.

Genau und solange ich nicht wirklich den Mehrwert gegenüber eines anderen Anbieters (der ohne JS funktioniert) erkenne, ist das nicht wirklich tragisch für mich. Wobei aber selbst google Maps ein Fallback hat.

Struppi.

[jobo]

Hallo,

Genau und solange ich nicht wirklich den Mehrwert gegenüber eines anderen Anbieters (der ohne JS funktioniert) erkenne, ist das nicht wirklich tragisch für mich. Wobei aber selbst google Maps ein Fallback hat.

Ich vermute nach wie vor, dass über 99% User nicht einmal wissen, dass, gewschweige denn wie und warum sie Javascript in ihrem Brauser (!) ausschalten und von den anderen 1% die es wissen, und wieder 1% es auch tun. Wieviele davon eigentlich lieber Lynx nutzen, bleibt unbekannt.

Gruß

jobo

[Struppi]

Genau und solange ich nicht wirklich den Mehrwert gegenüber eines anderen Anbieters (der ohne JS funktioniert) erkenne, ist das nicht wirklich tragisch für mich. Wobei aber selbst google Maps ein Fallback hat.

Ich vermute nach wie vor, dass über 99% User nicht einmal wissen, dass, gewschweige denn wie und warum sie Javascript in ihrem Brauser (!) ausschalten und von den anderen 1% die es wissen, und wieder 1% es auch tun. Wieviele davon eigentlich lieber Lynx nutzen, bleibt unbekannt.

Naja zumindest allen die ich kenne installiere ich NoScript (ich würde mal schätzen im Freundes- und Bekanntenkreis sind es ca. 50% die es aktiv nutzen). Es ist darüber hinaus auch eines der am meistem heruntergeladenen AddOns. Insofern mag ich deine Behauptung bezweifeln. Gerade in Zeiten wo auch sehr nervige Werbung mit Javascript erzeugt wird, sind es bestimmt mehr als 1%

Aber es ist ja auch egal. Wenn die Seite nur mit JS nutzbar ist, dann ist es so - und für die 1% (oder eben mehr) gibt es fast immer anderswo Seiten die auch ohne JS benutzbar sind. Insofern halte ich einen JS losen Fallback für sinnvoll, andere mögen das anders sehen.

Struppi.

[jobo]

Hallo,

Naja zumindest allen die ich kenne installiere ich NoScript (ich würde mal schätzen im Freundes- und Bekanntenkreis sind es ca. 50% die es aktiv nutzen). Es ist darüber hinaus auch eines der am meistem heruntergeladenen AddOns. Insofern mag ich deine Behauptung bezweifeln. Gerade in Zeiten wo auch sehr nervige Werbung mit Javascript erzeugt wird, sind es bestimmt mehr als 1%

58.618.875 Downloads.

aber js funktioniert ja dennoch, oder?

"Zusätzlicher Schutz für Ihren Browser: NoScript erlaubt das Ausführen von JavaScript, Java (und anderen Plugins) nur bei vertrauenswürdigen Domains Ihrer Wahl (z.B. Ihrer Homebanking-Website). Der auf einer Positivliste basierende präventive Ansatz zum Blockieren von Skripten verhindert das Ausnutzen von (bekannten und unbekannten!) Sicherheitslücken ohne Verlust an Funktionalität."

Gruß

jobo

[Struppi]

58.618.875 Downloads.

Wobei man aber sagen muss, dass das Addon am anfang eine extrem hohe update Frequenz hatte, was dann aber wieder auf einen hohen tatsächlichen Einsatz rückschliessen läßt.

aber js funktioniert ja dennoch, oder?

Ja, du kannst relativ leicht einzelne Domains entweder temporär und immer zulassen.

Struppi.

[LX]

State of the art ist die sogenannte graceful degradation, also so etwas wie eine elegante Abstufung an Funktionsumfang, je nachdem, was der Client leisten kann.

AJAX oder AJAJSON sind dabei nur Techniken, deren Verwendung je nach größtem Nutzen erfolgen sollte. Auch AJAHTML ist durchaus eine Alternative.

Wenn Du private Daten überträgst, sollte Dir übrigens die Verschlüsselung (über HTTPS) wichtiger sein als das Interface. Ob Du in PHP, JAVA oder einer anderen Sprache (Server-Side-JavaScript wird auch immer beliebter, ich persönlich mag lua ganz gern, weil es sehr klein und schnell ist) spielt dabei keine Rolle, sondern nur das, was Du damit anstellst.

Gruß, LX

[jobo]

Hallo,

State of the art ist die sogenannte graceful degradation, also so etwas wie eine elegante Abstufung an Funktionsumfang, je nachdem, was der Client leisten kann.

Gut, aber wenn er leisten kann, brauch ich ja immer noch eine Möglichkeit, die JSObjekt ins Dokument zuverfrachten. http://beebole.com/en/blog/pure/generate-html-from-a-json-without-any-template-but-html-and-javascript/.

Auch AJAHTML ist durchaus eine Alternative.

Ja, spart man Kopf und Fusskrempel (;-). Aber dacht ich auch schon dran.

Wenn Du private Daten überträgst, sollte Dir übrigens die Verschlüsselung (über HTTPS) wichtiger sein als das Interface.

Ja, das kommt dann wohl noch dazu, steht ja aber auch einem ganz anderen Blatt. Momentan sind das eher produktbezogene, also öffentliche.

ich persönlich mag lua ganz gern, weil es sehr klein und schnell ist)

SciTe ist doch in Lua geschrieben (;-).

Gruß

jobo

[jobo]

Hallo,

Gut, aber wenn er leisten kann, brauch ich ja immer noch eine Möglichkeit, die JSObjekt ins Dokument zuverfrachten. http://beebole.com/en/blog/pure/generate-html-from-a-json-without-any-template-but-html-and-javascript/.

führt zu PURE. Jemand Erfahrungen damit oder Alternativen?

Gruß

jobo

[LX]

Nein, aber die meines Wissens einfachste HTML-Template-Engine in JS sieht folgendermaßen aus:

• speichere Deine Templates mit Platzhaltern in <script type="text/html"></script>-Tags mit fester ID. Der Vorteil: Du kannst normalen HTML-Code verwenden und musst nicht Escapen oder Strings aus dem Code machen.
• ersetze die Platzhalter (Hier ${bezeichner}) mit einer RegExp-replace und einem Callback, in dem Du die Ersetzungen aus dem JSON-Objekt ausliest:

function json2html(template, jsobj) {  
return document.getElementById(template).innerHTML.replace(/\$\{([^}]+)\}/g,  
    function(full, key) { return jsobj[key] || ''; });  
}  

• Füge das generierte HTML an passender Stelle ein. Fertig!

Tip: Wenn Du noch mehr Geschwindigkeit brauchst, kannst Du Dir vorher einen Cache aus den Templates bauen.

Gruß, LX

[jobo]

Hallo,

• speichere Deine Templates mit Platzhaltern in <script type="text/html"></script>-Tags mit fester ID.

? das kapier ich nicht ganz. wie genau? wieso im script-tag? wird es da (noch) nicht ausgelesen? oder meinst du in hochkommas?

  
<script type="text/html">  
codeSnippet = '<h1>{abc}</h1';  
</script>  

???
da wäre ja das syntaxhighlighting perdu. in php gibt es ja ob_start()/_get_clean();

function json2html(template, jsobj) {

return document.getElementById(template).innerHTML.replace(/${([^}]+)}/g,
    function(full, key) { return jsobj[key] || ''; });
}

  
  
Ja, solange nicht iteriert werden muss, oder? Was ist full?  
  

> - Füge das generierte HTML an passender Stelle ein. Fertig!  
  
Ok, dann kann man ja wohl iterieren.  
  

> Tip: Wenn Du noch mehr Geschwindigkeit brauchst, kannst Du Dir vorher einen Cache aus den Templates bauen.  
  
Ja, das mit dem Template hab ich noch nicht ganz kapiert.  
  
Gruß  
  
jobo

[LX]

Hallo,

• speichere Deine Templates mit Platzhaltern in <script type="text/html"></script>-Tags mit fester ID.

? das kapier ich nicht ganz. wie genau? wieso im script-tag? wird es da (noch) nicht ausgelesen? oder meinst du in hochkommas?

Es wird ausgelesen, aber nicht dargestellt. Script-Tag-Inhalte werden generell nicht angezeigt. Da Browser aber nicht über Schnittstellen für Scripte vom MIME-Format "text/html" verfügen (sondern nur für Dokumente in diesem Format), hast Du ein script-Node, auf das Du im DOM zugreifen kannst, etwa mit innerHTML.

Ansonsten müßtest Du den Code tatsächlich in Hochkommas setzen und das jeweils verwendete Hochkomma, sofern es im Code vorkommt, escapen.

<script type="text/html">
codeSnippet = '<h1>{abc}</h1';
</script>

  
Nein, das hast Du falsch verstanden, es müßte heißen:  
  
~~~html
  
<script type="text/html" id="headline">  
<h1>${headline}</h1>  
</script>  

Das könntest Du mit der in meinem vorigen Posting aufgeführten Funktion dann folgendermaßen ausfüllen:

document.getElementById('header').innerHTML = json2html('headline', { headline: 'Meine neue Headline' });

Ja, solange nicht iteriert werden muss, oder? Was ist full?

Bei .replace mit Regulären Ausdrücken kann man auch ein Callback angeben. Dieses wird mit den folgenden Parametern aufgerufen: als erstes wird der gesamte gematchte String von Anfang bis Ende übergeben und danach die jeweiligen Matches der in Klammern stehenden Begriffe. Das ist sehr praktisch, um bestimmte Muster zu filtern und dynamisch zu ersetzen.

Gruß, LX

[jobo]

Hallo,

Nein, aber die meines Wissens einfachste HTML-Template-Engine in JS sieht folgendermaßen aus:

• speichere Deine Templates mit Platzhaltern in <script type="text/html"></script>-Tags mit fester ID. Der Vorteil: Du kannst normalen HTML-Code verwenden und musst nicht Escapen oder Strings aus dem Code machen.
• ersetze die Platzhalter (Hier ${bezeichner}) mit einer RegExp-replace und einem Callback, in dem Du die Ersetzungen aus dem JSON-Objekt ausliest:

function json2html(template, jsobj) {

return document.getElementById(template).innerHTML.replace(/${([^}]+)}/g,
    function(full, key) { return jsobj[key] || ''; });
}

  
Variante:  
  
~~~html
  
<div style="display:none" id="template">  
<div>${name} etc.pp.</div>  
<div>${other} etc.pp.</div>  
</div>  

mit

  
myTemplate = document.getElementById("template").innerHTML;  
  
for (i in jsonobj) {  
  myTemplate.reaplace("${"+i+"}",jsonobj[i]);  
}  

~~~.  
  
Ich find den regulären Ausdruck ja hübsch. Warum hast Du das $ am Anfang escaped? Gibt es einen Vorteil der einen oder anderen Variante, den ich jetzt noch nicht sehe? Bei der zweiten wäre der Vorteil, dass man fürs replace nicht wissen muss, wieviele Matches es gibt, oder? Weil key sich ja auf das erste Match bezieht. Also bei zwei Matches dann key2, oder?  
  
Gruß  
  
jobo

[jobo]

Hallo,

function json2html(template, jsobj) {

return document.getElementById(template).innerHTML.replace(/${([^}]+)}/g,
    function(full, key) { return jsobj[key] || ''; });
}

  
Macht Douglas Crockford auch so:  
  
~~~javascript
  
String.prototype.supplant = function (o) {  
    return this.replace(/{([^{}]*)}/g,  
        function (a, b) {  
            var r = o[b];  
            return typeof r === 'string' ?  
                r : a;  
        }  
    );  
};  

http://www.json.org/fatfree.html

Ich frage mich immer noch, warum man das Template nach den Markern untersucht {abc}, statt umgekehrt. Crockford untersucht ja immerhin noch r, ob es ein String ist, falls JObject[key] nicht existieren sollte. Das bräuchte man ja nicht, wenn man jedes key des Objektes durchlaufen würde. Vorteil wohl, dass man nur die keys abfrägt, die auch im Template vorhanden sind. Und sie auch dann mit Leerzeichen ersetzt, wenn das Objekt diese Eigenschaft garnicht hat.

Gruß

jobo

[hotti]

Hallo,

wenn gefilterte (Listen von) Datensätze, zB. Personendaten oder Produktdaten, abgefragt werden, kann man

a) mit Javascript und JSON die Datenstätze als Objekte übertragen oder
b) bereits mit PHP den Quelltext dynamisch generieren (statt ein json-Objekt)

c) mit einer einzigen serverseitigen Funktion die zu sendenden Daten soweit aufarbeiten, so dass mit nur einer Zeile Programmcode sowohl eine Ajax-Response als auch eine komplette HTML-Seite ausgegeben werden kann.

Viele Grüße,
Horst Pfiffig (mit drei 'f')

[jobo]

Hallo,

c) mit einer einzigen serverseitigen Funktion die zu sendenden Daten soweit aufarbeiten, so dass mit nur einer Zeile Programmcode sowohl eine Ajax-Response als auch eine komplette HTML-Seite ausgegeben werden kann.

Dazu sollten HTML-Template für PHP auch mit einer Zeile in ein HTML-Template für Javascript umgewandelt werden können.

Das Template ist natürlich mehr als eine Zeile.

Gruß

jobo

[Joachim]

Hi,

Gibt es sowas wie "state of the art" diesbezüglich?

ich verwende dann json, wenn die Daten weiter verarbeitet werden. Diese Änderungen kann ich dann direkt in dem Objekt speichern, dass ich aus den Json erzeugt habe, und ggf auch wieder versenden.

Html hole ich mir nur dann per Ajax, wenn es sich um keine Schnipsel mit klarer Struktur handelt, die nur zur Anzeige dienen, bspw. Listen.

Keine Ahnung ob ich damit "state of the art" bin...

Gruesse, Joachim

[jobo]

Hallo,

Gibt es sowas wie "state of the art" diesbezüglich?
ich verwende dann json, wenn die Daten weiter verarbeitet werden. Diese Änderungen kann ich dann direkt in dem Objekt speichern, dass ich aus den Json erzeugt habe, und ggf auch wieder versenden.

Genau.

Html hole ich mir nur dann per Ajax, wenn es sich um keine Schnipsel mit klarer Struktur handelt, die nur zur Anzeige dienen, bspw. Listen.

Keine Ahnung ob ich damit "state of the art" bin...

Klar. Frage war jetzt eher, wie kriege ich das JSObjekt in den HTML-Code, zB. bei einer Anzeige von Produkten. Immer die selbe Liste, immer andere Inhalte. Da hatte LX ja schon einen schönen Vorschlag.

Gruß

jobo