globale variablen - Seite 2

kampfgnom · #11 (**permalink**) 17.05.2009, 14:25

ich kann ja nochmal die datei eigen, die das JSON generiert.

PHP-Code:


			
<?php

$array = array();
$array[] = array("I1"=> "Wert1", "I2"=> "Wert2" );
$array[] = array("I1"=> "Wert1", "I2"=> "Wert2" );

echo json_encode($array);

und der komplette Quellcode der index.php ist folgender:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testing json</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
var json = "";
$(document).ready(function() {
    $.getJSON("json_exec_content.php", function(e) {
        $.each(e, function(i, data) {
            json += data.I1;
        });
    });
});
$("#json_content").html(json);
</script>
</head>

<body>
<div id="json_content">
&nbsp;
</div>
</body>
</html>

Gumbo · #12 (**permalink**) 17.05.2009, 14:42

Das Ganze ist ein Race-Condition-Problem. Das $("#json_content").html(json) wird nämlich sofort aufgerufen. Die Anfrage wird aber erst gesendet wenn das Dokument fertig geladen wurde.
Deswegen:

Code:

$(document).ready(function() {
    $.getJSON("json_exec_content.php", function(e) {
        var json = "";
        $.each(e, function(i, data) {
            json += data.I1;
        });
        $("#json_content").text(json);
    });
});

protonenbeschleuniger · #13 (**permalink**) 17.05.2009, 17:45

Zitat:

Zitat von kampfgnom

So nun möchte ich aber nicht alles innerhalb der each Funktion machen.

Ich kenn mich mit jquery nicht so dolle aus, aber was soll denn die each Funktion hier machen? each von was?

Gumbo · #14 (**permalink**) 17.05.2009, 18:34

Der jQuery.each()-Methode können drei Parameter übergeben werden. Der erste Parameter ist ein iterierbares Objekt (also Array oder Object), der zweite eine Funktion, die für alle Elemente diese Objekte aufgerufen werden sollen. Wird der dritte Parameter angegeben, wird die Funktion im Kontext des jeweiligen Elements ausgeführt (hat also auch Zugriff auf die lokalen Attribute/Methoden) und der dritte Parameter ist die Parameterliste für die Funktion.

Ein einfaches Beispiel:

Code:

jQuery.each(
    [1,2,3],
    function(i, v) {
        alert("Element " + i + " hat den Wert " + v);
    }
);

protonenbeschleuniger · #15 (**permalink**) 17.05.2009, 19:08

ist e in dem Fall ein iterierbares Objekt? e klingt für mich nach Event, aber wenn ich mir die Funktion
getJSON Anschau, ist der 2. Parameter doch etwas völlig anderes.

Gumbo · #16 (**permalink**) 17.05.2009, 19:39

jQuery.getJSON() ruft jQuery.get() auf, die in dieser Hinsicht flexibel ist und bei Übergabe einer Funktion für den data-Parameter den Wert callback zuweist. Diese ruft wiederum jQuery.ajax() auf, welche eben callback (heißt dort success) mit den Daten und dem Status als Parameter aufruft. Und callback ist ja die anonyme Funktion, die anfangs jQuery.each() im zweiten Parameter übergeben wurde.

protonenbeschleuniger · #17 (**permalink**) 17.05.2009, 20:06

Dem konnte ich so halb Folgen, bis auf

Zitat:

Zitat von Gumbo

Und callback ist ja die anonyme Funktion, die anfangs jQuery.each() im zweiten Parameter übergeben wurde.

callback wird getJSON als 2. Parameter übergeben und die wird von ajax() aufgerufen und dort übergeben an success(). dort wird s.success( data, status ); aufgerufen. Und data kann iteriert werden?
Tricky, aber schwer durchschaubar. Ich find auch keine Erklärung, was ein jsonObj ist

Gumbo · #18 (**permalink**) 17.05.2009, 20:45

Funktionen sind in JavaScript Daten. Du kannst eine Funktion erzeugen und diese mit beliebig vielen Variablen referenzieren:

Code:

function foo() { alert("foo"); };
// ist dasselbe wie
var foo = function() { alert("foo"); };
var bar = foo;
alert(bar); // function () { alert("foo"); }
bar(); // == foo() => alert("foo")
alert(bar === foo); // true

var baz = alert;
baz("baz"); // == alert("baz")

Und so kommt es auch, dass die i zweiten Parameter definierte anonyme Funktion innerhalb der Funktion über den Argumentbezeichner aufgerufen werden kann:

Code:

function foo(func, text) { func(text); };
foo(alert, "Hallo, Welt!");

Und diese Funktion kann dann immer weitergereicht werden.

So kommt es, dass einmal jQuery.getJSON() die anonyme Funktion mit der Signatur function(e) übergeben wird. jQuery.getJSON() ruft dann jQuery.get() auf, die die Argumente data und callback vertauscht (ist nun unsere anonyme Funktion). Von dort wird jQuery.ajax() aufgerufen, wo unsere anonyme Funktion von success referenziert und schließlich mit den Parametern data und status aufgerufen wird. data sind dabei die empfangenen und geparsten JSON-Daten.

Unsere anonyme Funktion function(e) enthält wiederum den Aufruf von jQuery.each(), der wiederum eine zweite anonyme Funktion mit der Signatur function(i, data) übergeben wird, die dann mittels callback referenziert und später aufgerufen wird.

Scheppertreiber · #19 (**permalink**) 17.05.2009, 20:49

Erklärt aber nicht, warum die Variable ganz offensichtlich nicht global referenziert wird.
Vielleicht gibt es in der Lib eine Funktion gleichen Namens ?

(wäre ein recht übler konzeptioneller Fehler in JS selbst)

Gumbo · #20 (**permalink**) 17.05.2009, 21:09

Zitat:

Zitat von Scheppertreiber

Erklärt aber nicht, warum die Variable ganz offensichtlich nicht global referenziert wird.

Das wird sie doch. Nur wird eben die $(document).ready() übergebene Funktion nicht sofort aufgerufen sondern erst wenn das Dokument geladen wurde. Ähnliches gilt für die jQuery.getJSON() übergebene Funktion, die erst aufgerufen wird, nachdem die HTTP-Anfrage gesendet, die Antwort empfangen und geparst wurde.
Dadurch kommt es dazu, dass die Variable erst später verändert wird, nachdem bereits auf sie zugegriffen wurde.

Zur Verdeutlichung:

Code:

var json = "",
    start = new Date().getMilliseconds(),
    t = [];
$(document).ready(function() {
    t.push("function in ready(): " + (new Date().getMilliseconds() - start));
    $.getJSON("json_exec_content.php", function(e) {
        t.push("function in getJSON: " + (new Date().getMilliseconds() - start));
        $.each(e, function(i, data) {
            json += data.I1;
        });
    });
});
$("#json_content").html(json);
t.push("html: " + (new Date().getMilliseconds() - start));
window.setTimeout(function() {
    alert(t.join("\n"));
    alert(json);
}, 1000);

Deswegen darf $("#json_content").html(json) erst dann aufgerufen werden, wenn sowohl das Dokument geladen, als auch die HTTP-Anfrage gesendet und die Antwort empfangen und geparst wurde. Also genau nach dem Aufruf von jQuery.each().

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Lokale und globale Variablen und Konstanten	AndreasB	Serveradministration und serverseitige Scripte	42	27.09.2010 21:26
Bildergalerie mit Variablen	fledermaus	Serveradministration und serverseitige Scripte	1	08.04.2008 08:57
Variablen beim Zurück im Browser aktualisieren	2001amo	Serveradministration und serverseitige Scripte	1	12.04.2007 14:13
Variablen erzeugen Server-Probleme [gelöst!]	heiko_rs	Serveradministration und serverseitige Scripte	15	18.03.2006 15:08