Ja so ist es besser
Zum Thema JSON kannst du dich auf
JSON_org und
Wikipedia informieren. Welche Browser das JSON-Objekt nativ unterstützen, aknnst du auf
Can I use JSON parsing? nachgucken.
Mittels
json_encode kannst du aus PHP heraus das JSON übergeben:
PHP:
<?php
header('Content-type: text/html; charset=UTF-8');
// UTF-8 Prüfkommentar
$arr = array ('vorname' => 'John', 'nachname' => 'Doe', 'str' => 'Main street 1', 'ort' => 'Historytown', 'plz' => 01234);
echo json_encode($arr);
?>
In dem Browser sollte dann sowas hier als Zeichenkette (String) ankommen:
Code:
{"vorname":"John","nachname":"Doe","str":"Main street 1","ort":"Historytown","plz":668}
welches dann im
xmlhttp.responseText gespeichert ist, siehe
Code:
function testJSON() {
var xmlhttp = createRequest(),
url = 'url_zu_deinem_script.php';
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
parseJSON(xmlhttp.responseText);
}
};
xmlhttp.send();
}
Hinter
createRequest() verbirgt sich eine Funktion, welche je nach Browser das ünterstütze Objekt für den Request zurückgibt:
Code:
function createRequest() {
var request;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request) {
alert("Error initializing XMLHttpRequest!");
}
return request;
}
Die Funktion
parseJSON() ruft folgende Funktion auf, welche die Antwort vom Server (PHP) verarbeitet:
Code:
function parseJSON(data) {
var x,
obj = JSON.parse(data),
html = '<table style="width:100%;"><thead><tr><th>object name<\/th><th>object value<\/th><\/tr><\/thead><tbody>';
for (x in obj) {
if (obj.hasOwnProperty(x)) {
html += '<tr><td style="padding-left:15px;">' + x +
'<\/td><td style="padding-left:15px;">' + obj[x] +
'<\/td><\/tr>';
}
}
html += '<\/tbody><\/table>';
document.getElementById('content').innerHTML = html;
}
In meinem Beispiel wird eine Tabelle mit den Wertepaaren in einen <div>-Kontainer ausgegeben. Über
JSON.parse(data) wird aus dem String, welcher vom Server (PHP) kommt, ein JavaScript-Objekt, welches ab sofort als
obj ansprechbar ist. Wie du dann auf das Objekt zugreifen kannst sollte denke ich mal klar sein.
Für ältere Browser, wie z.B. IE7 und älter, muss beachtet werden, dass diese das
JSON.parse() nicht kennen. Daher muss man es dem Browser beibringen, indem man folgendes zuerst ausführen lässt:
Code:
if (!window.JSON) {
// JSON RegExp
var rvalidchars = /^[\],:{}\s]*$/,
rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,
rvalidescape = /\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,
rvalidtokens = /"[^"\\\r\n]*"|true|false|null|-?(?:\d\d*\.|)\d+(?:[eE][\-+]?\d+|)/g;
window.JSON = {
parse: function (data) {
// Make sure leading/trailing whitespace is removed (IE can't handle it)
data = data.trim();
// Make sure the incoming data is actual JSON
// Logic borrowed from http://json.org/json2.js
if (rvalidchars.test(data.replace(rvalidescape, "@")
.replace(rvalidtokens, "]")
.replace(rvalidbraces, ""))) {
return (new Function("return " + data))();
}
alert('JSON string error !!!');
},
stringify: function (obj) {
var t = typeof (obj);
if (t !== "object" || obj === null) {
// simple data type
if (t === "string") {
obj = '"' + obj + '"';
}
return String(obj);
} else {
// recurse array or object
var n, v, json = [], arr = (obj && obj.constructor === Array);
for (n in obj) {
if (obj.hasOwnProperty(n)) {
v = obj[n];
t = typeof (v);
if (t === "string") {
v = '"' + v + '"';
} else if (t === "object" && v !== null) {
v = JSON.stringify(v);
}
json.push((arr ? "" : '"' + n + '":') + String(v));
}
}
return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
}
}
};
}
Die String-Methode
.trim() entfernt überflüssige Leerzeichen, mit denen z.B. der IE sonst ein Problem hätte. Auch hier gilt, sofern nich nativ vom verwendeten Browser unterstützt, zuerst beibringen:
Code:
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, '');
};
}
Sooo ... nun müssten aber alle Fragen beantwortet sein. Viel Spaß beim probieren.
