JSON mogelijkheden
Na de mogelijkheden met de Image, wat ook niet echt zeer praktisch is is er nog een mogelijk heid om JSON te gebruiken. JSON is een soort van XML, zelfde principe, maar dan met javascript. Voorbeeld volgen.
Het voorbeeld heb ik van:
http://borkweb.com/story/look-ma-cross-domain-scripting
Gebruik deze "classe" voor het dynamisch aanmaken van JSON requesters:
http://theurer.cc/code/jsonSamples/jsr_class.js
Aangezien de bovenstaande klasse een foutje bevat moet je achter elke url een ?a=b of iets dergelijks zetten anders gebeurt er niks!.
dan hier het script zoals ik het heb gebruikt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<html>
<head><title>Test</title></head>
<script src="http://theurer.cc/code/jsonSamples/jsr_class.js" type="text/javascript"></script>
<script type="text/javascript">
function addScript() {
// gebruik van ?a=b achter de url zorgt ervoor dat de classe werkt
// je zou ook de klasse kunnen herschrijven, of downloaden en includen van eigen server.
var obj=new JSONscriptRequest('http://yourserver.com/yourjsonfile.php?a=b');
obj.buildScriptTag(); // Build the script tag
obj.addScriptTag(); // Execute (add) the script tag
}//end addScript
function bork(data) {
var text='';
if(data==null) {
alert('error');
} else {
text='Image Title: ' + data.Image.Title + '<br />';
text+='Width: ' + data.Image.Width + '<br />';
text+='Height: ' + data.Image.Height + '<br />';
text+='Thumbnail Data: ' + data.Image.Thumbnail.Url;
text+=' (' + data.Image.Thumbnail.Width + 'x' + data.Image.Thumbnail.Height + ')<br />';
}
alert (text);
document.getElementById('output').innerHTML=text;
}//end bork
</script>
<body>
<a href="#" onClick="addScript(); return false;">Click to Get Stuff</a>
<div id="output"></div>
</body>
</html>
<head><title>Test</title></head>
<script src="http://theurer.cc/code/jsonSamples/jsr_class.js" type="text/javascript"></script>
<script type="text/javascript">
function addScript() {
// gebruik van ?a=b achter de url zorgt ervoor dat de classe werkt
// je zou ook de klasse kunnen herschrijven, of downloaden en includen van eigen server.
var obj=new JSONscriptRequest('http://yourserver.com/yourjsonfile.php?a=b');
obj.buildScriptTag(); // Build the script tag
obj.addScriptTag(); // Execute (add) the script tag
}//end addScript
function bork(data) {
var text='';
if(data==null) {
alert('error');
} else {
text='Image Title: ' + data.Image.Title + '<br />';
text+='Width: ' + data.Image.Width + '<br />';
text+='Height: ' + data.Image.Height + '<br />';
text+='Thumbnail Data: ' + data.Image.Thumbnail.Url;
text+=' (' + data.Image.Thumbnail.Width + 'x' + data.Image.Thumbnail.Height + ')<br />';
}
alert (text);
document.getElementById('output').innerHTML=text;
}//end bork
</script>
<body>
<a href="#" onClick="addScript(); return false;">Click to Get Stuff</a>
<div id="output"></div>
</body>
</html>
En natuurlijk het json bestandje aanmaken:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
// bork is the callback functie die wordt aangeroepen zodra je dit script execute.
// vandaar dat je een functie: bork aan moest maken
echo '
bork({
"Image": {
"Width":500,
"Height":250,
"Title":"Giant Cow",
"Thumbnail": {
"Url":"http://someurl.com/image/1234",
"Height": 75,
"Width": 150
}
}
});
';
?>
// bork is the callback functie die wordt aangeroepen zodra je dit script execute.
// vandaar dat je een functie: bork aan moest maken
echo '
bork({
"Image": {
"Width":500,
"Height":250,
"Title":"Giant Cow",
"Thumbnail": {
"Url":"http://someurl.com/image/1234",
"Height": 75,
"Width": 150
}
}
});
';
?>
Probeer dit script eens uit op 2 verschillende webservers en je zult zien dat het best handig is.
Je kunt het natuurlijk ook dynamisch gebruiken door met php verschillende dingen op te halen uit databases en die terug te geven.
Ik hoop dat ik wat duidelijkheid heb geschept.
Het is jammer dat er nog geen mogelijkheden zijn zonder javascript.
Maar die zullen er vast wel komen, tot die tijd moeten we het maar stelen met javascript.